CSS 三大特性

浅浅的花香味﹌ 2022-05-16 07:20 235阅读 0赞

我们学习CSS 必须掌握的三个特性分别是层叠 ，继承， 优先级。

## CSS层叠性 ##

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

1.  样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
2.  样式不冲突，不会层叠

### CSS继承性 ###

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

### CSS优先级 ###

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
    
    行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
    
    权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
    
    CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

### CSS特殊性（Specificity） ###

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS学习笔记3-CSS三大特性

、什么是CSS的三大特性 CSS的三大特性包括继承性、层叠性、优先级二、继承性给父元素设置属性后，后代元素也可以使用该属性。注意：不是所有属性都可以继承，只有以...

秒速五厘米/ 2024年04月17日 05:27/ 0 赞/ 62 阅读

相关 css三大特性及原元素特性

目录一、css三大特性 1、继承性 2、层叠行 3、优先级二、元素特性 1、块元素 2、行元素 3、行内块元素 4、元素转换 -------------

偏执的太偏执、/ 2024年04月06日 13:20/ 0 赞/ 54 阅读

相关 3 CSS的三大特性

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： 1. H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教

雨点打透心脏的1/2处/ 2023年01月15日 08:04/ 0 赞/ 161 阅读

相关 CSS基础——CSS 三大特性【学习笔记】

1 CSS层叠性 ![在这里插入图片描述][20201121001049839.png_pic_center] 概念：所谓层叠性是指多种CSS

亦凉/ 2022年12月23日 00:40/ 0 赞/ 204 阅读

相关 CSS 三大特性

CSS 三大特性：层叠性，继承性，优先级（权重叠加）层叠性：如果某个标签样式选择器一样，或者权重一样的时候，谁是最后执行的就是谁了。 div{ color:red

r囧r小猫/ 2022年12月21日 09:24/ 0 赞/ 185 阅读

相关 CSS 三大特性

CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同权重选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性

痛定思痛。/ 2022年12月17日 07:08/ 0 赞/ 16 阅读

相关 CSS 三大特性

我们学习CSS 必须掌握的三个特性分别是层叠，继承，优先级。 CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个

浅浅的花香味﹌/ 2022年05月16日 07:20/ 0 赞/ 236 阅读

相关 CSS 三大特性

CSS 三大特性层叠继承优先级是我们学习CSS 必须掌握的三个特性。 CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属

谁践踏了优雅/ 2022年03月21日 05:18/ 0 赞/ 231 阅读

相关 CSS选择器以及CSS的三大特性

CSS选择器在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 HTML页面中的元素就是通过CSS选择器进行控制的。 CSS选择器包括，标签选择器，i

女爷i/ 2022年02月18日 09:07/ 0 赞/ 311 阅读

相关 CSS三大特性

CSS三大特性 1.继承性作用：子元素可以继承父元素的样式 text-，font-，line-这些元素开头的都可以继承，以及color属性特殊性：（1）

雨点打透心脏的1/2处/ 2021年09月14日 00:18/ 0 赞/ 343 阅读