CSS教程

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

本文主要是介绍CSS三大特性：层叠性、继承性、选择性，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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
行内样式style1,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三大特性：层叠性、继承性、选择性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航