当我们对同级的标签设置了同一个样式,而想对其中一个标签做特殊样式时,如何才能够覆盖掉原来的普通样式呢?就需要考虑css选择器和权重关系。那我们来看下权重究竟是如何分配和计算的呢?
内联样式的权重(权重值:1000)
内联样式是指直接写在dom元素上的样式
· 效果如下
内联.jpg
Id选择器的权重(权重值:100)
给dom元素添加id属性及值
#test{
color: blue;
}
· 效果如下
id选择器.jpg
类 属性选择器 伪类选择器(权重值:10)
给dom元素添加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;
}
```
* 效果如下
---
![内联样式](images/2.jpg "内联样式")
---
**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;
}
```
* 效果如下
---
![内联样式](images/3.jpg "内联样式")
---
**Tip:我们看到显示的带有test_3的颜色和统一设置的不一样了,因为两个类选择器.test_2.test_3的权重为10+10=20 > 单独的一个类选择器.test_2的权重为10**
---
```
//我们还可以使用后代选择器选择类名为test_3的div
div .test_3 {
color: blue;
}
```
* 效果如下
---
![内联样式](images/3.jpg "内联样式")
---
**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,谁大则显示该选择器下的样式
· 当有多级选择器,例如后代选择器和并列选择器等,权重比较需要将每个选择器进行加法操作,和大的则显示该选择器下的样式