CSS 选择器中的句点[重复]

Question

使用各种选择器配置有何影响？

1. span.classy.whatever { }

2. span.classy, .whatever { }

3. span .classy .whatever { }

4. span, .classy, .whatever { }

Answer 1

CSS 中的句点用于表示 class 选择器。

现在根据您的问题，让我们看看这些类将在哪里生效。

a)

span.classy.whatever { }

：它将影响具有“classy”和“whatever”类的 span 元素。两个班都有。

<span id="mySpan" class="classy whatever"> Span Text </span>

b)

span.classy, .whatever { }

：它将影响具有类

classy

的span元素和具有类

whatever

的元素。任何一个条件都足够。

<span id="mySpan" class="classy"> Span Text </span>

<div class="whatever"></div>

c)

span .classy .whatever { }

：它将影响具有 whatever 类的 span 元素，并且该元素的父元素具有

classy

类，并且具有

classy

的父元素的父元素将是一个 span。

<span>
    <span class="classy">
    <span class="whatever">
        inner most child
    </span>
</span>

d)

span, .classy, .whatever { }

：它将影响 span 元素、类为 classy 的元素和类为 whatever 的元素。

<span>Span Text</span>

<div class="classy"></div>

<p class="whatever"></p>

Answer 2

1) 将适用于具有 .classy 和 .whatever 类的所有跨度。

2) 将应用于所有具有 .classy 的跨度以及所有具有 .whatever 类的元素

3) 将应用于所有具有 .whatever 类的元素，这些元素应该是具有类 .classy 的元素的子元素，而 .classy 类又应该是 span 的子元素。例如

<span>
   <div class="classy">
      <div class="whatever">This will be targeted</div>
   </div>
</span>

4) 将适用于所有跨度、.classy 和 .whatever 类

Answer 3

它们都有不同的含义并选择不同的元素。

span.classy.whatever { }

规则应用于属于类

<span>

和类

classy

的

whatever

元素。

span.classy, .whatever { }

这些规则适用于属于

<span>

类的

classy

元素，以及属于

whatever

类的任何元素。

span .classy .whatever { }

这些规则应用于属于

whatever

类的元素，该元素是属于

classy

类的元素的后代，而该元素是

<span>

元素的后代。

span, .classy, .whatever { }

这些规则适用于任何

<span>

元素、属于

classy

类的任何元素以及属于

whatever

类的任何元素。

Answer 4

span.classy.whatever { }

这将匹配一个

span

元素，该元素具有

classy

和

whatever

类

span.classy, .whatever { }

将匹配具有

span

类的

classy

元素以及具有

any

类的

whatever

元素

span .classy .whatever { }

将匹配嵌套元素

<span>
    <span class="classy">
        <span class="whatever">here</span>
    </span>
</span>

最后

span, .classy, .whatever { }

将匹配所有

span

元素，以及具有

any

类的

classy

元素以及具有

whatever

类的任何元素

Answer 5

span.classy.whatever { }

同时具有

span

和

.classy

类

的目标 

.whatever

元素

span.classy, .whatever { }

目标

span

类为

.classy

的元素以及任何类为

.whatever

的元素

span .classy .whatever { }

目标具有

.whatever

类的元素，这些元素是具有

.classy

类的元素的子元素，这些元素是

span

元素的子元素。

span, .classy, .whatever { }

定位任何

span

元素以及具有类

.classy

或

.whatever

类的任何元素