对CSS三大特性的认识

爱猫的洋洋子

已于 2022-05-20 16:51:24 修改

阅读量670

点赞数

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

于 2022-05-20 16:22:06 首次发布

本文链接：https://blog.csdn.net/Hero_era/article/details/124833282

版权

CSS学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、层叠性

二、继承性

三、优先级、

CSS有三大特性：层叠性、继承性、优先级

一、层叠性

1、层叠性：相同的选择器若设置相同的样式，那么此时一个样式就会层叠（覆盖）另一个冲突的样式。

2、层叠性主要解决样式冲突问题。

层叠性原则：

样式若冲突，遵循就近原则，即那个样式离结构更近就执行哪个样式。
样式若不冲突，则不发生层叠，也就是正常执行。

下面来看两个例子：

1）我们给字体加上颜色，但同时加两种色彩，看是否体现层叠性：

可以看到黑色离我们的结构更近，那么来看看效果：

符合层叠性的特性，紫色被覆盖掉了。

2）在紫色的部分加上字体大小，看会不会执行：

来看结果：

满足上述原则。

OK，继续下一个特性！

二、继承性

1、继承性：指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。

2、在CSS中以text-、font-、line- 开头的属性都是可以继承的。

比如以下代码，其中的body标签中有div和p两个子标签，当更改body标签的颜色时，其子标签也会继承设置的颜色：

<!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>CSS层叠性</title>
    <style>
        body{
            color: blueviolet;
        }

    </style>
</head>
<body>
    <div>这是继承性的体现</div>
    <p>这是继承性的体现</p>
</body>
</html>

看看效果：

看样子结果符合继承性。

3、行高的继承性：

行高既可以要单位也可不要单位
若子元素没有设置行高，则会继承父元素的行高
若此时父元素为1.5，则子元素行高为：子元素文字大小*1.5

下一个，优先级！

三、优先级、

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

原则：

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

选择器权重如下：

选择器	权重
继承或*	0
元素选择器	1
类选择器，伪类选择器	2
ID选择器	3
行内样式style=“”	4
important	无穷大

我们来选择一两个尝试一下：

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>CSS层叠性</title>
    <style>
        div{
            color: blueviolet;
        }

    </style>
</head>
<body>
    <div>这是继承性的体现</div>
</body>
</html>

结果图：

2）类选择器：

<!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>CSS层叠性</title>
    <style>
        div{
            color: blueviolet;
        }
        .test{
            color: blue;
        }

    </style>
</head>
<body>
    <div class = "test">这是继承性的体现</div>
</body>
</html>

结果图：

显然，类选择器器权重要高。那么我们在元素选择器后面加上important会发生什么呢？

3）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>CSS层叠性</title>
    <style>
        div{
            color: blueviolet!important;
        }
        .test{
            color: blue;
        }

    </style>
</head>
<body>
    <div class = "test">这是继承性的体现</div>
</body>
</html>

结果图：

可以看到，important是最高的，只要带上！important就会高于一切。

那么以上就是对CSS的三大特性的一个认识，继续下一个学习！GO！GO！GO！

爱猫的洋洋子

关注

0
点赞
踩
0

收藏

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

目录一、层叠性二、继承性三、优先级、CSS有三大特性：层叠性、继承性、优先级一、层叠性1、层叠性：相同的选择器若设置相同的样式，那么此时一个样式就会层叠（覆盖）另一个冲突的样式。2、层叠性主要解决样式冲突问题。层叠性原则：样式若冲突，遵循就近原则，即那个样式离结构更近就执行哪个样式。样式若不冲突，则不发生层叠，也就是正常执行。下面来看两个例子：1）我们给字体加上颜色，但同时加两种色彩，看是否体现层叠性：可以看到黑色离我们的结构更近，那么来看看效果
复制链接

扫一扫