什么是选择器

CSS有一套用于描述其语言的术语。

1
2
3
div {
  color: red;
}

在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器 div 开始，它选择要在DOM中哪些元素上使用这条规则。

选择器介绍

标签选择器（类型选择器）

1
2
3
div {
  color: red;
}

上述代码就是标签选择器，选择所有div标签。因为div是一个标签，在CSS规范中称为类型选择器。

类选择器

1
2
3
.name {
  color: red;
}

通过 . 来指定一个类
上述代码就是选择所有标签内有class="name"的标签，注意，如果被选择的标签内还有子标签，且没有被其他选择器选中，则样式会保持默认。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>类型选择器</title>
<style>
.title {
    font-size: 30px;
}
</style>
</head>
<body>
<p class="title">标题<p>正文内容</p><p>
<p>多类选择符的使用</p>
</body>
</html>

效果如下


接下来我们把 title的 font-size改为20px，然后加上
1
2
3
.content {
    font-size: 30px;
}

再在<p>正文内容</p>内加上类content，即下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>类型选择器</title>
<style>
.title {
    font-size: 20px;
}
.content {
    font-size: 30px;
}

</style>
</head>
<body>
<p class="title">标题<p class="content">正文内容</p></p>
<p>多类选择符的使用</p>
</body>
</html>

效果如下


可以看到，嵌套在子标签里面的类优先匹配了content规则
我们再改一下
1
2
3
.content.note {
    color:red;
}

1
<p class="content note">多类选择符的使用</p>

这时，两个规则同时作用在多类选择符的使用上，即匹配同时具有content和note的元素，如果元素只有其中一个类，那这个规则不会匹配到这个元素，这就是多类选择器
如果不同的类选择器作用在同一个元素上，则样式会叠加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>类型选择器</title>
<style>
.title {
    font-size: 20px;
}
.content {
    color: red;
}

</style>
</head>
<body>
<p class="title">标题<p >正文内容</p></p>
<p class="title content">多类选择符的使用</p>
</body>
</html>

其中，多类选择符的使用同时具有title和content的样式。
注意，如果定义了的规则，CSS改变的是同一个样式，则后定义的规则会覆盖前面的规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>类型选择器</title>
<style>
.title {
    color: green;
}
.content {
    color: red;
}

</style>
</head>
<body>
<p class="title">标题<p >正文内容</p></p>
<p class="title content">多类选择符的使用</p>
</body>
</html>

这里，虽然多类选择符的使用这个p标签同时有title和content两个规则，但是由于content是在之后定义的，所以content生效。

id选择器

1
2
3
#name{
  color: red;
}

通过#来指定一个id

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

上述只是规范，因为你可以设置多个一样的id，而且浏览器不报错，但是，你只能通过getElementById()的方法获得第一个符合id的元素，而不能获得全部符合id的元素，这是不推荐的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>id选择器</title>
<style>
#subtitle {
    color: red;
}
#content {
    color: blue;
}
</style>
</head>
<body>
<h1 id="subtitle">标题</h1>
<p id="content">正文内容</p>
</body>
</html>

注意，id选择器不能在同个元素上定义多个，比如id="a b"就是错误的写法。

伪类选择器和伪元素选择器（伪对象选择器）

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover。CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link, :visited, 和 :active等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。”) 会在鼠标悬停在选中元素上时应用相应的样式。

伪类选择器列表：

选择器 版本 描述
E:link CSS1 设置超链接a在未被访问前的样式。
E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式。
E:hover CSS1/2 设置元素在其鼠标悬停时的样式。
E:active CSS1/2 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus CSS1/2 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:lang(fr).htm) CSS2 匹配使用特殊语言的E元素。
E:not(s).htm) CSS3 匹配不含有s选择符的元素E。
E:root CSS3 匹配E元素在文档的根元素。
E:first-child CSS2 匹配父元素的第一个子元素E。
E:last-child CSS3 匹配父元素的最后一个子元素E。
E:only-child CSS3 匹配父元素仅有的一个子元素E。
E:nth-child(n).htm) CSS3 匹配父元素的第n个子元素E。
E:nth-last-child(n).htm) CSS3 匹配父元素的倒数第n个子元素E。
E:first-of-type CSS3 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type CSS3 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type CSS3 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n).htm) CSS3 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n).htm) CSS3 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty CSS3 匹配没有任何子元素（包括text节点）的元素E。
E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled CSS3 匹配用户界面上处于可用状态的元素E。
E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。
E:target CSS3 匹配相关URL指向的E元素。
@page:first CSS2 设置页面容器第一页使用的样式。仅用于@page规则
@page:left CSS2 设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
@page:right CSS2 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

伪元素选择器列表：

选择符 版本 描述
E:first-letter/E::first-letter CSS1/3 设置对象内的第一个字符的样式。
E:first-line/E::first-line CSS1/3 设置对象内的第一行的样式。
E:before/E::before CSS2/3 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after CSS2/3 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder CSS3 设置对象文字占位符的样式。
E::selection CSS3 设置对象被选择时的颜色。
  • CSS3将伪元素选择器(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择器(Pseudo-Classes Selectors)，但以前的写法仍然有效。

伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)， 内容状态(如 :checked CSS 伪类选择器表示任何处于选中状态的radio(), checkbox () 或("select") 元素中的option HTML元素("option")) 。用户通过点击元素或选择其他的值，可以改变该元素的 :checked 状态，并:checked属性赋给一个新的对象(例如其他的option值)。”) ), 鼠标位置 (如:hover).

关系选择器

选择器 名称 版本 描述
E F 包含选择器(Descendant combinator) CSS1 选择所有被E元素包含的F元素。
E>F 子选择器(Child combinator) CSS2 选择所有作为E元素的子元素F。
E+F 相邻选择器(Adjacent sibling combinator) CSS2 选择紧贴在E元素之后F元素。
E~F 兄弟选择器(General sibling combinator) CSS3 选择E元素所有兄弟元素F。

属性选择器

选择器 版本 描述
E[att] CSS2 选择具有att属性的E元素。
E[att=”val”] CSS2 选择具有att属性且属性值等于val的E元素。
E[att~=”val”] CSS2 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^=”val”] CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$=”val”] CSS3 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*=”val”] CSS3 选择具有att属性且属性值为包含val的字符串的E元素。
E[att|=”val”] CSS2 选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素，如果属性值仅为val，也将被选择。

选择器优先级算法

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器更具确定度。
下面是利用权重的方式来计算优先级：

最高优先级是 (直接在标签中的设置样式，假设级别为1000)

　　
次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;} 　　
其次优先级是（类选择器，假设级别为10） .divClass{color:Red;} 　　
最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}
全局选择器(*), 以及组合选择器(+, > ~),和:not选择器对权重没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。

还有一种优先级算法：

1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

一些经验法则：

  • 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • 只有在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
  • 永远不要在全站范围的 css 上使用 !important
  • 永远不要在你的插件中使用 !important

参考:
MDN web docs
css参考手册