实例比较CSS中三种基础选择器的优先级大小

大雄先生

于 2021-12-07 09:01:27 发布

阅读量336

点赞数

文章标签： css html 经验分享

本文链接：https://blog.youkuaiyun.com/x1785551/article/details/121760858

版权

本文通过实例代码展示了CSS中id选择器、class选择器和标签选择器的优先级，结论是id选择器优先级最高，接着是class选择器，最后是标签选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           p{
               color: blue;
           }
           .green{
               color: green;
           }
           .red{
               color: #FF0000;
           }
           #darkgold{
               color: darkgoldenrod;
               font-size: 36px;
           }
           span{
               color: pink ;
           }
       </style>
   </head>
   <body>

       <p>段落1</p>
       <p class="green">段落2</p>
       <p class="red" >段落3</p>
       <h1>标题1</h1>
       <h1>标题2</h1>

<h1 id="darkgold" class="red" >标题3</h1>
           
       <span class="red" >span行元素</span>
          
   </body>
</html>

实例比较CSS中三种基础选择器的优先级大小

结论得出：id>class>标签