樣式規(guī)則選擇器
- HTML selector
就是HTML標(biāo)簽做為selector,這樣在所有CSS應(yīng)用的網(wǎng)頁(yè)中,所有HTML標(biāo)簽都會(huì)按照所定義的語(yǔ)句來(lái)進(jìn)行顯示.
- Class selector
要將一種HTML標(biāo)簽所創(chuàng)建的各個(gè)網(wǎng)頁(yè)元素分成幾類,則要將這個(gè)HTML標(biāo)簽的class設(shè)置成為不同的值:
注:如果在樣式表定義的時(shí)候,selector直接以(.)后接類名,這條樣式規(guī)則就適用于所有class=該類名,的所有HTML標(biāo)簽. 即把class selector分為了兩類:例如:
<p class="stop">p1</p>
<p class="warning">p2</p>
<p class="normal">p3</p>樣式定義如下:
<style>
<!--
p.stop {color:red}
p.waring {color:blue}
p.normal {color:green}
-->
</style>- 關(guān)聯(lián)class selector: HTML標(biāo)簽名.類名(可以為同一元素定義不同的規(guī)則).
- 獨(dú)立class selector: .類名(可以為不同的元素定義相同的樣式規(guī)則).
- ID selector ID屬性用來(lái)定義某一特定的HTML元素,一個(gè)網(wǎng)頁(yè)文件中只能有一個(gè)元素使用某一ID值.
網(wǎng)頁(yè)中:
<span ID="yellowone">text here</span>樣式定義如下:
<style>
<!--
#yellowone {color:yellow}
-->
</style> - 關(guān)聯(lián)選擇器 指用一個(gè)空格隔開(kāi)的兩個(gè)或更多的單一選擇器組成的字符串
例如:
p em {background: yellow}
其中的"p em"就是關(guān)聯(lián)選擇器,它表示<p>標(biāo)簽對(duì)中的<em>標(biāo)簽對(duì)之間的內(nèi)容的背景為黃色,其它地方出的<em>標(biāo)簽對(duì)中的內(nèi)容不受影響.
注:關(guān)聯(lián)選擇定義的規(guī)則的優(yōu)先權(quán)高于單一的選擇器定義的規(guī)則. - 組合選擇器 為了減少樣式表的重復(fù)聲明,可以在一條樣式規(guī)則定義中組合若干個(gè)選擇器.
例:H1,H2,H3,H4,H5,H6,TD{color:red} - 偽元素選擇器 是指對(duì)同一HTML元素的各種狀態(tài)和其所包函的部分內(nèi)容的一種定義方式.
格式如下: HTML元素:偽元素周期律{屬性:值}常用的偽元素如下 元素名 作用 A:active 選中超鏈接時(shí)的狀態(tài) A:hover 光標(biāo)移動(dòng)到超鏈接上的狀態(tài) A:link 沒(méi)有任何動(dòng)作時(shí)的狀態(tài) A:visited 訪問(wèn)過(guò)的超鏈接狀態(tài) P:first-line 段落中的第一行文本 P:first-letter 段落中的第一個(gè)字母
類選擇器可以和偽元素一起使用:
HTML元素.類名:偽元素 {屬性:值}
HTML/CSS技術(shù):Lesson03_02 樣式規(guī)則選擇器,轉(zhuǎn)載需保留來(lái)源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。