結構化偽類選擇器

1.:root選擇器

root選擇器用於匹配文件根元素 也就是說 用“:root”定義的樣式 對所有頁面元素樣式都生效 可以單獨數值在進行覆蓋

<style type="text/css">
:root{
color:red;
}
h2{
color:bule;
}
</style>
<h2>4(⊙﹏⊙)任7他有</h2>
<p>人的方提供使用者</p>
<p>到風6給 </p>

可以看出h2元素為藍色 不是root的紅色原因是 後來單獨設定的h2樣式 覆蓋了剛開始設定的root樣式 p元素因為沒有進行單獨的樣式設定 所以樣式為root樣式的紅色

2.：not選擇器

排除這個結構元素下面的子結構元素 讓他不使用這個樣式

<style type="text/css">
body*:not(h2){
color:red;
}
</style>
<h2>4(⊙﹏⊙)任7他有</h2>
<p>人的方提供使用者</p>
<p>到風6給 </p>

可以看出除了h2標籤的元素其他元素都為紅色

3. :only-child 選擇器

用於匹配某父輩只有一個子元素的元素

<style type="text/css"
 li:only-child{
color:red;
}
</style>
<ul>
<li>欲罷</li>
<li>的發帖衣櫃</li>
</ul>
<ul>
<li>他非要骨灰</li>
</ul>

可以看出只有第2個的ul中的li顏色為紅色 第一個ul因為li不為ul的唯一子元素 所以不顯示 紅色

4.frist-child 和 last-child 選擇器

父輩中第一個和最後一個元素

<style type="text/css">
P:first-child{
 color:red;
}
p:last-child{
color:bule;
}
</style>
<p>tfyguh</p>
<p>dtfyguh</p>
<p>tfyguhij</p>
<p>tfyguhij</p>
<p>dtfygiu</p>
 

可以看出 第一個p元素顯示為紅色 最後一個p元素顯示為藍色；

5：