html选择器的权总,html选择器和权重的关系

当我们对同级的标签设置了同一个样式，而想对其中一个标签做特殊样式时，如何才能够覆盖掉原来的普通样式呢?就需要考虑css选择器和权重关系。那我们来看下权重究竟是如何分配和计算的呢?

内联样式的权重(权重值：1000)

内联样式是指直接写在dom元素上的样式

这里写了一个内联样式

· 效果如下

内联.jpg

Id选择器的权重(权重值：100)

给dom元素添加id属性及值

这是加了一个id的标签内容

#test{

color: blue;

}

· 效果如下

id选择器.jpg

类 属性选择器 伪类选择器(权重值：10)

给dom元素添加class属性及值

这是加了一个class属性的标签内容

// 添加自定义属性名为title 属性值为haha

这是测试属性的标签

这是测试伪类的标签

.one{

color: #bfbf59;

}

// 根据属性选择

[title="haha"] {

color: #ee6868;

}

p{

color: #aqua

}

// p标签添加hover效果

p:hover{

color: red;

}

· 效果如下

属性&class.jpg

// p标签hover后

phover.jpg

元素和伪元素(权重值：1)

元素选择器即标签选择器

这是测试

这是测试元素的标签

span{

color: #bfbf59;

}

// 给p标签添加一个伪元素

p::before {

content: '这是添加到p里的内容,';

color: blue;

}

· 效果如下

伪元素.jpg

· 知道这些元素的权重之后该如何计算呢?

//给元素添加内联样式 再通过id再设置另一种样式

这是第一个div

#test{

color: blue;

}

· 效果如下

内联.jpg

---

**Tip:我们看到显示的是内联样式设置的颜色因为内联的权重为1000 > id选择器的权重100**

```

//添加id名为test class名为test_1

这是第二个div

#test{

color: blue;

}

.test_1{

color: yellow;

}

```

* 效果如下

---


---

**Tip:我们看到显示的是通过id选择器设置的颜色因为id选择器权重为100 > 类选择器的权重10**

```

// 对两个div标签都设置class名为test_2

这是第三个div

这是第四个div

这是第五个div

//对拥有test_2的标签都设置color为green的样式

.test_2{

color: green;

}

//想对第二个div重新设置color的值 可以再单独设置一个class名

.test_2.test_3{

color: blue;

}

```

* 效果如下

---


---

**Tip:我们看到显示的带有test_3的颜色和统一设置的不一样了，因为两个类选择器.test_2.test_3的权重为10+10=20 > 单独的一个类选择器.test_2的权重为10**

---

```

//我们还可以使用后代选择器选择类名为test_3的div

div .test_3 {

color: blue;

}

```

* 效果如下

---


---

**Tip:这里同样看到带有test_3的div被改掉了颜色，是因为属性选择器的权重1 + 类选择的权重的10的和为11 > 单独的一个类选择器的权重为10**

---

· 最后看一个例子练习一下

• 我是第一个元素

// 可以通过多种选择器拿到a标签并设置不同的颜色

div ul li a {

//权重值 1+1+1+1=4

color: gray;

}

.box ul a {

//权重值 10+1+1=12

font-size: 10px;

color: yellow;

}

.box .list .one a {

//权重值 10+10+10+1=31

font-size: 20px;

color: purple;

}

.box .list .one a:hover {

//权重值 10+10++10+1+10=41

font-size: 30px;

color: red;

}

.box .list a::before {

//权重值 10+10+1+1=22

content: '我是插到a标签前面的';

font-size: 40px;

color: pink;

}

· 效果如下

内联样式.jpg

//hover后

内联样式.jpg

**Tip:权重值比较之后发现第三个对应的普通样式的权重值最高，所以优先显示，当hover后的，hover的权重值大于了普通样式的权重值，所以优先显示hover后的样式**

· 总结：

· 当只有一级选择器，例如只有id选择器和类选择器时，只需要单个比较id选择器的权重100和类选择器的权重10，谁大则显示该选择器下的样式

· 当有多级选择器，例如后代选择器和并列选择器等，权重比较需要将每个选择器进行加法操作，和大的则显示该选择器下的样式