CSS权重

权重的级别根据选择器被划分为四类：

1. 行类样式（+1000）
2. Id（+100）
3. 类与属性（+10）
4. 元素（+1）；
   （通配符的权重为0）*

CSS选择器分类：

1. 基本选择器：通配符_{（*）、元素}（E）、类_{（.className）、id}（#ID）、后代~（E F）、子元素~（E > F）、相邻兄弟元素~（E + F）、通用兄弟~（E ~ F）、群组~（selector1,selector2,…,selectorN）；

2. 属性选择器：

   • 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-开始的）

3. 伪类选择器：

   • 动态伪类：
     • 锚点伪类：: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选择的元素里面没有任何内容，包括空格。

4. 否定选择器（:not()）

5. 伪元素：

   • ::before、::after：必须要有content属性；
   • ::first-letter：选择文本块的第一个字母；
   • ::first-line：选择元素的第一行；
   • ::selection：改变选中文本后的背景色与前景色；