你务必要了解的CSS独特性定义

2021-03-12 06:33 jianzhan

大家在应用CSS对网页页面元素界定款式时常常会遇到这类状况:要对1般元素运用1般款式,随后在更独特的元素上遮盖它们。那末大家如何来确保大家所新界定的元素款式能遮盖总体目标元素上原来的款式呢?

在CSS中,会依据挑选器的独特性来决策所界定的款式标准的顺序,具备更独特挑选器的标准优先选择于具备1般挑选器的标准,假如两个标准的独特性同样,那末后界定的标准优先选择。

那末,又如何来测算挑选器的独特性呢?

下面这张图详细介绍了独特性的测算方式:

大家把独特性分成4个级别,每一个级别意味着1类挑选器,每一个级别的值为其所意味着的挑选器的个数乘以这1级别的权值,最终把全部级别的值相加得出挑选器的独特值。

4个级别的界定以下:

l  第1等:意味着内联款式,如: style=””,权值为1000。

l  第2等:意味着ID挑选器,如:#content,权值为100。

l  第3等:意味着类,伪类和特性挑选器,如.content,权值为10。

l  第4等:意味着种类挑选器和伪元素挑选器,如div  p,权值为1。

比如上图为例,

在其中#NAV为2等挑选器;

.ACTIVE为3等挑选器;

UL、LI和A为4等挑选器。

则全部挑选器表述式的独特性的值为1*100+1*10+3*1=113

下面是1些测算示例:

留意:通用性挑选器(*),子挑选器(>)和邻近同胞挑选器(+)其实不在这4个级别中,因此她们的权值都为0。

大家再看来1个实际的事例:

倘若有下列组款式标准,你能分辨出HTML编码中的两个题目是甚么色调吗?

 1 #content div#main-content h2{ 2 color:red; 3  } 4 #content #main-content>h2{ 5 color:blue 6  } 7 body #content div[id="main-content"] h2{ 8 color:green; 9  }10 11 #main-content div.paragraph h2{12 color:orange;13  }14 #main-content [class="paragraph"] h2{15 color:yellow;16  }17 div#main-content div.paragraph h2.first{18 color:pink;19 }下列是HTML编码:

1<div id="content">2  <div id="main-content">3    <h2>CSS简介</h2>4    <p>CSS(Cascading Style Sheet,可译为“堆叠款式表”或“联级款式表”)是1组文件格式设定标准,用于操纵Web网页页面的外型。</p>5    <div class="paragraph">6      <h2 class="first">应用CSS合理布局的优势</h2>7      <p>1、主要表现和內容相分离出来 2、提升网页页面访问速率 3、易于维护保养和改版 4、应用CSS合理布局更合乎如今的W3C规范.</p>8    </div>9  </div>分辨出来了么?回答是:两个题目全是鲜红色的!

让大家来1起算算6个款式标准各有的独特性的值:

第1个独特性的值=2*100+2*1=202

第2个独特性的值=2*100+1=201

第3个独特性的值=1*100+1*10+3*1=113

第4个独特性的值=1*100+1*10+2*1=112

第5个独特性的值=1*100+1*10+1*1=111

第6个独特性的值=1*100+2*10+3*1=123

清晰了吧,第1个款式标准以其202的高分1举斩获了本次款式挑选器独特性大赛的冠军,后边1些标准尽管看起来仿佛更繁杂,但独特性其实不是拼谁的挑选器表述式写得更长,ID挑选器才是王道!

了解挑选器的独特性很关键,非常是在修补bug的情况下,由于你必须掌握哪些标准优先选择及其缘故。

假如你遇到了好像沒有起功效的CSS标准,极可能是出現了独特性矛盾。请在你的挑选器中加上他的1个父元素的ID,从而提升它的独特性。假如这能处理难题,就表明款式表格中别的地区极可能有更独特的标准,它遮盖了你的标准。假如是这类状况,你将会必须查验编码,处理独特性矛盾,让编码尽量简约。