前端面试CSS系列——选择器、权重计算（一）

面试

问：CSS选择器类型有哪些？

答：CSS选择器类型有：类型选择器，通用选择器，属性选择器，类选择器，ID选择器，伪类选择器，伪元素选择器。选择器之前可以使用逗号『,』分组，也可以使用空格，加号『+』，右尖括号『>』，波浪号『~』进行组合。

介绍

本篇文章的内容相对比较简单基础一些，主要介绍了选择器相关的一些内容，本来打算把选择器和选择器权重计算相关的内容放在一起的，但这样篇幅实在太长，不便于阅读，于是这部分的内容会拆分为两篇内容，这篇说说选择器，下一篇说选择器权重的计算。在文章的结尾放了一张图，算是权重计算的一个引子。

选择器

CSS中，选择器用来指定网页上我们想要格式化HTML元素的。CSS为我们提供了很多种选择器方法，让我们可以很精细的格式化我们选择的元素的样式；在使用上，CSS选择器是不区分大小写的DIV{font-size:18px} 和div{font-size:18px}效果是一样的。

选择器组（列表）
如果有多个使用相同样式的选择器，那么这些单独的选择器可以使用逗号『，』组合为一个『选择器组』或者说『选择器列表』，例如：

// 相同样式的选择器
h1 {font-family:'苹方'}
h2 {font-family:'苹方'}
h3 {font-family:'苹方'}

// 使用逗号分割，合成选择器组
h1, h2, h3{font-family:'苹方'}

PS：选择器组当中，如果其中一个选择器无效，则整个选择器组都无效，例如：
h1, ..h2, .h3 { font-family:'苹方' } 选择器..h2 是无效的，CSS会根据规则把整个选择器组删掉

简单选择器

简单选择器包括：类型选择，通用选择器，属性选择器，类选择器，ID选择器和伪类选择器。身为前端开发，这些简单的选择器我们肯定都用过，这里简单做下说明。

类型选择器

按照给定的节点名称，选择所有匹配的HTML元素。

语法：elementname
例子：

// 匹配所有的h1标签
h1 { font-size:18px }

// 匹配所有的input标签
input{ font-size:18px }

通用选择器

选择所有的HTML元素，用星号（*）表示
语法：*
例子：

// 把所有元素的内外边距都设置为0
* {
  padding: 0;
  margin: 0;
}

// 匹配所有div标签的子元素
div *{ font-size:18px }

属性选择器

按照给定的属性，选择所有匹配的元素
语法：[attr] [attr=value] [attr~=value] [attr!=value] [attr^=value] [attr$=value] [attr*=value]

例子：

[attr]

表示具有attr属性的元素，无论该属性的值如何。

// 匹配具有title属性的所有a元素
a[title] {
  color: yellow;
}

[attr = value]

表示一个元素，其attr属性值恰好是“value”。

// 匹配target属性值为blank的所有a元素
a[target="blank"] {
  color: yellow;
}

[attr ~= value]

表示一个元素，其attr属性值为以空格分隔的单词列表，其中一个正好是“value”。

// 匹配class属性值包含special的元素
p[class~="special"]{
  color: yellow;
}

[attr |= value]

表示具有attr属性的元素，其值要么正好是“value”，要么以“value-”为前缀。

// 匹配lang属性的值为en或者en-为前缀的所有a元素
a[lang|="en"] {
  color: yellow;
}

[attr ^= value]

表示具有attr属性，属性值以前缀“value”开头的属性的元素。如果“value”是空字符串，则选择器不代表任何内容。

// 匹配HTML元素object，其属性type值是以image/开头的元素
object[type^="image/"] {
  color: yellow;
}

[attr $= value]

表示具有attr属性，属性值以后缀“value”结尾的属性的元素。如果“value”是空字符串，则选择器不代表任何内容。

// 匹配属性href值以.html结尾的a元素
a[href$=".html"] {
  color: yellow;
}

[attr *= value]

表示一个元素，其attr属性的值至少包含子字符串“value”的一个实例。如果“value”是空字符串，则选择器不代表任何内容。

// 匹配属性title值包含hello的p元素
p[title*="hello"] {
  color: yellow;
}

ID选择器

按照 id 属性选择一个与之匹配的元素。每个 ID 属性都应当是唯一

语法：#idname

例子：

// 匹配ID值为chapter1的元素
#chapter1{
  font-size:30px;
}

CLASS选择器

按照给定的 class 属性的值，选择所有匹配的元素。

语法：.classname

例子：

// 匹配类名class值为header的元素
.header{
  font-size:30px;
}

伪类

: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。

语法：双引号『：』

例子：

// 匹配类名为ext且被访问过的a元素
a.ext:visited{
  font-size:30px;
}

伪类选择器按照它们的功能，大致可以分为：动态伪类，目标伪类，语言伪类，UI元素状态伪类，结构伪类，空白伪类，否定伪类。参考下图：

伪元素选择器

:: 伪元素选择器用于表示无法用 HTML 语义表达的实体。常用的有：::first-line，::first-letter，::selection，::after，::before，::placeholder；

语法：两个双引号『::』

::first-line

用于向文本的首行设置特殊样式。

// 设置p元素的首行样式颜色为红色
p:first-line{
    color:#ff0000;
    font-variant:small-caps;
}

"first-letter" 伪元素只能用于块级元素。在一个使用了 ::first-line 伪元素的选择器中，只有很小的一部分css属性能被使用：所有和字体相关的属性，所有和背景相关的属性。更详细的内容点击查看

::first-letter

用于向文本的首字母设置特殊样式。

// 设置p元素的首字母样式颜色为红色，字体为xx-large
p:first-letter{
    color:#ff0000;
    font-size:xx-large;
}

和first-letter一样，只能用于块级元素，而且只有部分的CSS属性能用，比如color，font-size，font-weight等等

更多内容点击查看

::selection

应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

// 设置用户选中内容的背景颜色为cyan
::selection {
  background-color: cyan;
}

只有一小部分CSS属性可以用于::selection 选择器：color，background-color，cursor，caret-color，outline，text-decoration，text-emphasis-color，text-shadow。更多内容点击查看

::before

在元素的内容前面插入新内容。

// 在a标签的内容前面添加一个心形图标
a::before {
  content: "♥";
}

由::before 和::after 生成的伪元素不能应用在<img />
等标签上，详情查看

::after

跟::before类似，只不过是在元素的内容后面插入新内容。

// 在a标签的内容后面添加一个心形图标
a::before {
  content: "♥";
}

组合选择器

通过简单选择器进行不同的组合，匹配元素，有四种组合：后代选择器，子（元素）选择器，相邻兄弟选择器，普通兄弟选择器；

选择器名称	语法	描述
后代选择器	A B	匹配任意元素，满足条件：B是A的后代结点 （B是A的子节点，或者A的子节点的子节点）
子元素选择器	A>B	匹配任意元素，满足条件：B是A的直接子节点
相邻兄弟选择器	A+B	匹配任意元素，满足条件：B是A的下一个兄弟节点 （AB有相同的父结点，并且B紧跟在A的后面）
普通兄弟选择器	A~B	匹配任意元素，满足条件： B是A之后的兄弟节点中的任意一个 （AB有相同的父节点，B在A之后，但不一定是紧挨着A）

选择器语法一览表

选择器类型	格式	解释说明
通配符选择器	*	所有元素
类型选择器	E	类型为E的元素
属性选择器	E[foo]	具有“foo”属性的 E 元素
属性选择器	E[foo="bar"]	其“foo”属性值恰好等于“bar”的E元素
属性选择器	E[foo~="bar"]	其“foo”属性值是一列以空格分隔的值 其中一个值完全等于“bar”的E元素
属性选择器	E[foo^="bar"]	其“foo”属性值恰好以字符串“bar”开头的E元素
属性选择器	E[foo$="bar"]	其“foo”属性值以字符串“bar”结尾的E元素
属性选择器	E[foo*="bar"]	其“foo”属性值包含子字符串“bar”的E元素
属性选择器	E[foo\	="en"]	一个 E 元素，其“foo”属性具有以“en”开头 （从左侧）的连字符分隔的值列表
伪类选择器	E:root	文档的根
伪类选择器	E:nth-child(n)	其父元素的第 n 个子元素
伪类选择器	E:nth-last-child(n)	一个 E 元素，它的父元素的第 n 个 子元素，从最后一个开始计数
伪类选择器	E:nth-of-type(n)	一个 E 元素，它的类型的第 n 个兄弟元素
伪类选择器	E:nth-last-of-type(n)	一个 E 元素，它的类型的第 n 个 兄弟元素，从最后一个开始计数
伪类选择器	E:first-child	一个 E 元素，其父元素的第一个子元素
伪类选择器	E:last-child	一个 E 元素，其父元素的最后一个子元素
伪类选择器	E:first-of-type	一个 E 元素，其类型的第一个兄弟元素
伪类选择器	E:last-of-type	一个 E 元素，其类型的最后一个兄弟元素
伪类选择器	E:only-child	一个 E 元素，其父元素的唯一子元素
伪类选择器	E:only-of-type	一个 E 元素，只有其类型的同级元素
伪类选择器	E:empty	一个没有子元素的 E 元素
伪类选择器	E:link	一个 E 元素其目标尚是未访问的超链接
伪类选择器	E:visited	一个 E 元素其目标尚访问过的超链接
伪类选择器	E:active	一个 E 元素其目标当前处于被激活状态
伪类选择器	E:hover	一个 E 元素其目标处于使用设备虚指的状态
伪类选择器	E:focus	一个 E 元素其目标当前处于聚焦状态
伪类选择器	E:target	作为引用 URI 的目标的 E 元素
伪类选择器	E:lang(fr)	语言“fr”中的类型 E 元素
伪类选择器	E:enabled	启用的用户界面元素 E
伪类选择器	E:disabled	禁用的用户界面元素 E
伪类选择器	E:checked	被选中的用户界面元素 E
伪类选择器	E:not(s)	不匹配简单选择器的 E 元素
伪元素选择器	E::first-line	E 元素的第一个格式化行
伪元素选择器	E::first-letter	E 元素的第一个格式化字母
伪元素选择器	E::before	在 E 元素之前生成的内容
伪元素选择器	E::after	E 元素后生成的内容
类选择器	E.warning	一个 E 元素，其class名为“warning”
ID选择器	E#myid	ID 等于“myid”的 E 元素
组合选择器	E F	E 元素的 F 元素后代
组合选择器	E > F	E 元素的 F 元素子元素
组合选择器	E + F	紧跟在 E 元素之后的 F 元素
组合选择器	E ~ F	前面有 E 元素的 F 元素

权重计算

参考

W3C_CSS3

CSS选择器

W3Cschool_CSS教程

前端杂谈：css权重