CSS三大特性

最新推荐文章于 2021-04-10 21:46:59 发布

点康慕

最新推荐文章于 2021-04-10 21:46:59 发布

阅读量244

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/MOOG007/article/details/108078320

版权

H5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了CSS的三大核心特性：层叠性、继承性和优先级。层叠性用于解决样式冲突，遵循就近原则。继承性使得子元素能继承父元素的部分样式，简化代码。优先级则是根据选择器权重决定哪个样式生效，包括通配符、标签、类、ID和行内样式等不同权重。了解这些特性有助于更好地控制CSS样式。

摘要由CSDN通过智能技术生成

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

层叠性

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

继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号，单间的理解就是：子承父业
恰当的使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式有：text-、font-、line-、color
继承口诀：龙生龙凤生凤，老鼠生的儿子会打洞

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            background-color: rgba(0, 0, 0, 0.0);
            color: red;
            font: 16px/2.5 "微软雅黑";
        }
    </style>
</head>

<body>
    <div>我是DIV</div>
    <div>我是DIV</div>
</body>

在这里插入图片描述

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

优先级

选择器权重如下表所示

选择器	选择器权重
继承或者`*`	0,0,0,0
元素选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式选择器 style=""	1,0,0,0
!important 重要的	∞ 无穷大

一个元素的某个样式是被谁设置的：
（1）能够直接选中目标元素的选择器
（2）不能直接选中目标元素的选择器：该样式只能通过继承
优先级注意点：
（1）权重是有4组数字组成，但是不会有进位
（2）可以理解为类选择器永远大于元素选择器，id选择器用于大于类选择器，依次类推
（3）等级判断从左到右，如果某一位数值相同，则判断下一位数值
（4）可以简单记忆法：通配符和继承的权重为0；标签选择器的权重为1，类选择器的权重为10，id选择器的权重为100，行内样式的权重为1000；!important无穷大
（5） 继承的权重是0：如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0
所以以后我们看到标签到底执行哪个样式：就先看这个标签有没有直接被选中的选择器
a链接标签：浏览器默认制定了一个样式：蓝色的有下划线的： a {color: blue; text-decoration: underline;}
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重：前提是直接选中目标元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div ul li {
            color: red;
        }
        
        .nav ul li {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">看我长啥样</a></li>
        </ul>
    </div>
</body>

对于li标签来说，两个选择器都能直接选中li标签：但是div ul li选择器都是标签选择器：权重为0,0,0,3(=1+1+1)！第二个选择器.nav ul li的权重为: 0,0,1,2(=1+1)：所以第二个选择器的权重高
对于a标签来说：两个选择器都不能直接选中a标签，那么两个选择器中的color属性只能继承给a标签：都是同样的地位的时候也是通过比较权重：还是第二个选择器权重大

点康慕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式层叠性主要解决样式冲突的问题层叠性的原则：（1）样式冲突：遵循的原则是就近原则，哪个样式里结构近，就执行哪个样式（2）样式不冲突：不会层叠继承性CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号，单间的理解就是：子承父业恰当的使用继承可以简化代码，降低CSS样式的复杂性子元素可以继承父元素的样式有：text-、font-、line-、c.
复制链接

扫一扫

专栏目录