css選擇器有哪些及怎么使用

這篇文章主要介紹“css選擇器有哪些及怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css選擇器有哪些及怎么使用”文章能幫助大家解決問題。

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

主要有以下幾種：

一：類選擇器

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

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

樣式：

.first{
  background-color: red;
}

二：ID選擇器

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

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

樣式：

#polite{
  text-transform: uppercase;
}

三：通用選擇器

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

<p></p>

樣式：

* {
  text-decoration: line-through;
}

四：屬性選擇器

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

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

[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;
}

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

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)

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

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

七：組合器

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

關于“css選擇器有哪些及怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。