css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

时间：2022-01-17 16:47:35
CSS选择器：
基本可以分为通配选择器，标签选择器，类选择器，ID选择器，简单属性选择，具体属性选择，根据部分属性值选择，特定属性选择，从结构上来分还有后代选择器，子元素选择器，相邻兄弟选择器以及伪类。
详细一些请见下表：
类型选择符 E{}
属性选择符
E[attr]{}
E[attr=value]{}选择具有attr属性且属性值等于value的E
E[attr~=value]{}选择具有attr属性且属性值为用-连字符分隔的字词列表，由value开始的E.例如
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

 <style type="text/css">

 p[class~="important"]

 {

 color: red;

 }

 </style>

 </head>

 <body>

 <h1>可以应用样式：</h1>

 <p class="important warning">This is a paragraph.</a>

 <p class="important">This is a paragraph.</a>

 <hr />

 <h1>无法应用样式：</h1>

 <p class="warning">This is a paragraph.</a>

 </body>

 </html>
除了上面的三个，还有部分请见下表
css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

包含选择符（又称后代选择符） E1 E2{}

子对象选择符 E1>E2{}

ID选择符 #ID{}

类选择符 E.className{}

选择符分组 E1,E2,E3{}

结合后代选择器，类选择器和子选择器 例如：table.company td>p
上面的选择器会选择作为td元素子元素的所有P元素，这个td元素本身从table元素继承，并且该table元素有一个包含company的class属性。

相邻兄弟选择器 E1 + E2｛｝这里需要注意的是用一个选择符只能选择两个相邻兄弟中的第二个元素，举个例子 li + li {font-weight:bold;}只会把第二项和第三项加粗，第一个列表项步受影响
 <!DOCTYPE HTML>

 <html>

 <head>

 <style type="text/css">

 li + li {font-weight:bold;}

 </style>

 </head>

 <body>

 <div>

   <ul>

     <li>List item </li>

     <li>List item </li>

     <li>List item </li>

   </ul>

   <ol>

     <li>List item </li>

     <li>List item </li>

     <li>List item </li>

   </ol>

 </div>

 </body>

 </html>
结果为css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先还有一点要注意的是，顾名思义，相邻兄弟一定要有相同的父元素。

伪类及伪对象选择符：
伪类
css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先
伪元素
css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先
举例如下：
<html>

<head>

<style type="text/css">

p:first-line

{

color: #ff0000;

font-variant: small-caps

}

</style>

</head>

<body>

<p>

You can use the :first-line pseudo-element to add a special effect to the first line of a text!

</p>

</body>

</html>
元素p中的内容颜色和字体就都变成了这样
css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

哪些可以继承呢
可以的有 font-size font-family color  
不可以的有 border padding margin background-color width height等

优先级算法计算的问题：

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

选择符Specificity值列表：规则：

1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。

如：<div style=”color: red”>sjweb</div>

外部定义指经由<link>或<style>标签定义的规则；

2.!important声明的Specificity值最高；

3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；

4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。

算法：当遇到多个选择符同时出现时候

按选择符得到的Specificity值逐位相加，

{数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}

就得到最终计算得的specificity，

然后在比较取舍时按照从左到右的顺序逐位比较。
实例分析：
1.div { font-size:12px;} 分析：  1个元素{ div}，Specificity值为0,0,0,1 
2.body div p{color: green;} 分析：3个元素{ body div p }，Specificity值为0,0,0,3   
3.div .sjweb{ font-size:12px;} 分析：  1个元素{ div }，Specificity值为0,0,0,1 1个类选择符{.sjweb}，Specificity值为0,0,1, 0 最终：Specificity值为 0,0,1,1
4.Div # sjweb { font-size:12px;} 分析：  1个元素{ div }，Specificity值为0,0,0,1 1个类选择符{.sjweb}，Specificity值为0,1,0, 0 最终：Specificity值为 0,1,0,1 5.html > body div [id=”totals”] ul li > p {color:red;} 分析： 
6个元素{ html body div ul li p}  Specificity值为0,0,0,61个属性选择符{ [id=”totals”] }      Specificity值为0,0,1,0 2个其他选择符{ >  > }            Specificity值为0,0,0,0 最终：Specificity值为 0,0,1,6   
用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。
相关文章