CSS选择器有哪些？优先级？

• id选择器（如#xxx）

• 类选择器（如.xxx）

• 标签选择器（如div，h1，p）

• 相邻选择器（如h1 + p）

• 子代选择器（如ul > li）

• 后代选择器（如li a）

• 通配符选择器（ * )

   * { margin:0px; 
       padding:0px; 
     }
  

• 属性选择器（如a[rel="xxx"]）

    a[ href="http://www.baidu.com" ] { 
                color: red; 
     }
  

• 伪类选择器（如a:hover,li:nth-child）

优先级问题

内敛 > ID选择器 > 类选择器 > 标签选择器

• 内敛样式的权值最高1000
• ID选择器的权值为100
• Class类选择器的权值为10
• HTML标签选择器的权值为1
• !important规则的优先级最大

具体到计算层面，优先级是由A，B，C，D的值来决定，计算规则如下：

• 如果存在内敛样式，那么A = 1，否则A = 0
• B值等于ID选择器出现的次数
• C值等于类选择器、属性选择器和伪类出现的总次数
• D值等于标签选择器和伪元素出现的总次数

例如：#nav-global > ul > li > a.nav-link

• 因为没有内联样式 ，所以 A = 0
• ID选择器总共出现了1次， B = 1
• 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1
• 标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)

比较规则：

• 从左往右依次进行比较 ，较大者优先级更高
• 如果相等，则继续往右移动一位进行比较
• 如果4位全部相等，则后面的会覆盖前面的

无继承的属性：

• display
• 文本属性：vertical-align、text-decoration
• 盒子模型的属性：宽度、高度、内外边距、边框等
• 背景属性：背景图片、颜色、位置等
• 定位属性：浮动、清除浮动、定位等
• 生成内容属性：content、counter-reset、counter-increment
• 轮廓样式属性：outline-style、outline-width、outline-color、outline
• 页面样式属性：size、page-break-before、page-break-after