鍍金池/ 問(wèn)答/HTML/ 關(guān)于CSS選擇器優(yōu)先級(jí)的問(wèn)題

關(guān)于CSS選擇器優(yōu)先級(jí)的問(wèn)題

<style>
  .preview p { 
    color: red;
  }
  .preview__black {
    color: black;
  }
</style>
<div class="preview">
  <p class="preview__black" aaa>我是一個(gè)p</p>
</div>

clipboard.png

clipboard.png

請(qǐng)問(wèn) 標(biāo)簽選擇器的優(yōu)先級(jí)不是低于類(class)選擇器嗎？為什么此處p標(biāo)簽的顏色會(huì)是紅色？

回答
編輯回答
笨尐豬

.preview p是類加標(biāo)簽 權(quán)重大于單純一個(gè)類的權(quán)重

2017年3月19日 11:14
編輯回答
掛念你

1、優(yōu)先級(jí)：　!important > 行內(nèi)樣式 > ID選擇器 > 類選擇器 > 標(biāo)簽選擇器
2、權(quán)值：選擇器的權(quán)值相加，大值優(yōu)先

標(biāo)簽選擇器：0,0,0,1
類選擇器：  0,0,1,0
ID選擇器：  0,1,0,0
內(nèi)聯(lián)樣式：  1,0,0,0

.preview p 權(quán)值：10+1=11
.preview__black 權(quán)值：10 所以顯示紅色
2017年6月30日 15:33
編輯回答
祉小皓

圖片描述

2017年1月29日 08:15
編輯回答
維她命

因?yàn)?code>.preview也是一個(gè)class標(biāo)簽 加上p 權(quán)重比.preview__black高

準(zhǔn)確說(shuō)來(lái)

.preview p { 
  color: red; // 權(quán)重 0 1 1
}
.preview__black {
  color: black; // 權(quán)重 0 1 0
}

所以顯示的紅色

2018年9月11日 11:33
編輯回答
笨小蛋

因?yàn)槟闵厦嬉灿袠?biāo)簽選擇器啊，而且還加了個(gè)p，累加的

2018年2月15日 08:01
編輯回答
凝雅

權(quán)重疊加。
標(biāo)簽 1
類 10
id 100
.preview p的權(quán)重是10+1=11，.preview__black權(quán)重是10。

2017年8月22日 15:19
編輯回答
鐧簞噯

見CSS Selector覆蓋順序

2018年5月8日 20:59
編輯回答
萌二代

選擇器權(quán)重會(huì)累加
可以看下https://www.cnblogs.com/zxjwl...
這篇文章

2018年3月16日 08:41
編輯回答
雨蝶
.preview .preview__black {
  color: black; 
}
2018年4月26日 06:57