关于前端:前端面试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: "♥";}

组合选择器

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

选择器语法一览表

权重计算

参考

W3C_CSS3

CSS 选择器

W3Cschool_CSS 教程

前端杂谈：css 权重