CSS复合选择器-EW帮帮网

复合选择器

在 CSS 中，为了更方便的对元素进行样式设置，通常可以使用复合选择器。以下介绍一些常用的复合选择器。

后代选择器是 CSS 中最常用的复合选择器，它用于匹配当前选择器所匹配的元素，以及其子元素。
在 CSS 中，后代选择器是使用空格（" "）来表示的。例如，div span 表示匹配 div 元素下的所有 span 元素。

<div>
    <span>Hello</span>
    <span>World</span>
    <p>
        <span>Hello</span>
        <span>World</span>
    </p>
</div>

div span {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

在上面的例子中，div span 选择器会匹配 div 元素下的所有 span 元素(div 所有嵌套级别的 span 元素都会被上述的 CSS 设置样式)，并将它们设置为红色、20px 大小和粗体。

子选择器是 CSS 中另一个常用的复合选择器，它用于匹配当前选择器所匹配的元素，以及其直接子元素。

在 CSS 中，子选择器是使用 > 来表示的。例如，div > span 表示匹配 div 元素下的直接子元素 span 元素。

<div>
    <span>Hello</span>
    <span>World</span>
    <p>
        <span>Hello</span>
        <span>World</span>
    </p>
</div>

div > span {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

在上面的例子中，div > span 选择器会匹配 div 元素下的直接子元素 span 元素，并将它们设置为红色、20px 大小和粗体。因此 p 标签下的 span 元素不会被匹配。

并集选择器是 CSS 中另一个常用的复合选择器，它用于匹配多个选择器所匹配的元素。

在 CSS 中，并集选择器是使用逗号（“,”）来表示的。例如，div, span 表示匹配 div 元素和 span 元素。

<div> 111 </div>
<p> 222 </p>
<span> 333 </span>

div, span, p {
    color: red;
    font-size: 20px;
    line-height: 30px;
}

在上面的例子中，div, span, p 选择器会匹配 div 元素、span 元素和 p 元素，并将它们设置为红色、20px 大小和30px行高。

交集选择器是 CSS 中另一个常用的复合选择器，它用于匹配多个选择器所匹配的元素，并且这些元素必须同时满足多个选择器的条件。

在 CSS 中，交集选择器是直接拼接多个选择器来表示的。例如，div.box 表示匹配 div 元素，并且该元素具有 box 类名。

<div class="box">
    交集选择器
</div>

div.box {
    color: red;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
}

伪类选择器是 CSS 中另一个常用的复合选择器，它用于匹配当前选择器所匹配的元素，并且该元素在特定状态下。

在 CSS 中，伪类选择器是使用 “:” 来表示的。例如，div:hover 表示匹配 div 元素，并且当鼠标悬停在该元素上时。

<div> 这是一个 div 元素 </div>

div:hover {
    color: red;
    font-weight: bold;
}

在这个例子中，当鼠标悬停在 div 元素上时，该元素会变成红色、粗体。

超链接一共有四个状态

<a href="https://www.baidu.com">百度一下</a>

a:link {
    color: red;
    font-weight: bold;
    text-decoration: none;
}

如果需要设置这四个状态，需要按照顺序写，否则可能不生效。