CSS选择器大全

一、常用的选择器

1.元素选择器（Element Selector）：通过元素名称来选择元素。

元素选择器通过元素名称来选择元素，是CSS中最基本的选择器之一。下面是一个例子，演示如何使用元素选择器来选择所有的段落元素，并将它们的颜色设置为红色：

p {

  color: red;

}

2.类选择器（Class Selector）：

.red-text {

  color: red;

}

上面的代码中，.red-text表示选择所有class为“red-text”的元素，color: red;表示将它们的颜色设置为红色。这样，所有class为“red-text”的元素都会变成红色。在HTML中，我们可以这样使用类选择器：

<p class="red-text">这是一段红色的文字。</p>

3.ID选择器（ID Selector）：

#header {

  background-color: gray;

}

上面的代码中，#header表示选择ID为“header”的元素，background-color: gray;表示将它的背景颜色设置为灰色。这样，ID为“header”的元素的背景颜色就会变成灰色。在HTML中，我们可以这样使用ID选择器：

<div id="header">这是一个头部。</div>

4.通配符选择器是CSS中最基本的选择器之一，它可以匹配HTML文档中的所有元素。通配符选择器使用“*”作为选择器，下面是一个例子，演示如何使用通配符选择器来选择所有的元素，并将它们的边框设置为1像素的红色实线：

复制* {

  border: 1px solid red;

}

上面的代码中，*表示选择所有的元素，border: 1px solid red;表示将它们的边框设置为1像素的红色实线。这样，所有的元素都会有1像素的红色实线边框。通配符选择器虽然可以匹配所有的元素，但是由于它会匹配到HTML文档中的所有元素，因此在实际开发中应该谨慎使用，以免影响性能。

二、群组选择器

群组选择器是CSS中常用的选择器之一，它可以同时选择多个元素，并对它们应用相同的样式。群组选择器使用逗号分隔多个选择器，下面是一个例子，演示如何使用群组选择器来选择所有的段落元素和所有的标题元素，并将它们的颜色设置为红色：

复制p, h1, h2, h3, h4, h5, h6 {

  color: red;

}

上面的代码中，p, h1, h2, h3, h4, h5, h6表示选择所有的段落元素和所有的标题元素，color: red;表示将它们的颜色设置为红色。这样，所有的段落元素和标题元素都会变成红色。群组选择器可以同时选择多个元素，使得样式的应用更加方便和灵活。

三、关系选择器

后代选择器

后代选择器是CSS中常用的选择器之一，它可以选择某个元素的后代元素，并对它们应用样式。后代选择器使用空格分隔两个选择器，下面是一个例子，演示如何使用后代选择器来选择所有段落元素中的strong元素，并将它们的颜色设置为红色：

p strong {

  color: red;

}

上面的代码中，p strong表示选择所有段落元素中的strong元素，color: red;表示将它们的颜色设置为红色。这样，所有段落元素中的strong元素都会变成红色。后代选择器可以选择某个元素的后代元素，使得样式的应用更加和灵活。

2.子代选择器

子代选择器是CSS中常用的选择器之一，它可以选择某个元素的直接子元素，并对它们应用样式。子代选择器使用“>”符号分隔两个选择器，下面是一个例子，演示如何使用子代选择器来选择所有ul元素中的直接子元素li元素，并将它们的颜色设置为红色：

ul > li {

 color: red;\}

上面的代码中，ul > li表示选择所有ul元素中的直接子元素li元素，color: red;表示将它们的颜色设置为红色。这样，所有ul元素中的直接子元素li元素都会变成红色。子代选择器可以选择某个元素的直接子元素，使得样式的应用更加和灵活。

3.相邻兄弟选择器

相邻兄弟选择器是CSS中常用的选择器之一，它可以选择某个元素后面紧跟着的兄弟元素，并对它们应用样式。相邻兄弟选择器使用“+”符号分隔两个选择器，下面是一个例子，演示如何使用相邻兄弟选择器来选择所有class为item的元素后面紧跟着的兄弟元素，并将它们的颜色设置为红色：

.item + * {

  color: red;\}

上面的代码中，.item + *表示选择所有class为item的元素后面紧跟着的兄弟元素，color: red;表示将它们的颜色设置为红色。这样，所有class为item的元素后面紧跟着的兄弟元素都会变成红色。相邻兄弟选择器可以选择某个元素后面紧跟着的兄弟元素，使得样式的应用更加和灵活。

4.通用兄弟选择器

通用兄弟选择器是CSS中常用的选