CSS 选择器中的句点

Question

使用各种选择器配置的含义是什么？

1. span.classy.whatever { }
2. span.classy, .whatever { }
3. span .classy .whatever { }
4. span, .classy, .whatever { }

Answer 1

CSS 中的句点用于表示类选择器。例如;

现在根据您的问题让我们看看这些类将在何处生效。

一种。span.classy.whatever { }：它会影响具有优雅和任何两个类的跨度元素。

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

湾 span.classy, .whatever { }：它会影响具有classy类的跨度和具有类的元素whatever。

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

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

C。span .classy .whatever { }：它会影响具有任何类的元素，该元素的父元素将是classy，其父元素classy将是跨度。

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

d. span, .classy, .whatever { }：它会影响跨度，classy class 的元素和任何class。

<span>Span Text</span>

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

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