CSS3 選擇器

時間 2020-07-09

標籤 css3 css 選擇器欄目 CSS 简体版

原文原文鏈接

一、屬性選擇器

說明html

選取標籤帶有某些特殊屬性的選擇器瀏覽器
經常使用

選擇符	描述
E[attr]	選擇具備attr屬性的E元素
E[attr="val"]	選擇具備attr屬性且屬性值等於val的E元素
E[attr^="val"]	選擇具備attr屬性且屬性值以val開頭的E元素
E[attr$="val"]	選擇具備attr屬性且屬性值以val結尾的E元素
E[attr*="val"]	選擇具備attr屬性且屬性值含有val的E元素

E[attr] 選擇器dom

選擇具備attr屬性的E元素ide

舉例：spa

<style>
    button{
        color: red;
    }
    button[disabled]{
        color: #cccccc;
    }    
</style>

<button>Button</button>
<button>Button</button>
<button disabled='disabled'>Button</button>
<button disabled='disabled'>Button</button>

E[attr="val"] 選擇器code

選擇具備attr屬性且屬性值等於val的E元素htm

舉例：索引

<style>
input[type='search']{
    color: pink;
}
</style>

<input type="text" value="文本框" />
<input type="text" value="文本框" />
<input type="search" value="搜索框" />    
<input type="search" value="搜索框" />

E[attr^="val"] 選擇器文檔

選擇具備attr屬性且屬性值以val開頭的E元素input

舉例：

<style>
div[cladd^='']{
    color: pink;
}
</style>

<div class="font12">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="font24">屬性選擇器</div>

E[attr$="val"] 選擇器

選擇具備attr屬性且屬性值以val結尾的E元素

舉例：

div[cladd$='4']{
    color: pink;
}

*`E[attr="val"]`** 選擇器

選擇具備attr屬性且屬性值含有val的E元素

舉例：

div[cladd*='2']{
    color: pink;
}

注意

類選擇器、屬性選擇器、僞類選擇器權重都爲10

二、結構僞類選擇器

經常使用

選擇符	描述
E:first-child	選擇父元素中的第一個子元素E
E:last-child	選擇父元素中的最後一個子元素E
E:nth-child(n)	選擇父元素中的第n個子元素E
E:first-of-type	選擇指定類型E的第一個
E:last-of-type	選擇指定類型E的最後一個
E:nth-of-type	指定類型E的第n個

:first-child 選擇器

表示選擇父元素的第一個子元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。

舉例：

ol > li:first-child{
  color: red;
}

:last-child 選擇器

選擇的是元素的最後一個子元素。好比，須要改變的是列表中的最後一個「li」的背景色，就可使用這個選擇器。

舉例：

ol > li:last-child{
  color: red;
}

:nth-child(n) 選擇器

用來定位某個父元素的一個或多個特定的子元素。其中「n」是其參數，不只能夠是整數值(1,2,3,4)，也能夠是表達式(2n+一、-n+5)和關鍵詞(odd 奇數、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值爲0時，選擇器將選擇不到任何匹配的元素。

舉例：

ol li:nth-child(even){
  background: orange;
}

注意

選擇父元素裏面的第n個孩子，無論父元素裏面是不是同一種類型。
:empty 選擇器

表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。

舉例：
```
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}~~~
`:root` 選擇器
```

從字面上咱們就能夠很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。

:root{
    background:pink;
}
/*等同於*/
html {background:pink;}

:nth-last-child(n)選擇器

從最後一個開始算索引。

舉例：

ol > li:nth-last-child(1){
  color: blue;
}

E:first-of-type選擇器

匹配同級兄弟元素中的第一個E元素，of-type 選擇指定類型的元素

舉例：

div span:first-of-type{
background-color: yellowgreen;
}

<div>
 <p>p標籤</p>
 <span>span1</span>
 <span>span2</span>
 <span>span3</span>
 <span>span4</span>
</div>

E:last-of-type選擇器

匹配同級兄弟元素中的最後一個E元素，of-type 選擇指定類型的元素

舉例：

div span:last-of-type{
    background-color:rebeccapurple;
}

E:nth-of-type選擇器

匹配同級兄弟元素中的最後一個E元素，of-type 選擇指定類型的元素

舉例：

div span:nth-of-type(2){
    background-color: blue;
}

<div>
     <p>p標籤</p>
     <span>span1</span>
     <span>span2</span>
     <span>span3</span>
     <span>span4</span>
</div>

注意

ul 裏面中容許放li，因此nth-child和nth-of -type是同樣的
僞類選擇器權重爲10

三、僞元素選擇器

經常使用

選擇符	描述
::before	在元素內容的前面插入內容
::after	在元素內容的後面插入內容
::first-letter	選擇文本的第一個單詞或字（如中文、日文、韓文等）
::first-line	選擇文本第一行
::selection	選擇可選中的文本添加樣式

E::before和E::after

說明

在E元素內部的開始位置和結束位建立一個元素，該元素爲==行內元素==，且必需要結合content屬性使用，由於在dom中看不見建立的元素，因此稱爲僞元素。
語法

div::befor {
  content:"開始";
}
div::after {
  content:"結束";
}

注意

E:after、E:before 在舊版本里是僞元素，CSS3的規範裏「:」用來表示僞類，「::」用來表示僞元素，可是在高版本瀏覽器下E:after、E:before會被自動識別爲E::after、E::before，這樣作的目的是用來作兼容處理。
":" 與 "::" 區別在於區分僞類和僞元素
僞元素和標籤選擇器同樣，權重爲1

E::first-letter**

說明

文本的第一個單詞或字（如中文、日文、韓文等）
語法

p::first-letter { 
font-size: 20px;  color: hotpink;
}

E::first-line

說明

文本第一行
語法

/* 首行特殊樣式 */
p::first-line {
  color: skyblue;
}

E::selection

說明

可改變選中文本的樣式
語法

p::selection {
  /* font-size: 50px; */
  color: orange;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。