选择器

选择器分类

  • 通配符
  • 元素
  • 类选择器
  • ID 选择器
  • 属性选择器
  • 伪元素选择器
  • 伪类选择器

认识各种选择器

通配符

通配符会选择文档中的所有元素，不过优先级也最低。

* {
  color: red;
}

上面的代码会把所有元素的字体颜色修改为红色。

元素选择器

元素选择器根据元素名选择不同的元素：

h1 {
  color: silver;
}
p {
  color: blue;
}

上面代码会把页面中的 h1 元素字体修改为银色，p 元素字体修改为蓝色。

类选择器

类选择器会匹配元素的 class 属性，匹配成功的元素会被选中：

<style>
  .red {
    color: red;
  }
</style>
<p>默认</p>
<p class="red">被选中</p>
<div class="red">也被选中</div>

需要注意的是，类选择器需要在类名前面添加一个点。

class 属性如果有多个值，就使用空格分开，比如：

<style>
  .foo {
    color: white;
  }
  .bar {
    background-color: silver;
  }
</style>
<p class="foo bar">银底 + 白字</p>

上面代码的 p 元素设置了两个 class 值，会作用两个 class 的样式。

ID 选择器

ID 选择器通过匹配元素的 id 属性，匹配成功的元素会被选中：

<style>
  #one {
    color: red;
  }
</style>
<p id="one">选中</p>
<p id="tow">text</p>

ID 选择器需要在 ID 名前添加 # 号。

属性选择器

属性选择器通过匹配元素的各个属性来选择元素，有以下几种选择方式：

选择器选择的元素备注
[attr]选择设置 attr 属性的元素
[attr=value]选择attr 属性值为 value 的元素
[attr~=value]选择attr 属性值为包含单词 value 的元素，其中 value 被视作一个单词，与其他单词使用空格隔开。
[attr\|=value]选择attr属性值以 value 开头的元素，value 与其他单词只能使用 - 分隔。
[attr^=value]选择attr属性值以 value 开头的元素CSS3，但是兼容到 IE7，下面同样
[attr$=value]选择attr属性值以 value 结尾的元素CSS3
[attr*=value]选择attr属性值含有 value 的元素CSS3

【属性选择器演示】

伪元素选择器

伪元素选择器可以一些类似元素的区域，它们一般不是真正的元素。它们的选择器一般由两个冒号开头，并配合其他选择器一起使用：

  • ::first-line：选择第一行文本
  • ::first-letter：选择第一个字符
  • ::before：在元素的内容开始的地方创建一个元素，并选择这个元素
  • ::after：在元素的内容结束的地方创建一个元素，并选择这个元素

其中，::before 和 ::after 需要设置属性 content 才能显示。

【伪元素选择演示】

伪类选择器

伪类选择器注重于选择元素的某个状态：

  • 悬停

    • :hover

  • 焦点

    • :focus

  • 链接

    • :link（未激活）
    • :visited（已激活）
    • :active（激活状态）

选择器运算符

选择器可以通过运算符连接，产生更多元的选择：

运算符选择范围示例示例选择范围备注
,选择多项div,p选择 div 和 p 元素
' '选择子级div p选择 div 元素内任意位置的 p 元素
>选择直系子级div>p选择 div 元素直系子级内的 p 元素
+选择下一个同级元素div + p选择同一级内紧跟 div 元素的一个 p 元素
~选择所有后续的同级元素div ~ p选择同一级内，div 元素后面的所有 p 元素CSS3，但是兼容到 IE7

【逐项演示】

选择器直接连接

选择器之间不通过运算符直接连接时，选择器之间是并且关系，比如：

<style>
  /* 选择 p 元素，且类名同时含有 root 与 box，且元素状态为 hover 的元素 */
  p.root.box:hover {
    color: red;
  }
</style>
<p class="root box">鼠标悬停时是红色</p>
<p class="root ">这里不被选中，类名缺少 box</p>