溫馨提示×

css中選擇器有哪些

沐橙
254
2021-04-25 12:52:29
欄目: 編程語言

css選擇器有:1、類選擇器,使用語法為:“<p class="first"></p>”,在css中的樣式為“.first{樣式代碼;}”;2、ID選擇器,通過#符號加上id名稱組成,使用語法為:“<p id="polite"></p>”,在css中的樣式為“#polite{樣式代碼;}”;3、通用選擇器,為每一個頁面元素設(shè)置樣式,在css中的樣式為“*{樣式代碼;}”;4、屬性選擇器,它主要分為“存在和值屬性選擇器”和“子串值屬性選擇器”兩種;5、偽類和偽元素等等。

css中選擇器有哪些

在CSS中,選擇器是一種模式,用于選擇需要添加樣式的元素。選擇器主要是用來確定html的樹形結(jié)構(gòu)中的DOM元素節(jié)點。

主要有以下幾種:


一:類選擇器

class元素可以有多個值,中間用空格隔開。一個文件中,可以有多個相同的class值。

<p class="first done"></p>

樣式:

.first{

  background-color: red;

}

二:ID選擇器


#(哈希)符號加上id名稱組成。但是單個文件中id值要保持唯一。一個element中只設(shè)置一個id。

<p id="polite"></p>

樣式:

#polite{

  text-transform: uppercase;

}

三:通用選擇器


* 允許選擇一個頁面的所有元素。

<p></p>

樣式:


* {

  text-decoration: line-through;

}

四:屬性選擇器


1:存在和值屬性選擇器(presence and value)


分為三種情況:屬性名存在;屬性名存在并且有對應(yīng)的值;屬性名存在并且包含對應(yīng)的值。


[attr] 只要包含該屬性即可。不論是否有值,不論值為何。

<p data-fruit></p>

樣式:


[data-fruit]{

  color: green;

}

[attr=val] 包含該屬性,并且值也相等。

<p data-fruit="apple"></p>

樣式:

[data-fruit="apple"]{

  color: red;

}

[attr~=val] 包含該屬性,并且該屬性中至少有一個值為val。

<p data-fruit="apple banana"></p>

<p data-fruit="apple"></p>

樣式:


[data-fruit~="apple"]{

  color: blue;

}

上面兩個標(biāo)簽都會被匹配到。


2:子串值屬性選擇器(substring value 也叫偽正則)


[attr|=val] 包含attr屬性,并且值為value,或者值是以val- 這樣的形式開頭。


[attr^=val] 包含attr屬性,并且值以val開頭。


[attr$=val] 包含attr屬性,并且值以val結(jié)尾。


[attr*=val] 包含attr屬性,并且值中包含子字符串val。


五:偽類(pseudo-class)


以:作為前綴,被添加到一個選擇器末尾的關(guān)鍵字。當(dāng)你希望樣式在特定狀態(tài)下才被呈現(xiàn)到指定的元素時,你可以往元素的選擇器后面加上偽類。


比如讓超鏈接,訪問前后樣式一致,同時鼠標(biāo)懸停時不一致。


a:visited{

  color: blue;

}

/** 選擇器上的逗號不能省略*/

a:hover,

a:active,

a:focus{

  color: red;

  text-decoration: none;

}

比如當(dāng)一個列表的偶數(shù)行和奇數(shù)行的背景不同


<ul>

  <li><p>這是第一行</p></li>  

  <li>p>這是第一行</p></li>  

  <li>p>這是第一行</p></li>  

  <li>p>這是第一行</p></li>

</ul>

li:nth-of-type(2n){

  background-color: red;

}

li:nth-of-type(2n+1){

  background-color:blue;

}

這里的nth-of-type() 是匹配兄弟節(jié)點。因此不能寫成p:nth-of-type。另外如果使用的是nth-child()的話,它匹配的也是兄弟節(jié)點。雖然看名字像是一個孩子節(jié)點。


六:偽元素(Pseudo-element)


通過::這樣兩個冒號前綴,組合關(guān)鍵字,添加到某個元素的后面,去選擇該元素的某個部分。


<a href="http://www.moremom.com">moremom</a>

a::after{

  content:"后面追加內(nèi)容";

}

或者

[href^="http"]::after{

  content:"后面追加的內(nèi)容";

}

七:組合器

名稱組合器選擇
選擇器組A,B匹配A或B的任意元素 ,或者匹配A和B
后代選擇器A BB是A的后代節(jié)點,匹配B
子選擇器A>BB是A的直接子節(jié)點,匹配B
相鄰兄弟選擇器A+BB是A的下一個兄弟節(jié)點,B緊跟A,匹配B
通用兄弟選擇器A~BB是A之后的兄弟節(jié)點中的任一個,匹配B


0