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

本文详细介绍了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、层叠性

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

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

测试用例


<!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

3、选择性

选择器的特殊性值表述为4个部分,用0,0,0,0表示:

  • 行间样式,加1,0,0,0;
  • ID选择器的特殊性值,加0,1,0,0;
  • 类选择器、属性选择器或伪类,加0,0,1,0;
  • 元素和伪元素,加0,0,0,1;
  • 通配选择器*对特殊性没有贡献,即0,0,0,0;
  • 最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。

转载于:https://www.cnblogs.com/smart-baixiaodu/p/7888924.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值