您的当前位置:首页正文

CSS中的特殊性、继承、层叠_html/css

2023-11-27 来源:气吉美食网

前言

最近在看《CSS权威指南》,书中第三章“结构和层叠”对特殊性的解释十分到位,今天就来整理下思路,记录如下。

引入问题

非常简单的一个列表结构,那么想对“第一个”字样设置字体颜色,可能有两种方法:

那么问题来了,究竟字体会变成什么颜色?

CSS规则结构

每条CSS规则的结构如上,请记住各自名称,否则继续前行会有不适感。

特殊性

关于特殊性的概念和作用书中说的很详细:

对于每个规则,用户代理(浏览器)会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。

如果一个元素有两个或多个冲突的属性生命,那么有最高特殊性的声明就会胜出。

整体来说分为两部分:计算和比较。第一眼看到肯定不太理解,那么先用起来,没事儿的时候回来看看,豁然开朗。

特殊性的计算规则

按照特殊性的介绍中所述,如何计算特殊性是非常重要的,下面是书中所给的计算规则:

1. 内联样式: 1,0,0,0

2. ID选择器: 0,1,0,0

3. class选择器、属性选择器、伪类选择器: 0,0,1,0

4. 元素选择器、伪元素选择器: 0,0,0,1

5. 通配符选择器: 0,0,0,0

6. 结合符、继承: 没有特殊性

7. !important:按照有无该关键字分为两组,各自计算

注:四组数字之间没有任何关系,不存在进位一说。  

上面的规则涵盖了所有可能出现的CSS选择器,可以根据这些计算出相关选择器的特殊性,浏览器会将特殊性赋值给声明块中的每一个声明。

相关例子数不胜数,就不数了,会计算即可。

特殊性的比较规则:层叠

反观特殊性的介绍,可知特殊性的计算是为了比较,进而决定胜出的样式进行显示,比较的规则称为层叠,当然前提是声明出现冲突的情况下。规则如下:

1. 首先按照权重比较:

读者重要样式>创作者重要样式>创作者正常样式>读者正常样式>浏览器默认样式

2. 前述条件不能比较时,按照特殊性比较:

特殊性从左到右依次比较每组数字,如:1,0,0,1和0,2,0,0,会按照前者定义样式显示。

3. 前述条件不能比较时,按照出现顺序比较:

后出现的会覆盖先出现的。

根据上面的规则,可以得出问题的答案:颜色会如下:

小结

第一次整理博客,收获蛮大的,平时看书大都一概而过,这次真的学透了。

小编还为您整理了以下内容,可能对您也有帮助:

CSS的层叠和继承?

所谓的样式表层叠:指的是同一个元素通过不同方式设置样式表产生的样式重叠。电脑培训认为样式表继承:指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式,是这个元素在这个浏览器运行时默认附加的样式。

1.浏览器样式

<b>这个元素隐含加粗样式</b>

<span style="font-weight:bold;">这个元素通过style加粗</span>

解释:<b>元素就是具有加粗的隐含样式,而<span>元素没有任何隐含样式,通过style属性设置样式。

2.样式表层叠

样式表层叠通过五种方式进行,如果样式相同,那么比如会产生冲突替换。这时,它的优先级顺序就显的比较重要。以下优先级从低到高:

(1).浏览器样式(元素自身携带的样式);

(2).外部引入样式(使用<link>引入的样式);

(3).文档内嵌样式(使用<style>元素设置);

(4).元素内嵌样式(使用style属性设置)。

3.样式继承

如果某一个元素并没有设置父元素相关的样式,那么就会使用继承机制将父元素的样式集成下来。

//<b>元素继承了<p>元素的样式

<p style="color:red;">这是<b>HTML5</b></p>

样式继承只适用于元素的外观(文字、颜色、字体等),而元素在页面上的布局样式则不会被继承。如果继承这种样式,就必须使用强制继承:inherit。

如何季度 CSS 的层叠与继承?

CSS 的层叠和继承是 CSS 的两个重要特性。层叠是指当多个选择器同时作用于同一个元素时,哪个规则会生效。继承是指子元素会继承父元素的样式,包括颜色、字体、大小等等。

在 CSS 中,有三种类型的选择器:标签选择器、类选择器和 ID 选择器。其中,标签选择器优先级最高,其次是类选择器,ID 选择器最低。如果有多个选择器作用于同一个元素,则按照以下顺序进行计算:从内到外依次是子元素、父元素、祖先元素、全局样式。

css三大特性

一、CSS层叠性

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

二、CSS继承性

    说明
    简单的理解为—“子承父业“,是指子标签会继承父标签的==某些==样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

三、CSS优先级

在复杂CSS样式表,往往并不是相同样式不同值的堆叠这么简单,经常出现两个或多个不同样式规则应用在同一元素上,这时到底采用哪个样式呢?这就是典型的CSS优先级问题。

处理优先级问题,就是考虑样式权重的高低。这里先给大家介绍一些特殊的情况:

    ==继承样式的权重为0。==也就是说,在嵌套结构中,无论父元素样式权重多大,子元素继承时,应用在子元素上的权重都为0,即子元素定义的样式会覆盖所有继承来的样式。

    ==行内样式优先。==应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

    权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

    CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

css三大特性

一、CSS层叠性

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

二、CSS继承性

    说明
    简单的理解为—“子承父业“,是指子标签会继承父标签的==某些==样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

三、CSS优先级

在复杂CSS样式表,往往并不是相同样式不同值的堆叠这么简单,经常出现两个或多个不同样式规则应用在同一元素上,这时到底采用哪个样式呢?这就是典型的CSS优先级问题。

处理优先级问题,就是考虑样式权重的高低。这里先给大家介绍一些特殊的情况:

    ==继承样式的权重为0。==也就是说,在嵌套结构中,无论父元素样式权重多大,子元素继承时,应用在子元素上的权重都为0,即子元素定义的样式会覆盖所有继承来的样式。

    ==行内样式优先。==应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

    权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

    CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

CSS代码结构是什么?有什么特点,具体是什么?

CSS(层叠样式表)的代码结构包含以下几个主要部分:

1. 选择器(Selectors):选择器用于选择要应用样式的 HTML 元素。它可以基于元素类型、类名、ID、属性等进行选择。

2. 声明块(Declaration Block):声明块由一对花括号({})包围,包含了一组样式声明。每个声明由属性和对应的值组成,用冒号(:)分隔。

3. 属性(Properties):属性定义了要设置的样式特性,如颜色、字体、尺寸、边框等。

4. 值(Values):值是属性的具体取值,用于定义样式的具体特征。

CSS代码结构的特点包括:

1. 层叠性(Cascading):多个样式规则同时应用到同一元素时,通过层叠性规则来确定最终的样式结果。具体来说,内联样式具有最高优先级,外部样式表和内部样式表按顺序加载,后面的规则覆盖前面的规则。

2. 继承性(Inheritance):某些样式特性可以被子元素继承,这意味着子元素会继承父元素的样式。例如,文字颜色和字体样式通常会被子元素继承。

3. 选择器的灵活性:CSS提供了各种选择器,允许开发者根据需要选择不同的HTML元素或元素组合来应用样式。这使得开发者可以有针对性地选择要样式化的元素。

4. 可重用性:CSS样式可以定义在一个样式表中,并在多个HTML页面中重复使用,提供了样式的重用性和维护性。

5. 可扩展性:CSS具有可扩展性,可以通过使用嵌套规则、伪类、伪元素等来定义更复杂和具体的样式。

综上所述,CSS代码结构由选择器、声明块、属性和值组成,通过层叠性和继承性来实现样式的应用和继承。CSS的特点包括层叠性、继承性、选择器的灵活性、可重用性和可扩展性。这些特点使得CSS成为一种强大且灵活的样式定义语言。

css的特性是什么?

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
一、CSS层叠性
是指多种CSS样式的叠加,是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。
1.样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
2.样式不冲突,不会层叠
3.CSS最后的执行口诀: 长江后浪推前浪,前浪死在沙滩上。
二、CSS继承性
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是: 子承父业。
CSS最后的执行口诀: 龙生龙,凤生凤,老鼠生的孩子会打洞。
注意:
恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
三、CSS优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:
1.继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
2.行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
3.权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
4.CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

css的特性是什么?

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
一、CSS层叠性
是指多种CSS样式的叠加,是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。
1.样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
2.样式不冲突,不会层叠
3.CSS最后的执行口诀: 长江后浪推前浪,前浪死在沙滩上。
二、CSS继承性
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是: 子承父业。
CSS最后的执行口诀: 龙生龙,凤生凤,老鼠生的孩子会打洞。
注意:
恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
三、CSS优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:
1.继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
2.行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
3.权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
4.CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

CSS的工作原理(样式重复的标签,浏览器到底会选择哪个样式)_html/css_WEB-ITnose

举个例子,标签P,也许会在嵌入样式表、外部样式表中多次被设置相关属性的值(比如color: red;/color : blue),那么浏览器到底是以哪个值来显示P的样式呢???这就是CSS的工作原理。(其中特指度比较重要)

CSS有3种工作机制:1.继承 2.层叠 3.特指 (其中层叠原则是基于继承和特指的)

1.继承 :css中的祖先元素会向后代传递一样东西:CSS属性的值。body是所有元素的祖先,如果我们指定body{color:red;},那么文档中的所有元素都继承这一样式。这就是为什么,我们在记事本程序写了一行字以后,重命名为:xxx.html,在用不同浏览器打开时,会有不同的字体效果,因为每个浏览器都有自己的预定义样式表,其中包括body中的字体属性,而我们用浏览器打开我们的Html时,我们继承了这个属性。

当然,不是所有的属性都能被继承,能被继承的属性大多数和文本有关,比如颜色、字体、字号等。而有些属性,被继承下来没有意义,或者被继承下来会影响页面的布局,比如涉及元素定位,margin,padding,border等属性。

2.层叠 :也就是CSS中的C(cascading),主要是按照样式来源和特指度来层叠。

a)样式来源 :以下是浏览器层叠各个来源样式的顺序:

浏览器默认样式表 用户样式表(比如有视力障碍的用户,加了一个body{font-size:200%}) 开发者外部样式表(按照引入到页面中的先后顺序) 开发者嵌入样式表 开发者行内样式表 注意:3 4的顺序是看嵌入样式标签的位置,和标签的位置,标签在后的被选中,请看例子2越往下的优先级越高,也就是说浏览器会优先选择后面来源设置的样式(如果存在的话)

b)特指度 :是针对选择器的计分规则,分高的选择器会被选中。公式有3个需要计算的值 :I-C-E ,规则如下

选择器中有一个ID选择器,就在I上加1 选择器中有一个类选择器,就在C上加1 选择器中有一个标签名,就在E上加1 得到一个3位数 先比较高位,高位高既为高,比如1-0-0 是比 0-12-0 高的,优先选择。以此类推,如果特制度相同,后申明的样式被选中。选择器,也有叫选择符的,英文应该是selector,CSS有很多种选择器,此处不详谈。

举个特指度的例子:

p 0-0-1特指度=1p.classp1 0-1-1特指度是11p#idp1 1-0-1特指度是101body p#idp1 1-0-2特指度是102body p#idp1 ul.classul1 1-1-3特指度是113body p#idp1 ul.classul1 li 1-1-4特指度是114 基于3种工作机制,总结3条规则,适用所有情况。

1)ID选择器大于类选择器,类选择器大于标签选择器。一句话:特指度高的选择器(选择的更明确)被选中。

2)浏览器按照html文档顺序读取各个样式表,后面的样式表会覆盖掉前面样式表的相同属性的样式。如果后面的样式特指度低,则无法覆盖前面的样式

注意:规则1 强于 规则2 ,如果特指度高,无论在哪里(除去行内),都会被选中。行内的优先级最高(但是行内的style一般不用,),其次是特指度。

3)设定的样式优于继承的样式

例子1 :id选择器优于类选择器 .li1{color: red;} #li1{color:yelow;} 列表项1 列表1为

例子2 :嵌入样式表和外部样式表,选哪个(主要看浏览器按顺序,后读取的会覆盖点前面读取的),相同特指度的时候 .li1{color: red;} 列表项1()外部样式表demo.css .li1{ color:yellow;}

嵌入样式表在后,为红色。

如果是这个顺序,style标签在前,link在后.li1{color: red;}

例子3:选择特指度高的(如按顺序,应该选择link的,但是style中的特指度高 1-0-2 大于 1-0-1,所以选特指度高的红色),后面读取的特指度低的就不会覆盖前面特指度高的。 body div #li1{color: red;} 列表项1 demo.css

div #li1{ color:yellow;}

为红色

例子4:行内style有最高优先级,前面的代码不变,只在p中加了style blue,列表项立马变成蓝色虽然行内的有最高优先级,但是行内style本身就不常用(不方便移植,增加网页大小)列表项1

例子5 :设定的样式优于继承的样式,即使继承的样式特指度高(在li中加入em,em继承了li的特指度是102,em本身的特指度是001,但是仍然选em) body div #li1{color: red;} em{ color:black;} 列表项1 列表项为黑色。

css的继承性是什么

CSS中的继承性就是指被包含在内部的标签将拥有外部标签的样式,即子元素可以继承父元素的属性。

CSS有三大特性,分别是继承性,层叠性,优先级,接下来将在文章中为大家详细介绍CSS中的继承性,希望对大家有所帮助。

继承性:

继承性是指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性,例如下面的代码,div中包含2个p标签,1个span标签,当给div设置字体颜色为红色时,他的子标签会继承父元素的属性,因而会显示红色。 在CSS中以text-、font-、line- 开头的属性都是可以继承的。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

div {

color: red;

}

</style>

</head>

<body>

<div>

<p>苹果</p>

<p>香蕉</p>

<span>葡萄</span>

</div>

</body>

</html>显示结果如下:

气吉美食网还为您提供以下相关内容希望对您有帮助:

CSS的层叠和继承?

所谓的样式表层叠:指的是同一个元素通过不同方式设置样式表产生的样式重叠。电脑培训认为样式表继承:指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式,是这个元素在这个浏览器运行时默认附加的样式。1...

CSS代码结构是什么?有什么特点,具体是什么?

CSS代码结构的特点包括:1. 层叠性(Cascading):多个样式规则同时应用到同一元素时,通过层叠性规则来确定最终的样式结果。具体来说,内联样式具有最高优先级,外部样式表和内部样式表按顺序加载,后面的规则覆盖前面的规则。2...

如何季度 CSS 的层叠与继承?

在 CSS 中,有三种类型的选择器:标签选择器、类选择器和 ID 选择器。其中,标签选择器优先级最高,其次是类选择器,ID 选择器最低。如果有多个选择器作用于同一个元素,则按照以下顺序进行计算:从内到外依次是子元素、...

css三大特性

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

css的特性是什么?

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。一、CSS层叠性 是指多种CSS样式的叠加,是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠...

CSS的层叠性、继承性和重要性是什么?

注意:还有一个权值比较特殊–继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。3. 层叠性 层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css...

...浏览器到底会选择哪个样式)_html/css_WEB-ITnose

(其中特指度比较重要) CSS有3种工作机制:1.继承 2.层叠 3.特指 (其中层叠原则是基于继承和特指的) 1.继承 :css中的祖先元素会向后代传递一样东西:CSS属性的值。body是所有元素的祖先,如果我们指定body{color:...

css样式的层叠次序是什么,请结合实际详细论述

CSS样式的层叠次序,也被称为CSS的层叠优先级,是指在CSS样式表中,当多个样式规则同时作用于同一个HTML元素时,浏览器会按照一定的规则,确定哪个样式规则的优先级更高,从而决定该元素最终呈现的样式。具体来说,CSS样式的...

css的继承性是什么

CSS中的继承性就是指被包含在内部的标签将拥有外部标签的样式,即子元素可以继承父元素的属性。CSS有三大特性,分别是继承性,层叠性,优先级,接下来将在文章中为大家详细介绍CSS中的继承性,希望对大家有所帮助。继承性:...

CSS规则层叠的应用css必须要注意的几点_经验交流

我们首先应当将编写特殊性非常低的全局CSS内容,也就是我们 常用的reset.css 。它是我们整个网站中所有页面的默认样式。 如果有哪个页面具有独特的统一样式,如某一页的背景与其他页面不同,那么我们可以给某一页面添加ID,...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

显示全文

相关阅读

热门推荐