CSS的三大特性

发布于：2024-04-20 ⋅ 阅读:(26) ⋅ 点赞:(0)

目录

层叠性

继承性

继承示例

行高继承

优先级

层叠性

当为相同选择器设置相同类型的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。（等价于一个标签内出现了相同的属性）

层叠性主要解决样式冲突的问题

层叠性原则:

  • 样式不冲突，不会层叠
  • 样式冲突，遵循的原则后来者居上，即后面的样式会覆盖前面的样式

例如下面的代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性问题</title>
    <style>
        /* 先创建红色的文本样式 */
        div {
            color: red;
        }

        /* 再创建蓝色的文本样式 */
        div {
            color: blue;
        }
    </style>
</head>

<body>
    <div>这是一个文本</div>
</body>

</html>

在上面的代码中，因为蓝色文本样式在红色文本样式之后，所以使用蓝色样式，而非红色样式，这种效果同样适用于写在一个标签内的情况，例如下面的代码：

<style>
    div {
        color: red;
        color: blue;
    }
</style>

对于有多种样式的情况下，则只会覆盖相同的样式，不会影响没有重复的样式，例如下面的代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性问题</title>
    <style>
        /* 先设置一个红色文本样式 */
        div {
            color: red;
        }

        /* 接着设置一个蓝色文本样式并修改字体为微软雅黑 */
        div {
            color: blue;
            font-family: 'Microsoft YaHei';
        }
    </style>
</head>

<body>
    <p>段落标签：这是字体对比</p>
    <div>这是一个内容</div>
</body>

</html>

在上面的代码中，第一个div标签选择器中设置了字体颜色，第二个div标签选择器中设置了字体颜色和字体系列，所以字体颜色会以第二个选择器中的为主，但是字体系列不会被覆盖，因为第一个选择器中没有字体系列属性

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，可以降低 CSS 样式的复杂性。

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

继承示例

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 改变div标签样式同时会改变span标签的样式 -->
    <div>
        这是父标签中的内容样式<br />
        <span>这是一个div标签中的span子标签</span>
    </div>
</body>
</html>

效果如下：

但是不会继承修改盒子高度、宽度以及背景颜色等属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
        h1{
            width: 200px;
            height: 200px;
            background-color: red;
        }

    </style>
</head>
<body>
    <h1>
        这里是标题样式
        <div>
        这里是div标签
        </div>
    </h1>
</body>
</html>

继承信息：

行高继承

对于行高来说，子代也会继承父代的行高属性，例如下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高继承</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            line-height: 20px;
        }

    </style>
</head>
<body>
    <div>
        这个是div标签中内容的行高
        <span>这个是div标签中span子标签中的行高</span>
    </div>
</body>
</html>

效果如下：

上面的代码显示了固定行高的继承，但是在CSS中，当字体属性写成综合写法时，例如下面的代码：

选择器 {
    font: 12px/1.5 'Microsoft YaHei'
}

此时代码中的1.5并不是值行高1.5，而是行高为当前字体大小的1.5倍，即12 * 1.5 = 18为当前行高，此时如果子代设置了自己的字体，那么子代继承父代的行高之后会改变为子代字体大小*1.5=子代字体的行高，例如下面的代码：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高的继承</title>
    <style>
        div{
            font: 12px/1.5 'Microsoft YaHei';
        }

        /* 指定子代标签的字体大小 */
        div .fontStyle{
            font-size: 20px;
        }

        /* span标签本身是行元素，将其转换为块元素才能观察到效果 */
        span{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 未指定子代标签的字体大小 -->
    <div>
        这个是div标签中内容的行高
        <span>这个是div标签中span子标签中的行高</s>
    </div>
    <!-- 指定子代标签的字体大小 -->
    <div>
        这个是div标签中内容的行高
        <span class="fontStyle">这个是div标签中span子标签中的行高</span>
    </div>
</body>
</html>

效果如下：

优先级

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

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

选择器

权重

继承或*

0, 0, 0, 0

标签选择器

0,0,0,1

类选择器，伪类选择器

0,0,1,0

id选择器

0,1,0,0

行内style样式

1,0,0,0

!important

∞

注意：

  1. 权重是有4组数字组成，不会存在从后一位向前一位进位的情况
  2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推
  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值
  4. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        /* 对于基础选择器来说，直接按照优先级决定 */
        p{
            color: red;
        }

        .blue {
            color: blue;
        }

        /* 对于继承来说，子代不会继承父代的优先级 */
        span {
            color: green;
        }
    </style>
</head>
<body>
    <!-- 类选择器的优先级更高 -->
    <p>这是一个文本内容</p>
    <p class="blue">这是一个内容</p>
    <!-- 尽管父代是类选择器，优先级更高，但是子代是继承，优先级低，所以不会被覆盖 -->
    <div class="blue">
        <span>这是一个内容</span>
    </div>
</body>
</html>

效果如下：

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重，计算方式即为对应为相加不进位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器优先级</title>
    <style>
        /* 对于ul li来说，由于ul和li均为标签选择器，所以优先级为0001+0001=0002 */
        ul li{
            color: red;
        }
        /* 对于ul来说，由于ul为标签选择器，所以优先级为0001 */
        ul {
            color: blue;
        }
        /* 基础选择器+类选择器，所以优先级为0001+0010=0011 */
        ul .green {
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <!-- 后代选择器覆盖基础标签选择器 -->
        <li>这是一个文本内容</li>
        <li class="green">这是一个文本内容</li>
        <li>这是一个文本内容</li>
    </ul>
</body>
</html>

效果如下：

链接标签只能指定修改样式的原因分析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接伪类选择器优先级分析</title>
    <style>
        body {
            color: red;
        }

        /* 指定样式 */
        .black {
            color: #000;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!-- 因为链接选择器继承自body 所以链接的文字颜色为红色，但是CSS默认给了链接一个默认的样式，由于标签选择器的优先级高于继承，所以链接样式无法被覆盖 -->
    <a href="#">这是一个链接</a>
    <a class="black" href="#">这是一个链接</a>
</body>
</html>

效果如下：

默认样式：

指定后的样式

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布