選擇器
p[name^=“my”]{font-size:14px}
選擇器 ^= 講規則應用到所有 name屬性以“my”開頭的<p>元素標簽
p[name$=“my”]{font-size:14px}
選擇器 $= 講規則應用到所有 name屬性以“my”結尾的<p>元素標簽
p[name*=“my”]{font-size:14px}
選擇器 $= 講規則應用到所有 name屬性包含“my”結尾的<p>元素上
選擇器 > 、 + 、~
選擇器>表示受影響的元素是第一個元素的子元素。
選擇器+這 個選擇器引用緊跟元素之後的元素,這兩個元素必須有相同父級。
選擇器~與+類似,但受影響的元素不一定緊跟第一個元素。
偽類與引用元素名稱之間要加“:”
例:myclass:nth-child(2)
myclass元素中的第二個素
關鍵字“odd” ,“even”
myclass:nth-child(odd):影響其父元素索引位置為奇數的
myclass:nth-child(even):影響其父元素索引位置為偶數的
復制代碼代碼如下:
<style>
.test:nth-child(odd)
{
color:Blue;
}
.test:nth-child(even)
{
color: Red;
}
.test:nth-child(2)
{
color: Green;
}
</style>
<div class="test">
<p>
1
</p>
<p>
2
</p>
</div>
<p class="test">
1
</p>
<p class="test">
2
</p>
<p class="test">
1
</p>
<p class="test">
2
</p>
效果如下:
1
2
1
2
1
2
否定偽類
:not(p){color:red}
除了<p>元素之外的其他元素都為red