CSS 选择器与权重

CSS 选择器权重

• 权重计算规则

  • 第一等：代表内联样式。如: style=”” 权值为 +1000

  • 第二等：代表 ID 选择器。如：#content 权值为 +100

  • 第三等：代表类，伪类和属性选择器。如：.content 权值为 +10

  • 第四等：代表类型选择器和伪元素选择器，如：div p 权值为 +1

  • 通配符、子选择器、相邻选择器等。权值为 +0

  • 继承的样式没有权值

• 权重比较规则： 1,0,0,0 > 0,99,99,99

  • 从左往右逐个等级比较，前一等级相等才往后比

  • 在权重相同的情况下，后面的样式会覆盖掉前面的样式。

  • 通配符、子选择器、相邻选择器等的。虽然权值为 0000，但是也比继承的样式优先

• !important

  !important 的作用是提升优先级，样式的优先级是最高的（比内联样式的优先级还高）

CSS 选择器

浏览器解析 CSS 是从右往左进行解析的。例如：body div p.text ，浏览器先找到 p.text，然后再寻找 p.text 的父级 div，以此类推。

基本选择器语法

选择器	类型	功能描述
*	通配选择器	选择文档中所有 HTML 元素
E	元素选择器	选择指定类型的 HTML 元素
#id	ID选择器	选择指定 ID 属性值为 "id" 的任意类型元素
.class	类选择器	选择指定 class 属性值为 "class" 的任意类型的任意多个元素
selector1,selectorN	群组选择器	将每一个选择器匹配的元素集合并

层次选择器语法

选择器	类型	功能描述
E F	后代选择器（包含选择器）	选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内
E > F	子选择器	选择匹配的 F 元素，且匹配的 F 元素所匹配的 E 元素的子元素
E + F	相邻兄弟选择器	选择匹配的 F 元素，且匹配的 F 元素紧位于匹配的 E 元素的后面
E ~ F	通用选择器	选择匹配的 F 元素，且位于匹配的 E 元素后的所有匹配的 F 元素

动态伪类选择器语法

选择器	类型类型	功能描述
E:link	链接伪类选择器	选择匹配的 E 元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited	链接伪类选择器	选择匹配的 E 元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active	用户行为选择器	选择匹配的 E 元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover	用户行为选择器	选择匹配的 E 元素，且用户鼠标停留在元素 E 上。IE6及以下浏览器仅支持a:hover
E:focus	用户行为选择器	选择匹配的 E 元素，而且匹配元素获取焦点

目标伪类选择器

选择器	功能描述
E:target	选择匹配 E 的所有元素，且匹配元素被相关 URL 指向

UI元素状态伪类选择器语法

选择器	类型	功能描述
E:checked	选中状态伪类选择器	匹配选中的复选按钮或者单选按钮表单元素
E:enabled	启用状态伪类选择器	匹配所有启用的表单元素
E:disabled	不可用状态伪类选择器	匹配所有禁用的表单元素

否定伪类选择器

选择器	功能描述
E:not(F)	匹配所有除元素 F 外的 E 元素

属性选择器

选择器	功能描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

注意： <div class="links item"></div> 其中 div[class="links"]{ /*...*/ } 是找不到匹配元素，只有 div[class="links item"]{ /*...*/ } 才匹配

结构伪类选择器使用语法

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E。与 E:nth-child(1) 等同
E:last-child	作为父元素的最后一个子元素的元素E。与 E:nth-last-child(1) 等同
E:root	选择匹配元素 E 所在文档的根元素。在 HTML 文档中，根元素始终是html，此时该选择器与 html 类型选择器匹配的内容相同
E F:nth-child(n)	选择父元素 E 的第 n 个子元素F。其中 n 可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且 n 值起始值为1，而不是0.
E F:nth-last-child(n)	选择父元素 E 的倒数第 n 个子元素F。此选择器与 E:nth-child(n) 选择器计算顺序刚好相反，但使用方法都是一样的，其中 :nth-last-child(1) 始终匹配最后一个元素，与last-child等同
E:nth-of-type(n)	选择父元素内具有指定类型的第 n 个 E 元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第 n 个 E 元素
E:first-of-type	选择父元素内具有指定类型的第一个 E 元素，与 E:nth-of-type(1) 等同
E:last-of-type	选择父元素内具有指定类型的最后一个 E 元素，与 E:nth-last-of-type(1) 等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配 E 元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配 E 元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

注意：

• ul>li:nth-child(3) 表达的并不是一定选择列表 ul 元素中的第 3 个子元素 li，仅有列表 ul 中第 3 个 li 元素前不存在其他的元素，命题才有意义，否则不会改变列表第 3 个 li 元素的样式。

• :nth-child(n) 中参数只能是 n，不可以用其他字母代替。

• :nth-child(odd) 选择的是奇数项，而使用 :nth-last-child(odd) 选择的却是偶数项。