小小千想和您聊一聊

当前位置: 首页> 技术分享> html选择器和权重的关系

html选择器和权重的关系

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

内联样式的权重(<font color=red>权重值:1000</font>)
内联样式是指直接写在dom元素上的样式
 <div style="color:red">这里写了一个内联样式</div>

  · 效果如下

  内联.jpg

Id选择器的权重(<font color=red>权重值:100</font>)
给dom元素添加id属性及值
 <div id="test">这是加了一个id的标签内容</div>
 <style>
    #test{
      color: blue;
    }
 </style>

  · 效果如下

  id选择器.jpg

类 属性选择器 伪类选择器(<font color=red>权重值:10</font>)

给dom元素添加class属性及值
 <div class="one">这是加了一个class属性的标签内容</div>
 // 添加自定义属性名为title 属性值为haha
 <div title="haha">这是测试属性的标签</div>
 <p>这是测试伪类的标签</p>
 <style>
    .one{
      color: #bfbf59;
    }
    // 根据属性选择
    [title="haha"] {
      color: #ee6868;
    }
    p{
      color: #aqua
    }
    // p标签添加hover效果
    p:hover{
      color: red;
    }
 </style>
  · 效果如下
 

  属性&class.jpg

// p标签hover后

  phover.jpg

元素和伪元素(<font color=red>权重值:1</font>)
元素选择器即标签选择器
<span class="one">这是测试</span>
<p>这是测试元素的标签</p>
<style>
   span{
     color: #bfbf59;
   }
   // 给p标签添加一个伪元素
   p::before {
     content: '这是添加到p里的内容,';
     color: blue;
   }
</style> 

  · 效果如下

  伪元素.jpg

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

//给元素添加内联样式 再通过id再设置另一种样式
 <div style="color:red" id="test">
   这是第一个div
 </div>
 <style>
   #test{
     color: blue;
   }
 </style>

  · 效果如下

  内联.jpg

---

**<font color="red" size="3">Tip:</font><font size="2" color="orange">我们看到显示的是内联样式设置的颜色因为内联的权重为1000 > id选择器的权重100</font>**

 ```
   //添加id名为test class名为test_1
   <div style="color:red" id="test" class="test_1"> 
     这是第二个div
   </div>
  <style>
    #test{
      color: blue;
    }
    .test_1{
      color: yellow;
    }
  </style>
 ```
* 效果如下
---
  ![内联样式](images/2.jpg "内联样式")

---
**<font color="red" size="3">Tip:</font><font color="orange" size="2">我们看到显示的是通过id选择器设置的颜色因为id选择器权重为100 > 类选择器的权重10</font>**

```
  // 对两个div标签都设置class名为test_2
  <div class="test_2">
    这是第三个div
  </div>
  <div class="test_2 test_3">
    这是第四个div
  </div>
  <div class="test_2">
    这是第五个div
  </div>
  <style>
  //对拥有test_2的标签都设置color为green的样式
  .test_2{
    color: green;
  }
 //想对第二个div重新设置color的值 可以再单独设置一个class名
  .test_2.test_3{
    color: blue;
  }
 </style>
```
* 效果如下
---
   ![内联样式](images/3.jpg "内联样式")

---
**<font color="red" size="3">Tip:</font><font color="orange" size="2">我们看到显示的带有test_3的颜色和统一设置的不一样了,因为两个类选择器.test_2.test_3的权重为10+10=20 > 单独的一个类选择器.test_2的权重为10</font>**
---

 ```
   //我们还可以使用后代选择器选择类名为test_3的div
  <style>
   div .test_3 {
    color: blue;
  }
  </style>

 ```
 * 效果如下
---
   ![内联样式](images/3.jpg "内联样式")

---
**<font color="red" size="3">Tip:</font><font color="orange" size="2">这里同样看到带有test_3的div被改掉了颜色,是因为属性选择器的权重1 + 类选择的权重的10的和为11 > 单独的一个类选择器的权重为10</font>**

---

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

 <div class="box" id="bigBox">
    <ul class="list">
      <li class="one">
        <a href="#">
          我是第一个元素
        </a>
      </li>
  </div>
  <style>
    // 可以通过多种选择器拿到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;
    }
  </style>

  · 效果如下

  内联样式.jpg

     //hover后

  内联样式.jpg

**<font color="red" size="3">Tip:</font><font color="orange" size="2">权重值比较之后发现第三个对应的普通样式的权重值最高,所以优先显示,当hover后的,hover的权重值大于了普通样式的权重值,所以优先显示hover后的样式</font>**

  · 总结:

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

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

上一篇:表操作

下一篇:如何去除照片中的灰

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码
0.5942s