CSS 选择器

CSS选择器是一种用于匹配HTML文档中元素的模式。关联的样式规则将应用于与选择器模式匹配的元素。

什么是选择器

选择器是CSS最重要的方面之一，因为它们用于选择网页上的元素，以便可以设置样式。您可以通过多种方式定义选择器。

通用选择器

通用选择器（用*星号或星号表示）与页面上的每个单个元素匹配。如果目标元素上存在其他条件，则可以省略通用选择器。此选择器通常用于从元素中删除默认的边距和填充，以进行快速测试。

* {
    margin: 0;
    padding: 0;
  }

*选择器内的样式规则将应用于文档中的每个元素。

元素类型选择器

元素类型选择器将文档树中元素的每个示例与相应的元素类型名称进行匹配。

p {
    color: blue;
  }

p选择器中的样式规则将应用于<p>文档中的每个元素，并使其颜色为蓝色，无论它们在文档树中的位置如何。

ID选择器

id选择器用于为单个或唯一元素定义样式规则。

ID选择器的定义是一个井号（#），后跟ID值。

#error {
    color: red;}

此样式规则将id属性设置为的元素文本呈现为红色error。

class类选择器

类选择器可用于选择具有class属性的任何HTML元素。具有该类的所有元素将根据定义的规则进行格式化。

用一个句号（.）紧随其后的类值定义类选择器。

.blue {
    color: blue;
      }

以上样式规则将class属性中设置为的文档中每个元素的文本显示为蓝色blue。您可以使其更加具体。例如：

p.blue {
    color: blue;
    }

选择器中的样式规则p.blue仅<p>将class属性设置为的那些元素呈现为蓝色blue，而对其他段落没有影响。

后代选择器

当需要选择一个元素是另一个元素的后代时，可以使用这些选择器。例如，如果您只想定位无序列表中包含的那些定位点，而不要定位所有定位点元素。

ul.menu li a {
    text-decoration: none;
    }
h1 em {
    color: green;
    }

选择器内的样式规则ul.menu li a仅适用于<a>包含在具有class 的无序列表内的那些即锚元素.menu，并且对文档内的其他链接没有影响。同样，h1 em选择器内的样式规则仅适用于<em>heading内包含的元素<h1>。

子选择器

子选择器只能用于选择作为某些元素的直接子元素的那些元素。子选择器由两个或多个选择器组成，两个选择器之间用大于号（即>）隔开。例如，您可以使用这些选择器在具有多个级别的嵌套列表中选择列表元素的第一级。

ul > li {
    list-style: square;
    }
ul > li ol {
    list-style: none;
    }

选择器内的样式规则ul > li仅适用于<li>作为<ul>元素直接子元素的那些元素，并且对其他列表元素没有影响。

相邻兄弟选择器

相邻的同级选择器可用于选择同级元素。该选择器的语法类似于：E1 + E2，其中E2是选择器的目标。

h1 + p以下示例中的选择器<p>仅在<h1>和<p>元素在文档树中共享同一父级并且<h1>紧接在该<p>元素之前的情况下才选择元素。这意味着只有每个<h1>标题之后的段落才   具有关联的样式规则。

h1 + p {
    color: blue;
    font-size: 18px;
    }
ul.task + p {
    color: #f0f;
    text-indent: 30px;
    }

通用兄弟选择器

通用的同级选择器与相邻的同级选择器（E1 + E2）类似，但不太严格。通用的同级选择器由两个简单的选择器组成，这些选择器由波浪号（～）字符分隔。可以这样写：E1?E2，其中E2是选择器的目标。

下例中的选择器h1 ～ p将选择该<p>元素之前的<h1>所有元素，其中所有元素在文档树中共享相同的父元素。

h1 ～ p {
    color: blue;
    font-size: 18px;
    }
ul.task ～ p {
    color: #f0f;
    text-indent: 30px;
    }

还有更多选择器，例如属性选择器，伪类，伪元素。我们将在接下来的章节中讨论这些选择器。

分组选择器

样式表中的多个选择器通常共享相同的样式规则声明。您可以将它们分组为一个逗号分隔的列表，以最大程度地减少样式表中的代码。它还可以防止您一遍又一遍地重复相同的样式规则。

h1 {
    font-size: 36px;
    font-weight: normal;
   }
h2 {
    font-size: 28px;
    font-weight: normal;
   }
h3 {
    font-size: 22px;
    font-weight: normal;
   }

正如你可以在上面的示例中看到，相同的样式规则font-weight: normal;是由选择共享h1，h2和h3。因此，可以将其分为逗号分隔的列表，如下所示：

h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}