CSS - 三大特性

最新推荐文章于 2022-02-19 08:03:45 发布

学习中的小菜鸟.

最新推荐文章于 2022-02-19 08:03:45 发布

阅读量185

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_33962481/article/details/117067517

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

文章目录

一、CSS的三个特性
二、层叠性
三、继承性
- 1. 行高的继承
四、优先级
- 1. !important 的使用方法 :
优先级的注意问题
五、权重叠加

一、CSS的三个特性

CSS有三个特性 : 层叠性, 继承性, 优先级.

二、层叠性

相同选择器给设置相同的样式, 此时一个样式就会覆盖另一个冲突的样式.

<!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>Document</title>
    <style>
        div {
            color: red;
        }

        div {
            color: green;
        }
    </style>
</head>

<body>
    <div>层叠性</div>
</body>

</html>

层叠性原则:

样式冲突, 遵循的原则就是就近原则, 哪个样式离结构近, 就执行哪个样式
样式不冲突, 不会层叠

三、继承性

子标签会继承父标签的某些样式, 如文本颜色和字号

1. 行高的继承

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

行高可以跟单位也可以不跟单位
如果子元素没有设置行高, 则会继承父元素行高的1.5
1.5表示当前元素文字大小的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>Document</title>
    <style>
        body {
            font: 12px/1.5 'Microsoft YaHei';
        }

        div {
            /* 没有设置行高, 则会继承父类的1.5 , 所以现在的行高为当前文字大小的1.5倍 */
            font-size: 14px;
        }

        /* p没有设置文字大小,则会继承父类的文字大小12px,行高则会继承父类的1.5. */
    </style>
</head>

<body>
    <div>继承性</div>
    <p>继承性1</p>
</body>

</html>

四、优先级

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

!important > 行内样式 > id选择器 > class选择器 > 标签选择器 > 父类继承或 *

1. !important 的使用方法 :

div {
	color: red!important;
}

优先级的注意问题

a链接浏览器默认指定了一个样式, 蓝色的, 有下划线, 相当于给a指定了一个样式, 所以给a的父类指定样式, 对a不起作用

<!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>Document</title>
    <style>
        #nav {
            color: red;
        }
    </style>
</head>

<body>
    <div id="nav">
        <a href="#">a标签</a>
    </div>
</body>

</html>

五、权重叠加

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

选择器越精确, 权重越大

学习中的小菜鸟.

关注

0
点赞
踩
0

收藏

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

文章目录一、CSS的三个特性二、层叠性三、继承性1. 行高的继承四、优先级1. !important 的使用方法 :优先级的注意问题五、权重叠加一、CSS的三个特性 CSS有三个特性 : 层叠性, 继承性, 优先级.二、层叠性相同选择器给设置相同的样式, 此时一个样式就会覆盖另一个冲突的样式. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫