css三大特性

简介: CSS三大特性在css中,我们在设计样式的时候,经常会出现我们明明写好了样式,但是最后的测试发现我们书写的样式并没有起作用。

CSS三大特性

在css中,我们在设计样式的时候,经常会出现我们明明写好了样式,但是最后的测试发现我们书写的样式并没有起作用。

除开样式书写错误之外。还有大部分情况就是css样式的三大特性导致的问题。

首先,我们要知道css有哪三大特性:

  • 层叠性
  • 继承性
  • 优先级

层叠性

定义:

层叠性是多种CSS样式的叠加,是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些样式出现的先后顺序来决定,处于最后面的CSS样式将会覆盖前面的CSS样式。(也就是就近原则)

p {
    color: red;
}
p {
    color: blue;
}
//最后浏览器实现的是:blue
复制代码

这就是因为层叠性的原因,因为层叠性在权重相同的情况下是根据样式出现先后顺序来决定的,所以最后的样式将会覆盖前面的样式。

注意:

当出现相同样式且权重相同的情况的时候,那么css层叠性就会起作用。简单来说就是:样式不冲突,不会层叠;样式冲突权重相同,遵循就近原则。(也就是层叠性)

继承性

我们可以简单的理解为:当我们在一个元素上设置了样式,那么这个样式就会被继承到所有的子元素上。(子承父业)

div {
    color: red;
}
<div>
    <span>我是什么红色</span>
</div>
复制代码

最后代码运行出来 :span标签里面的字体为红色,但是我们并没有单独给span写颜色样式,所以它的颜色为父元素的颜色。就是说,span标签的颜色是div标签的颜色,继承了腹肌元素的属性。

注意:

  1. 合理使用继承性可以简化代码,减少代码量。在我们设计中,字体、字号、颜色、行距等有关文本属性的属性是具有继承性的,我们可以在body中统一设置,然后影响整个代码。
  2. 并不是所有的属性都可以继承,与块元素相关的属性都不可以继承,例如:边框、外边距、内边距、背景、定位、元素高度等等。

优先级

在了解什么是优先级之前,我们要先知道什么是权重,以及权重怎么计算。

css会根据权重高低来决定执行哪一个属性:

权重

选择器权重 0,0,0,0
通用选择器(*)/继承 0,0,0,0
标签选择器 0,0,0,1
类/伪类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式 1,0,0,0
!important 无限大

权重计算

1.在我们css权重计算中,不会存在什么多少进制的说法,也就是说10个标签选择器的权重等于0,0,0,10,并不会等于0,0,1,0。也就是说无论多少个标签选择器,最后它的权重也不会比一个类选择器高。 2.前面我们讲述了层叠性。二者有一些联系:权重用来计算优先级,层叠用来表现优先级。

优先级

优先级就是在样式完全相同的情况下,权重高的样式会优先使用。

最后总结一下优先级的顺序:

!important > 行内样式 > id选择器 > 类/伪类选择器 > 标签选择器 > 继承/通用选择器


相关文章
|
3月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
53 1
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
256 91
|
8天前
|
前端开发
css特性
css特性 1.继承性:子级继承父级文字控制属性 ps:子级拥有自己的样式则不会继承父级。 2.层叠性:相同的属性后面覆盖前面,不同的属性叠加 3.优先级:选择器优先级高的样式生效 公式:通配符<标签<类<id<行内样式<!important(选中范围越大,优先级越低) 叠加计算规则:存在复合选择器时,从左向右依次比较个数,同一级个数多的优先级高,如果个数相同,则向后比较;!important权重最高;继承权重最低。
|
6月前
|
机器学习/深度学习 移动开发 前端开发
CSS3 新特性
CSS3 新特性
70 0
|
3月前
|
前端开发 JavaScript API
Vue 3 新特性:在 Composition API 中使用 CSS Modules
Vue 3 新特性:在 Composition API 中使用 CSS Modules
|
6月前
|
前端开发 JavaScript 开发者
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
63 2
|
5月前
|
前端开发
番外篇-CSS3新增特性
番外篇-CSS3新增特性
32 0
|
6月前
|
前端开发 UED
【专栏:CSS 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。
157 1
|
6月前
|
前端开发 JavaScript 开发者
【Web 前端】css3的新特性有哪些?
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些?
|
6月前
|
前端开发 容器
CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
53 10