复合选择器、序号选择器、属性选择器、元素关系选择器之间的优先级比较及其内部优先级计算

最新推荐文章于 2023-07-17 10:43:18 发布

淤白o

最新推荐文章于 2023-07-17 10:43:18 发布

阅读量298

点赞数

分类专栏： HTML CSS 文章标签： css html5 css3 html

本文链接：https://blog.csdn.net/weixin_44239472/article/details/123600386

版权

CSS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

描述：

突然想到这个问题，复合选择器、序号选择器、属性选择器、元素关系选择器之间的优先级是怎样的，以及他们内部的优先级是否遵循id>class>标签的计算规则

相关截图：

相关代码：

<!DOCTYPE html> 
<html> <head>     
<meta charset="utf-8">     
<title>Test</title>     
<style>  
       
/* 尝试探索复合选择器、序号选择器、属性选择器、元素关系选择器之间的优先级，以及他们内部的优先级是否遵循id>class>标签的计算规则 */         
         

/* 复合选择器 */         
p.para{             
color:aqua;         
}         
/* 与下面注释的代码同级，但是#para1.para比div.para优先级高，说明其内部遵循id>class>标签的计算规则                
div .para{             
color: rgb(236, 87, 199);         
}         
*/ 
     
   
/* 序号选择器 */         
p:last-child{             
color: red;         
}         
/* 与下面注释代码同级，经过试验，其内部同样遵循id>class>标签的计算规则，例如：.para:last-of-type优先于p:last-child、.para:last-child优先于p:last-child                
p:last-of-type{             
color:blue;         
}          
p:nth-child(4){             
color:violet;         
}*/         


/* 属性选择器 */         
p[class="para"]{             
color:orange;         
}         
/* 与下面注释代码同级，经过试验，其内部也遵循id>class>标签的计算规则          
p[id="para1"]{             
color:purple;         
}*/        
         

/* 元素关系选择器 */         
img+p{             
color:green;         
}         
/* 与下面注释代码同级，经过试验，其内部也遵循id>class>标签的计算规则                 
div>p{             
color:violet;         
}         
h3~p{             
color:rgb(119, 131, 240);         
} */  
             
</style>
</head> 
<body>     
    <div>         
        <h3>我是标题</h3>         
        <p>我是第一个段落</p>         
        <img src="../images/03-05.jpg" width="100px" alt="我是一个图片~">         
        <p class="para" id="para1">我是第二个段落</p>     
    </div> 
</body> 
</html>