CSS三大特性：层叠性、继承性、选择性

2021-07-19 22:32:44 阅读：196 来源： 互联网

css有非常重要的三大特性，分别是层叠性、继承性和优先性。
1.层叠性
当相同的选择器设置相同的样式时，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性要遵循的一定的原则：

样式冲突遵循的是就近原则，即哪个样式离结构近就执行哪个（后来居上）
若样式不冲突则不会发生层叠

2.继承性
css中子标签会继承父标签的某些样式，适当的继承可以简化代码，降低css的复杂性，如text-、font-、line-以及color属性等这些元素开头的都可以继承。
行高的继承

body {
     font: 12px/1.5 microsoft YaHei;
  }

行高可以跟单位也可以不跟
如果子元素没有设置行高，则会继承父元素的行高为1.5.
此时子元素的行高是当前子元素的文字大小*1.5

<style>
        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 的行高就是21像素 */
            font-size: 14px; 
        }
        p {
            /* 1.5 * 16 =  24 当前的行高 */
            font-size: 16px;
        }
        /* li 么有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 
        
        当前li 的行高就是  12 * 1.5  =  18
        */
    </style>
</head>
<body>
    <div>1234</div>
    <p>12345</p>
    <ul>
        <li>123456</li>
    </ul>
</body>

这样写的最大的优势是子元素可以根据自己的文字大小自动调整行高

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

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

选择器的权重：

选择器	选择器的权重
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style	1,0,0,0
！important	无穷大

范围越小则权重越大
优先级注意事项：

权重是由四组数字组成，但是不会进位
等级判断从左至右，若某位数值相同则判断下一位
继承的权重是0，如果该元素没有被直接选中，不管父元素权重有多高，子元素得到的权重都是0

以后我们看标签到底执行哪一个样式，就先看这个标签有没有被直接选出来。
<a>链接浏览器默认了指定一个样式即蓝色有下划线
权重的叠加：
权重会叠加但是不会进位

 <!-- 外部 <= 内部 < 行内 -->
    <!-- 
        !important    >1000
        行内          1000
        id            100
        类/ 属性 / 伪类选择器        10
        标签           1
        继承           0
     -->
    <style>
        #xin {
            background-color: yellow;
        }
        /* 10 */
        .xing {
            background-color: #f00!important;
        }
        /* 1 */
        div {
            height: 200px;
            width: 200px;
            background-color: purple;
        }

         /* 1 + 10 = 11 */
         div[title="hello"] {
            background-color: #0ff;
        }

        /* 1 + 10 = 11 */
        div.xing {   
            background-color: pink;
        }

       
        /* id选择器 > 类选择器权重 > 标签的 */
    </style>
</head>
<body>
    <div class="xing" id="xin" title="hello" style="background-color: seagreen;">

    </div>
</body>

标签：CSS,1.5,样式,元素,三大,继承性,font,选择器,行高
来源： https://blog.csdn.net/qq_50636169/article/details/118914004

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS三大特性：层叠性、继承性、选择性