CSS——三大特性

最新推荐文章于 2024-12-09 21:13:47 发布

原创最新推荐文章于 2024-12-09 21:13:47 发布 · 383 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了CSS的三大核心特性：层叠性、继承性和优先级。层叠性解决了样式冲突问题，遵循就近原则；继承性允许子元素继承父元素的部分样式，简化代码；优先级则根据选择器权重确定样式执行顺序，!important具有最高优先级。通过实例解析了如何有效利用这些特性进行CSS布局和设计。

CSS——三大特性

导读

CSS有三个非常重要的特性：层叠性、继承性、优先级

层叠性

先看一个例子，比如同时使用两种样式修饰同一个标签

div{
      color: cadetblue;
   }
div{
      color: cornflowerblue;
   }

而效果是这样的

为什么会出现这种情况呢，这就是CSS的层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

样式冲突，遵循的原则是就近原则，执行离结构最近的样式
样式不冲突，不会层叠

继承性

例如

<style>
        div{
            color: cadetblue;
        }
        
    </style>
   </head>
  <body>
      <div>
          <p>要困死了</p>
      </div>

在div里面放了个p，我们写的样式是针对于div的，但是同样适用于div中的p标签

现实中的继承：我们继承了父亲的姓

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号

恰当地使用继承可以简化代码，降低CSS样式的复杂性

行高的继承性

body {

font: 12px/1.5 Microsoft YaHei;

}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body行高1.5，这样的写法最大的优势是里面的子元素可以根据自己的文字大小自动调整行高

body{
            font-size: 12px/1.5 'Microsoft YaHei';
        }
        div{
            /* 子元素继承了父元素body的行高1.5 */
            /* 1.5是指当前文字大小font-size的1.5倍 所以当前的div的行高是21像素 */
            color: cadetblue;
            font-size: 14px;
        }
        p{
            /* 1.5 * 16 = 24为当前的行高 */
            font-size: 16px;
        }

优先级

当同一个元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器、伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=""	1，0，0，0
！important 重要的	∞

 /* father的权重是100 */
        #father{
            color: red!important;
        }
        /* p的权重为0 */
        /* 所以标签直接被选出来就执行那个样式 */
        p{
            color: blue;
        }

优先级注意点：

1.权重是有4组数字组成，但是不会有进位

2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推

3.等级判断从左向右，如果某一位数值相同，则判断下一位数值

4.简单记忆法：通配符和继承权重

<style>
        /* 符合选择器会有权重叠加的问题 */
        /* 权重虽然会叠加，但永远不会进位 */
        /* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
       ul li{
           color: grey;
       }
       /* li 权重 0,0,0,1 */
       li{
           color: purple;
       }
       /* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
       .nav li{
           color: red;
       }
    </style>
   </head>
  <body>
      <ul id="nav">
          <li>要困死了</li>
      </ul>
    </body>