主頁(yè) > 知識(shí)庫(kù) > HTML5新增的Css選擇器、偽類(lèi)介紹

HTML5新增的Css選擇器、偽類(lèi)介紹

熱門(mén)標(biāo)簽:網(wǎng)站建設(shè) 智能手機(jī) 檢查注冊(cè)表項(xiàng) 阿里云 使用U盤(pán)裝系統(tǒng) 硅谷的囚徒呼叫中心 百度競(jìng)價(jià)點(diǎn)擊價(jià)格的計(jì)算公式 美圖手機(jī)
選擇器
p[name^=“my”]{font-size:14px}
選擇器 ^= 講規(guī)則應(yīng)用到所有 name屬性以“my”開(kāi)頭的<p>元素標(biāo)簽
p[name$=“my”]{font-size:14px}
選擇器 $= 講規(guī)則應(yīng)用到所有 name屬性以“my”結(jié)尾的<p>元素標(biāo)簽
p[name*=“my”]{font-size:14px}
選擇器 $= 講規(guī)則應(yīng)用到所有 name屬性包含“my”結(jié)尾的<p>元素上
選擇器 > 、 + 、~
選擇器>表示受影響的元素是第一個(gè)元素的子元素。
選擇器+這 個(gè)選擇器引用緊跟元素之后的元素,這兩個(gè)元素必須有相同父級(jí)。
選擇器~與+類(lèi)似,但受影響的元素不一定緊跟第一個(gè)元素。

偽類(lèi)與引用元素名稱(chēng)之間要加“:”
例:myclass:nth-child(2)
myclass元素中的第二個(gè)素
關(guān)鍵字“odd” ,“even”
myclass:nth-child(odd):影響其父元素索引位置為奇數(shù)的
myclass:nth-child(even):影響其父元素索引位置為偶數(shù)的

復(fù)制代碼
代碼如下:

<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
否定偽類(lèi)
:not(p){color:red}
除了<p>元素之外的其他元素都為red

標(biāo)簽:懷化 煙臺(tái) 山南 通遼 賀州 黃山 湘潭 湖北

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5新增的Css選擇器、偽類(lèi)介紹》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266