選擇器的優先順序的使用注意事項，往往在我們寫**的時候是格外需要注意的。
怎麼單獨來看呢？？最簡單的選擇器有id選擇器，class選擇器，與標籤選擇器，那麼究竟是誰的優先順序更大呢？之前說過同比下，id選擇器的優先順序可能更大一點
id選擇器》class類選擇器》元素選擇器lang="en">
charset="utf-8">
titletitle>
charset="utf-8">
name="generator"
content="editplus®">
name="author"
content="作者是誰">
name="keywords"
name="description"
content="描述和簡介">
type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6
ul,ola*
.main
#id_li
.class_li
.listyle>
head>
class="main">
class="class_li"
id="id_li">春田花花同學會li>
ul>
div>
div>
body>
html>
可以看到上述其實是按照id選擇器來進行選取的，而不是根據類選擇器或者標籤選擇器來選取的
id個數不同的時候的優先順序
當id個數不同的時候，這裡的id個數是指的的元素選擇器中的id個數不同;我們只看id的個數，id個數越多的他的優先順序越高(id大於一切), 也就是說，我們在比較兩個選擇器的優先順序的時候，我們首先看id個數，如果id個數不一樣，那麼，id個數多的優先順序就越高，class類選擇器以及我們的元素選擇器就不用看了
lang="en">
charset="utf-8">
titletitle>
charset="utf-8">
name="generator"
content="editplus®">
name="author"
content="作者是誰">
name="keywords"
name="description"
content="描述和簡介">
type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6
ul,ola*
.main
.main
.box1
#box2
#inner_p
.main
#box1
#box2
#inner_p
style>
head>
class="main">
class="box1"
id="box1">
class="box2"
id="box2">
id="inner_p">最內側的p標籤p>
div>
div>
div>
body>
html>
從上面就可以看到了，在選擇的過程中，第二個選擇器的id數目比第乙個要多，因此根本不用再繼續看類選擇器或者標籤選擇器
id選擇器個數一樣的時候呢？我們就數一下class類選擇器的個數，類選擇器個數越多的優先順序就越高， 總結：當我們比較兩個選擇器的優先順序的時候，先數id，如果說id個數一樣，那我們數class類選擇器的個數，類選擇器個數越多的優先順序越高！
依舊採用上述的案例，修改樣式如下，使第乙個選擇器的class選擇器多餘第二個。
.main
#box1
#box2
.inner_p
.main
#box1
#box2
p
可以看到時按照第乙個選擇器來進行顯示的
當id個數和class個數都一樣的時候：id 和class都一樣的時候，看元素選擇器總結：判斷兩個選擇器優先順序的時候，如果id和class都一樣的時候，我們就看元素選擇器的個數
lang="en">
charset="utf-8">
titletitle>
charset="utf-8">
name="generator"
content="editplus®">
name="author"
content="作者是誰">
name="keywords"
name="description"
content="描述和簡介">
type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6
ul,ola*
.main
.main
#box1
divp
.main
#box1p
style>
head>
class="main">
class="box1"
id="box1">
class="box2"
id="box2">
id="inner_p"
class="inner_p">最內側的p標籤p>
div>
div>
div>
body>
html>
通過子代選擇器去選取，可以看出，當class選擇器和id選擇器數量都一致的時候，會根據標籤選擇器的數量來進行選取。
很簡單的一些總結，基礎好才是王道
歡迎持續訪問部落格
從零開始前端學習 8 初級選擇器的使用
星號 會匹配所有的元素，針對所有的元素設定，使用方式如下所示 這個是在我們清除瀏覽器預設樣式的時候進行使用的，一般情況下，使用萬用字元選擇器的場景並不是很多 元素選擇器是指用標籤名字來進行選擇 如下使用方法 div span p等id選擇器主要指的是通過標籤的id來進行標籤的選擇，首先要給標籤賦予乙...
從零開始學習web前端開發
之前半個月一直在學習深度學習，但是感覺自己的能力還沒到那個程度所以就想擱置一下，從程式設計師基礎的前端開發來學。廢話不多說直接開記 我所使用的前端開發軟體就是業內很流行的vscode，作為小白的我當然也是用的這個 具體的安裝教程，外掛程式教程網上都有詳細的介紹，在此處不多講 在vscode中輸入 就...
從零開始學習前端開發 14 CSS3變形基礎
一 css3變形 transform rotate 旋轉 scale 縮放 skew 傾斜 translate 位移 注 當多種變形方式綜合在一起時，用空格隔開 1.旋轉 a rotatex 180deg 沿x軸翻轉 等價於 rotate3d 1,0,0,180deg b rotatey 180de...