CSS交并集选择器

交并集 选择器

1. 交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。用于选择同时满足标签和class条件的元素。

p.one {
    background-color: brown;
}

在上面的例子中，选择所有带有class为one的<p>标签，并将它们的背景颜色设置为brown。

2. 并集选择器

并集选择器是通过逗号将多个选择器连接在一起的，可以同时选择多个元素，并为它们定义相同的CSS样式。

p, span, div {
    background-color: dodgerblue;
}

上面的例子中，选择所有<p> <span> <div>标签，并将它们的背景颜色设置为dodgerblue。

3. 后代选择器（包含选择器）

后代选择器用于选择元素或元素组的后代，写法是将外层标签写在前面，内层标签写在后面，中间用空格分开。当标签发生嵌套时，内层标签就成为外层标签的后代。

.two p {
    background-color: blue;
}

在上面的例子中，选择所有在class为two的元素内部的<p>标签并将它们的背景颜色设置为blue。

4. 子元素选择器

子元素选择器只能选择作为某元素子元素的元素，其写法是将父级标签写在前面，子集标签写在后面，中间跟一个>进行连接。

.two > p {
    background-color: chocolate;
}

在上面的例子中，选择所有在class为two的元素直接子元素的<p>标签，并将它们的背景颜色设置为chocolate。

5. 兄弟元素选择器

兄弟元素选择器用于选择拥有相同父元素的元素，可以选择下一个兄弟或选择下边所有的兄弟。

.two p + span {
    color: rgb(42, 165, 69);
    font-weight: bold;
}

在上面的例子中，选择紧接在class为two的元素内部的<p>标签后面的<span>元素，并将它们的文字颜色设置为rgb(42, 165, 69)，同时加粗文字。

.two p ~ span {
    color: rgb(245, 221, 7);
    font-weight: bold;
}

在上面的例子中，选择在class为two的元素内部的<p>标签后面的所有<span>元素，并将它们的文字颜色设置为rgb(245, 221, 7)，同时加粗文字。