CSS三大特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62774164/article/details/123751812

1.css的三大特性

2.css的注释

css的三大特性

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

1、层叠性

相同选择器给设置相同的样式，此时一个样式会覆盖（层叠)另一个冲突的样式。层叠性主要是解决样式冲突的问题。
层叠性原则：
1）样式冲突，遵循就近原则，离哪个样式结构近，就执行哪个样式。
2）样式不冲突，不会层叠。

 <style>
        div{
            color:red ;
        }
        div{
            color:blue;
        }
    </style>

            文字部分会显示为蓝色

2、继承性

子标签会继承父标签的某些样式，如

文本颜色和字号

 <title>css继承性</title>
    <style>
        div{
            color:red ;
            font-size:12px;
        }
</head>
<body>
    <div>
        <p>长江后浪推前浪</p>
     </div>
</body>
</html>

                    文字为红色

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

行高

body{
            color:red ;
            font: 12px/1.5'Microsoft YaHei';
        }

         1）行高可以跟单位也可以不跟单位

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

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

3.优先级

当同一个元素指定多个选择器，就会有优先级的产生。
1）选择器相同，则执行层叠性
2）选择器不同，则根据选择器权重执行

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

注意事项：
1、权重是由4组数字组成，但不会有进位。
2、等级判断从左向右，如果某位数值相同，则判断下一位数值。
3、继承的权重是0，如果该元素没有直接选中，无论父元素权重是多高，子元素得到的权重都是0.

    <style>
        #father{
            color:red;
        }
        p{
            color:green;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>梦里不知身是客</p>
    </div>
</body>

      p继承的权重为0

结果：文字为绿色。
在这里插入图片描述

<a href="#">单独样式</a>
/*a 链接浏览器默认制定了一个样式 蓝色的 有下划线 */
单独给a样式才会改变，改变body的样式没有用。

权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重。

 <style>
      ul li{
          color:red;
      }
      /*ul li 权重 0001+0001=00002*/
      li{
          color:green;
      }
      /* li 权重 0001*/
      .nave  li {
          color: blue;
      }
      /*.nave li 权重 0010+0001=0011*/
    </style>
</head>
<body>
   <ul class="nave" >
       <li>春天</li>
       <li>夏天</li>
       <li>秋天</li>
   </ul>
</body>

      权重叠加不会进位，显示权重最大的样式，颜色蓝色。

在这里插入图片描述