CSS优先级

最新推荐文章于 2023-09-20 11:08:31 发布

remy303

最新推荐文章于 2023-09-20 11:08:31 发布

阅读量876

点赞数

分类专栏： CSS和HTML 文章标签： css

本文链接：https://blog.csdn.net/ttongzw/article/details/13772097

版权

CSS和HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

选择器的优先级

1. 内联样式表（style=“”）的权值最高 1000；

2. ID 选择器的权值为 100

3. Class 类选择器的权值为 10

4. HTML 标签选择器，伪类（:active,:first等），伪对象（:before,:after）的权值为 1

5. 其他选择器如通配选择器等得优先级的权值为0，继承父元素的样式的优先级也几乎为0

利用选择器的权值进行计算比较，示例如下：

 
 <html>
  <head>
    <style type="text/css">
         #redP p {
              /* 权值 = 100+1=101 */
              color:#F00;  /* 红色 */
         }
 
         #redP .red em {
              /* 权值 = 100+10+1=111 */
              color:#00F; /* 蓝色 */
 
         }
 
         #redP p span em {
              /* 权值 = 100+1+1+1=103 */
              color:#FF0;/*黄色*/
         }
    </style>
  </head>
  <body>
     <div id="redP">
        <p class="red">red
           <span><em>em red</em></span>
        </p>
        <p>red</p>
     </div>
  </body>
</html>
 

结果：<em>标签内的数据显示为蓝色。

CSS样式的优先级顺序（从高到低）

1. ! important声明

2. HTML中的CSS（即html中标签本身的属性style）

3. 作者编辑的CSS文件

4. 用户设置的样式（用户设置的浏览器的样式）

5. 浏览器默认样式

remy303

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS优先级

选择器的优先级1. 内联样式表（style=“”）的权值最高 1000；2. ID 选择器的权值为 1003. Class 类选择器的权值为 104. HTML 标签选择器，伪类（:active,:first等），伪对象（:before,:after）的权值为 15. 其他选择器如通配选择器等得优先级的权值为0 利用选择器的权值进行计算比较，示例如
复制链接

扫一扫