css 设置表格第一列背景色_css 选择器及其优先级

一、基础知识点

1. 选择器类别

2. 基础选择器优先级(权重)

3. 优先级计算规则

两个选择器给同一元素设置相同的属性，分别将两个选择器权重相加，属性生效满足以下规则。
(1)权重大的选择器生效
(2)权重相同，后设置的选择器生效

值得注意的是：所有设置的选择器都会生效，只是优先级高的会覆盖掉优先级低的。

二、重难点

1.邻近兄弟选择器A+B，顾名思义就是选择紧靠在A元素后面的B元素

/* css */.div+.div{  background-color: teal;}

div1

div2

div3

div4

以上述代码为例，显示效果如下图，可以看到只有紧靠在div1后面的div2添加了背景色

将上述例子中邻近兄弟选择器+换成兄弟选择器~，显示效果如下，div1后面的div2和div4都添加了背景色

2. 直接子代选择器A>B，选择A元素的直接子元素B

/* css */.div > div {  color: teal;}.indiv {  color: thistle;}

div1

div11

div2

以上述代码为例，显示效果如下，显然.div > div选择器的权重>.indiv，但是却没有在div11中生效，说明其没有做到到div11上。

将上述例子中直接子代选择器A>B换成后代选择器A B，显示效果如下，div11添加了一样颜色

3. 关系选择器(邻近兄弟选择器，兄弟选择器，直接子代选择器，后代选择器)的权重为其用到的基础选择器权重之和，与其是哪一种关系选择器无关。