2.3-34 层叠性

最新推荐文章于 2024-09-12 19:55:46 发布

洋芋不姓杨

最新推荐文章于 2024-09-12 19:55:46 发布

阅读量59

点赞数

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/youaigusheng/article/details/125540240

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的层叠性概念，当多个选择器同时作用于一个元素时，其效果会叠加。在权重冲突时，遵循id权重>class权重>标签权重的规则。复杂选择器权重通过计算id、class和标签的数量来决定。同时，`!important`可以提升权重，但使用需谨慎，避免引起样式冲突。文章还提供了实例代码来演示这些概念。

摘要由CSDN通过智能技术生成

2.3-34 层叠性和选择器权重计算

1、定义

(1)层叠性：多个选择器可以同时作用于同一个标签，效果叠加
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      p{
         color:red;
      } 
      .spec{
          font-style:italic;
      }
      #para{
          text-decoration:underline;
      }
  </style> 
</head>
<body>
    <p id="para" class="spec">我是段落</p>
</body>
</html>

2、层叠性的冲突处理

当多个选择器定义的属性有冲突时：
id权重>class权重>标签处理；

3、复杂选择器权重计算

复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
        #box1 #box2 p{
              /* (2,0,1) */
                         color:red;
          }
    
        #box1 div.box2 #box3 p{
          /* (2,1,2) div .box2类拆开看*/
                         color:green;
      }
        .box1 .box2 .box3 p{
          /* (0,3,1) */
                         color:blue;
      }
  </style> 
</head>
<body>
        <div id="box1" class="box1">
        <div id="box2" class="box2">
        <div id="box3" class="box3">
       <p>我是段落</p>
       <p>我是段落</p>
       <p>我是段落</p>
   </div>
   </div>
   </div>
</body>
</html>

4、!important提升权重

如果我们需要将某个选择器的某条属性提升权重，可以再属性后面写!important;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
        #box1 #box2 p{
              /* (2,0,1) */
                         color:red;
          }
    
        #box1 div.box2 #box3 p{
          /* (2,1,2) div .box2类拆开看*/
                         color:green;
      }
        .box1 .box2 .box3 p{
          /* (0,3,1) */
                
                     color:blue;
      }
      p{
          color:red;
      }
      .spec{
         font-style:italic;
      }
      #para{
          text-decoration:underline;
      }
  </style> 
</head>
<body>
    <p id="para" class="spec">我是你爸爸</p>
   </div>
   </div>
   </div>
</body>
</html>
很多公司不允许使用!important,因为这会带来不经意的样式冲突;