css選擇器有哪些(css中選擇器有哪些)

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

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

主要有以下幾種:

一:類選擇器

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

<pclass="firstdone"></p>

樣式:

.first{
background-color:red;
}

二:ID選擇器

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

<pid="polite"></p>

樣式:

#polite{
text-transform:uppercase;
}

三:通用選擇器

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

<p></p>

樣式:

*{
text-decoration:line-through;
}

四:屬性選擇器

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

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

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

<pdata-fruit></p>

樣式:

[data-fruit]{
color:green;
}

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

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

樣式:

[data-fruit="apple"]{
color:red;
}

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

<pdata-fruit="applebanana"></p>
<pdata-fruit="apple"></p>

樣式:

[data-fruit~="apple"]{
color:blue;
}

上面兩個標簽都會被匹配到。

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

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

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

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

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

五:偽類(pseudo-class)

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

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

a:visited{
color:blue;
}
/**選擇器上的逗號不能省略*/
a:hover,
a:active,
a:focus{
color:red;
text-decoration:none;
}

比如當一個列表的偶數行和奇數行的背景不同

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

六:偽元素(Pseudo-element)

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

<ahref="http://www.moremom.com">moremom</a>
a::after{
content:"后面追加內容";
}
或者
[href^="http"]::after{
content:"后面追加的內容";
}

七:組合器