CSS-三大特性随学笔记

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

1.层叠性

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

层叠性原则

样式冲突，遵循的原则是就近原则，那个样式离结构近，就执行哪个样式

样式不冲突，不会重叠。

<style>
        div {
            color: tomato;
        }
        div {
            color: turquoise;
        }
    </style>
</head>
<body>
    <div>天王盖地虎</div>
</body>

color样式冲突，第二个color: turquoise的样式离结构更近，所以执行第二个样式。

2.继承性

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

CSS中的继承：子标签会继承父标签的某些样式，比如文本颜色和字号。简单理解是子承父业。

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

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

<style>
     div {
            color: turquoise;
            font-size: 14px;
        } 
    </style>
<body>
<div>
        <p>龙生龙，凤生凤，老鼠的儿子会打洞</p>
    </div>
</body>

这里没有指定p的文字样式，但是p可以继承其父元素即div的文字样式。

特别地：

行高的继承

语法：

body {

　　font：12px/1.5 "Microsoft Yahei";

}

行高可以跟单位，也可以不跟单位；

如果子元素没有设置行高，则会继承父元素的行高为1.5

<style>
        body {
            color: turquoise;
            /* font: 14px/28px 'Microsoft Yahei'; */
            font: 12px/1.5 'Microsoft Yahei';
        }
        div {
            /* 子元素继承了父元素body的行高1.5
            这个1.5就是当前文字大小font-size的1.5倍 */
            font-size: 14px;
        }
        p {
            /* 1.5*16=当前的行高  */
            font-size: 16px;
        }
        /* li没有手动指定文字大小，则会继承父亲的文字大小   body文字大小12px  所有li的文字大小为12px  所以当前li的行高就是12*1.5*/
    </style>
<body>
<div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</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 重要的 ∞无穷大

<style>
        div{
            color: pink;
        }
        .test {
            color: red!important;
        }
        #demo {
            color: seagreen;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color: rgb(38, 0, 252);">你笑起来真好看</div>
</body>

优先级注意点：

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

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

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

4.可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，!important为无穷大；

5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

特别地：a链接浏览器默认指定了一个样式：蓝色有下划线。

所以以后我们看标签到底执行那个样式，就看这个标签有没有被直接选出来。

特别地：

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

复合选择器会有权重叠加的问题虽然会叠加，但永远不会进位。

<style>
        /* ul li权重 0,0,0,1+0,0,0,1=0,0,0,2 */
        /* li的权重是0,0,0,1 */
        li {
            color: seagreen;
        }
        ul li {
            color: slateblue;
        }
        /* .nav li 权重 0,0,1,0+0,0,0,1=0,0,1，1 */
        .nav li {
            color: yellow;
        }
    </style> 
</head>
<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>猪尾巴</li>
        <li>猪肘子</li>
    </ul>
</body>

posted @ 2021-10-25 17:02 第五云阅读(58) 评论(0) 收藏举报

刷新页面返回顶部

CSS-三大特性 随学笔记

公告

CSS-三大特性随学笔记