CSS基础扫盲-CSS选择器

为什么会有CSS选择器

一个HTML文件由很多HTML标签构成，我们有很多CSS规则或者描述文件让这些HTML长得异常炫酷。但是问题是我们如何找到这些HTML标签？又如何让一个CSS对一组标签起作用，又如何让某个标签在这些统一的CSS中长得又别样一些？如何让这些CSS规则又只对某个标签的子标签起作用？这就涉及到CSS选择器，也就是让CSS找到匹配的标签（可能是一个，也可能是多个）。

常见CSS选择器

鉴于上面的场景诞生了很多种CSS选择器。下面我们介绍下常见的CSS选择器，为了方面下文描述类选择器，下面预先给一段HTML片段，所有的CSS都是基于该HTML（建议大家可以对着下面的代码在浏览器里实践一遍加深印象）。

<div class="hello" id="hello-p">
  <p class="hello" id="hello-s">
    Hello<strong>strong</strong>
  </p>
  <p class="world" id="world">
    world!
  </p>
  <p class="hello" id="hello-coder">
    Hello coder!
  </p>
  <strong>strong2</strong>
</div>

• 标签选择器

  标签选择器就是匹配某一类标签的选择器。直接用标签名字后面接CSS描述内容，如下：

  div {
    background-color: red;
  }
  

  这就表示整个html文档中所有div标签的背景色都为红色。如果有多个同样的标签选择器，那么顺序靠后的生效。如下：

  div {
    background-color: red;
  }
  div {
    background-color: green;
  }
  

  最终效果是div的背景色为绿色。

• 类选择器

  类选择器是会匹配具有同样类名的一组标签的选择器。用“.”+类名 来描述类选择器，如下：

  .hello {
    background-color: red;
  }
  

  这样就会让div以及div下面的第一个和第三个p标签的背景色都为红色。也就是类选择器可以做到选择一组不同类型的标签。突破了标签选择器只能选择同一类标签的限制。典型场景：多个标签都有外观，比如背景色，大小，圆角等。

• id选择器

  id选择器就是精准匹配某一个元素的选择器。如其名所说，id通常具有唯一性，也就是定位某个单一元素；如果细心的同学就能够发现前面两个选择器都是组选择器（也就是能够选择到多个标签）。用“#”+id 名描述id选择器，如下：

  #hello-p {
    background-color: red;
  }
  

  id为hello-p的p标签背景色会变为红色。注意优先级id选择器>类选择器>标签选择器。

• 后代选择器

  后代选择器选择器表示匹配指定标签后代的选择器。通常后台选择器由两部分构成：父选择器 + 空格 + 子类选择器。比如我们想让div标签的第二个p标签背景色变为红色，可以如下写

  .hello .world {
      background-color: red;
  }
  

  注意两个选择器之间有空格。表示在所有类为hello的标签的子标签中，将类名为world的标签背景色置为红色。注意如果是想多个选择器共用一个CSS描述规则，选择器之间用逗号隔开。如下将id为hello-s和world背景色均置为红色：

  #hello-s,#world {
    background-color: darkred;
  }
  

• 子类选择器

  子类选择器是匹配标签的直接子标签，不影响其子标签的后代的选择器。也就是只影响第一代。父选择器 + “>” + 子类选择器，如下我们想将div标签的直接strong标签背景色置为红色：

  div > strong {
    background-color: red;
  }
  

  可以看到div的直接strong子标签的背景色改变变为了红色，而id为hello-s的标签p标签里的strong标签则没有任何变化。注意在表达子类时候也可以用选择器嵌套。

• 相邻兄弟选择器

  相邻兄弟选择器会匹配标签的兄弟标签（前提是这两个兄弟标签具有共同父标签）。通常是选择器 + “+” + 标签。如下将id为hello-s的p标签紧接着p标签背景色变为红色：

  #hello-s + p {
    background-color: red;
  }
  

基本上能看到的复杂CSS选择器都是上面的几种组合，万变不离其宗。