权重的级别根据选择器被划分为四类:
- 行类样式(+1000)
- Id(+100)
- 类与属性(+10)
- 元素(+1);
(通配符的权重为0)*
CSS选择器分类:
-
基本选择器:通配符(*)、元素(E)、类(.className)、id(#ID)、后代~(E F)、子元素~(E > F)、相邻兄弟元素~(E + F)、通用兄弟~(E ~ F)、群组~(selector1,selector2,…,selectorN);
-
属性选择器:
- E[attr]
- E[attr=”value”](属性和属性值需完全匹配)
- E[attr~=”value”](只要属性值中有一个相匹配就可以选中)
- E[attr^=”value”](选中其属性对应的属性值是以value开始的)
- E[attr$=”value”](选中其属性对应的属性值是以value结尾的)
- E[attr*=”value”](选中其属性对应的属性值包含子串value的)
- E[attr|=”value”](选中其属性对应的属性值是以value或value-开始的)
-
伪类选择器:
- 动态伪类:
- 锚点伪类::link、:visited
- 用户行为伪类::hover(鼠标悬浮时的效果)、:active(鼠标点击时的效果)、:focus(元素成为焦点)
- UI元素状态伪类::enbled、:disabled、:checked
- :nth选择器:
- :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
- :nth-of-type()选择指定的元素;
- :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
- :first-of-type选择一个上级元素下的第一个同类子元素;
- :last-of-type选择一个上级元素的最后一个同类子元素;
- :only-child选择的元素是它的父元素的唯一一个了元素;
- :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
- :empty选择的元素里面没有任何内容,包括空格。
- 动态伪类:
-
否定选择器(:not())
-
伪元素:
- ::before、::after:必须要有content属性;
- ::first-letter:选择文本块的第一个字母;
- ::first-line:选择元素的第一行;
- ::selection:改变选中文本后的背景色与前景色;