哪个选择器将应用于HTML标记

Question

<style>
     .divNav
     {
        font-size:25px; 
     }

     #divNav
     {
        font-size:25px; 
     }
</style>

<div class="divNav" id="divNav">

ID和类都有相同的风格。

哪个适用？那是什么原因？

Answer 1

它将始终应用id样式。因为Id具有很高的特异性。

检查：

＆＃13;

＆＃13;

#divNav
       {
        font-size:25px; 
       }
.divNav
       {
        font-size:15px; 
       }
      

＆＃13;

<div class="divNav" id="divNav">test</div>

＆＃13;

＆＃13;

＆＃13;

和

＆＃13;

＆＃13;

.divNav
       {
        font-size:15px; 
       }
      
#divNav
       {
        font-size:25px; 
       }

＆＃13;

<div class="divNav" id="divNav">test</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.divnav{
  color:red !important;
  }

#divnav{
  color:blue;
  }

<div class='divnav'  id='divnav' style='color:yellow'>Test</div>

您可以尝试删除重要标记和样式标记以查看优先级。

Css有一些优先权：

  

  

• 标签＆lt;等级＆lt; ID

  

• 属性中的样式＆gt; ID

  

• 但！important ＆gt;所有，不要使用它

  

您可以使用以下方式计算优先级：

Style in attribute = 1000

#id = 100

.class = 10

tag = 1

所以

#id .class tag {
 /* = 111 */
}

#id #id2 {
/* = 200 */
}