关于css的三大特性的一些理解

最新推荐文章于 2022-07-21 16:24:22 发布

转载最新推荐文章于 2022-07-21 16:24:22 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/smart-baixiaodu/p/7888924.html

文章标签：

#测试 #javascript #ViewUI

本文详细介绍了CSS中的三大特性：继承性、层叠性以及选择性，并通过实例演示了这些特性的应用方式。对于继承性，文章解释了哪些属性可以被继承；对于层叠性，则阐述了如何解决属性冲突的问题；而对于选择性，则给出了不同选择器的优先级说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在css中有三大特性，分别是继承性，层叠性以及选择性。下面是我对css三大特性的一些理解：

1、继承性

在css中，所谓继承性指的是：子元素可以拥有父元素的一些属性。这里我用到一些而不是全部，不难看出并不是所有的属性都可以被继承。在CSS中以text-、font-、line- 开头的属性是可以被继承的。

常见的继承属性

字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相关：list-style-image, list-style-position, list-style-type, list-style

还有一个比较重要的：color

测试用例


<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        div {  
            color: red;  
        }  
    </style>  
</head>  
<body>  
    <div>  
        <h1>Vue</h1>  
        <p>React</p>  
        <span>Angular</span>  
    </div>  
</body>  
</html>

显示结果：

Vue

React

Angular

2、层叠性

什么是层叠性？
CSS处理冲突的一种能力，这个我们称之为层叠性。
什么情况出现层叠性？
只有在多个选择器中“同一个标签”，又设置了“相同的属性”的时候，就会发生层叠性
发生层叠性会怎么样？
当发生层叠性时，哪个选择器设置的属性起作用，是由优先级来确定

所谓层叠性指的是：浏览器处理冲突的一个特性，如果一个属性通过多个选择器设置到同一个元素上面，那么这个时候就会只有一个选择器起作用，而其他的选择器都将被层叠（覆盖）掉，前提是选择器的权重一样，也就是说这些选择器的优先级相同

测试用例


<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        div {  
            color: red;  
        }
        p{
            color: blue;
        }
    </style>  
</head>  
<body>  
    <div>  
        <h1>Vue</h1>  
        <p>React</p>  
        <span>Angular</span>  
    </div>  
</body>  
</html>

显示结果：

Vue

React

Angular