CSS的三大特性

最新推荐文章于 2023-01-20 10:00:00 发布

FG.

最新推荐文章于 2023-01-20 10:00:00 发布

阅读量152

点赞数 4

分类专栏： CSS3

本文链接：https://blog.csdn.net/weixin_54418006/article/details/116560970

版权

CSS3 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

CSS的三大特性

1. 层叠性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航</title>
    <style>
        div {
            color: red;
            font-size: 12px;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <div>夏故秋景冬离</div>
</body>
</html>

2. 继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。
恰当地使用继承可以简化代码，降低CSS样式的复杂性.
子元素可以继承父元素的样式(text-，font-，line-这些元素开头的可以继承，以及color属性).
行高的继承性

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航</title>
    <style>
        body {
            color: pink;
            font: 12px/1.5 'Microsoft YaHei';
        }

        div {
            /*子元素继承了父元素的body的行高1.5倍 */
            /*这个1.5就是当前元素文字大小font-size的1.5倍，所以当前的div的行高就是21px*/
            font-size: 14px;
        }

        p {
            font-size: 16px;
        }

        /*li没有手动指定大小，则会继承父亲的文字大小body:12px */
    </style>
</head>

<body>
    <div>夏故秋景冬离</div>
    <p>夏故秋景冬离</p>
    <ul>
        <li>没有指定文字大小</li>
    </ul>
</body>

</html>

3.优先级

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        div {
            color: red;
        }
        .test {
            color: pink !important;
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color: purple">夏故秋景冬离</div>
</body>
</html>

在这里插入图片描述
优先级注意点：
1.权重是4组数字组成，但是不会有进位。
2.可以理解为类选择器永远大于元素选择器，以此类推
3.等级判断从左到右，如果某一位数值相同，则判断下一位数值
4.简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器为100，行内样式表为1000，!important无穷大
5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重.

div ul li -----> 0,0,0,3
.nav ul li ------>0,0,1,2
a:hover ------->0,0,1,1
.nav a -------->0,0,1,1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重叠加</title>
    <style>
        /* li的权重是0,0,0,1 */
        li {
            color: red;
        }
        /*复合选择器会有权重叠加的问题*/
        /* ul li权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
        ul li {
            color: green;
        }
        /* nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
        .nav li {
            color: pink;
        }
        .nav .zhu {
            color: skyblue;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li class="zhu">夏故</li>
        <li>秋景</li>
        <li>冬离</li>
        <li>落在星空</li>
        <li>我在人海</li>
    </ul>
</body>
</html>