css選擇器總結

• 1. 基礎選擇器
  • 1.1. ID選擇器
  • 1.2. 類選擇器
  • 1.3. 通配符選擇器
  • 1.4. 標籤選擇器
  • 1.5. 屬性選擇器
• 2. 組合選擇器
  • 2.1. 後代選擇器
  • 2.2. 子元素選擇器
  • 2.3. 相鄰兄弟選擇器
  • 2.4. 通用兄弟選擇器
  • 2.5. 交集選擇器
  • 2.6. 並集選擇器
• 3. 僞類和僞元素選擇器
  • 3.1. 標記狀態的僞類
  • 3.2. 篩選功能的僞類
  • 3.3. 僞元素選擇器

1.1. ID選擇器

ID選擇器使用 "#" 號加ID名稱xx來表示，用來選擇HTML 中的id="xxx"的DOM元素

<div id="page">我是id選擇器</div>
複製代碼

當咱們想給這個元素應用樣式時候

#page{
    color:#fff;
    background:#000;
}
複製代碼

1.2. 類選擇器

類選擇器咱們是用 「.」 加上claa名稱來表示,用來選擇HTML中的class="xx"的DOM元素。

<li class="list-item">1</li>
    <li class="list-item">2</li>
    <li class="list-item">3</li>
複製代碼

把樣式加到每一條元素，使用類選擇器

.list-item{
   color:red;
   font-size:16px 
}
複製代碼

1.3. 通配符選擇器

通配符選擇器使用 * 來選擇頁面裏面的全部元素

*{
    margin:0;
    padding:0;
}
複製代碼

因爲通配符選擇器要把樣式覆蓋到全部的元素上,所以它的效率不會高。

1.4. 標籤選擇器

標籤選擇器就是選中HTML中某一種類的標籤，直接使用HTML中的標籤名做爲肖澤強的名稱

li{
    font-size:20px;
}
複製代碼

Tips 標籤選擇器一般用來重置某些標籤的樣式,標籤選擇器的效率也不是很高

1.5. 屬性選擇器

屬性選擇器經過DOM的屬性來選擇DOM節點，屬性選擇器用括號"[]"包裹，以下

a[href]{
    color:red;
}
複製代碼

屬性選擇器有以下幾種形式

• [attr] 用來選擇帶有attr屬性的元素

• [attr=xxx] 用來選擇attr屬性等於xxx的元素,如選擇文本輸入框

<input type="text" value="xuanze"/>>

//css
input[type=text]{
    color:red;
}
複製代碼

這個選擇器要注意,xxx和HTML中的屬性值必須徹底相等纔會生效

<input class="input text" type="text" value="xuanze"/>>

//css
input[class="input text"]{
    color:red;
}
複製代碼

• [attr~=xxx] 這個選擇器中間用了~=,選擇屬性值包含xx

<input class="input text" type="text" value="xuanze"/>>

//css
input[class~=input]{
    color:red;
}
複製代碼

• [attr|xxx] 這個選擇器是用來選擇爲xxx或者xxx- 開頭的元素，使用以下

<div class="article">1</div>
   <div class="article-tile">2</div>
   <div class="article-content">3</div>
   <div class="article_footer">4</div>

   div[class|=article]{
       color:red
   }
複製代碼

上面會有article開頭的生效，但對第四條不會生效

• [attr^=xxx]，這個選擇器會匹配xxx開頭,實際就是用正則去匹配屬性值,只要是xxx開頭就行

若是把選擇器改爲 div[class^=artice] 那麼都會選中了

• [attr$=xxx] 這個選擇器用正則匹配屬性以XXX結尾的元素

• [attr*=xxx] 這個選擇器用正則匹配的方法來選擇屬性值中包含XXX字符的全部元素。

2. 組合選擇器

2.1. 後代選擇器

後代選擇器是用空格分隔多個選擇器組合,它的做用是在A選擇器的後代中找到B選擇器所指的元素，如:

<div class="page">
    <div class="acr">
        <p>我是隨便寫的</p>
    </div>
    <p>我也是隨便寫的</p>
</div>

.page p {
     color: gold;
     font-size: 20px;
   }
複製代碼

2.2. 子元素選擇器

子元素選擇器和後代選擇器相似，不過子元素只找子元素,不會把全部的後代都找一遍

.page >p{
    color:red
}
複製代碼

2.3. 相鄰兄弟選擇器

相鄰兄弟選擇器是用來選取某個元素緊鄰的兄弟元素,它的語法是"選擇器A + 選擇器B"

h1+p{
    margin-top:20px;
    color:black;
}
複製代碼

2.4. 通用兄弟選擇器

通用兄弟選擇器和相鄰兄弟選擇器很類似,它的語法是"選擇器A ~ 選擇器B"，會匹配選擇器A後面全部符合選擇器B的元素

H1~P{
    color:red
}
複製代碼

2.5. 交集選擇器

交集選擇器是爲了找兩個或多個選擇器的交集,用法就是把兩個選擇器放在一塊兒,法語"選擇器A選擇器B"

.list-item.active{
    color:red;
    font-size:20px
}
複製代碼

2.6. 並集選擇器

並集選擇器是爲了合併類型的樣式,能夠是選擇器不用單樣式相同的CSS語法塊合併。並集選擇器就是用多個逗號分隔多個選擇器,如"選擇器A,選擇器B"

H1,H2,P{
    margin:0;
    padding:0;
}
複製代碼

3. 僞類和僞元素選擇器

3.1. 標記狀態的僞類

• :link 選取未訪問過的超連接

• :visited 選取訪問過的鏈接

• :hover 選取鼠標懸浮的元素

• :active 選取點中的元素

• :focus 選取獲取焦點的元素

3.2. 篩選功能的僞類

• :empty 選取沒有子元素的元素

• :checked 選取勾選狀態下的input 元素 只對 radio 和checkbox 有效

• :disabled 選取禁用的表單元素

• :first-child 選取當前選擇器下的第一個元素

• :last-child 選取當前選擇器下的最後一個元素

• :nth-child(an+b) 選取指定位置的元素,參數支持an+b的形勢.好比 li:nth(2n+1),就能夠選取li元素序號是2的整數倍+1的全部元素,也就是1,3,5,7,9序號的li元素

• :nth-last-child(an+b) 和上面相似,不過從後面選取.

• :only-child 選取元素惟一的子元素,若是元素的父元素只有它一個子元素就會生效,若是還有其餘的兄弟元素,則不生效

• :only-of-type 選取惟一的某個元素類型。若是元素的父元素只有它一個當前類型的子元素就會生效。

3.3. 僞元素選擇器

僞元素選擇器是用來香元素設置某種特殊效果.僞元素選擇器並非真實的DOM元素,因此稱之僞元素.經常使用的以下:

• ::first-line 爲元素的第一行使用樣式

• ::first-letter 爲某個元素的首字母或第一個文字使用樣式

• ::before 在某個元素以前插入內容

• ::after 在某個元素以後插入內容

• ::selection 對光標選中的元素添加樣式

1.僞元素構造的元素是虛擬的,因此不能使用js去操做

2.first-line和first-letter不使用於內聯樣式,在內聯樣式中都會失效

3.若是同時使用了 befor 和first-letter. 第一個內容要從before中算起,若是before 中第一個爲非文本內容,那first-letter也會做用到這個非文本內容上,但不會生效。

4.在CSS3 中規定, 僞類用一個冒號 (:) 表示, 僞元素用兩個冒號 (::)來表示
複製代碼