关于前端:前端面试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-largep: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权重