CSS系列------選擇器和選擇器的優先級

時間 2019-11-17

原文原文鏈接

1.1.基本選擇器

通配符選擇器（*）
通配符選擇器的使用方法以下
```
*{margin:0px; padding:0px;} //*表明全部的
```
ID選擇器(#)
　　ID選擇器的使用方式以下：
```
*#intro {font-weight:bold;}//也能夠省略通配符 
```
```
 #intro{font-weight:bold;} //兩種方式是同樣的。
```
不一樣於其餘選擇器,id選擇器有如下特色
規範：同一個id，在一個網頁中只能標註一個元素。
　　若是有同名id ，則在CSS中用ID選擇器時,依舊會匹配全部的同名id元素。只是這麼使用的時候會有如下的弊端：
1.不符合規範，由於規範要求的是一個id只能被一個元素使用。
2.語義的二義性。通常id咱們都是做爲標示符使用的，一個id只能用來標註一個元素。
3.在JS DOM（getElementById）操做或者是jquery("#xx")選擇頁面中元素時，返回的僅是第一個被找到的素。

css

類選擇器（.）
類選擇器使用比較簡單，使用方式以下：
jquery

*.important {color:red;}   //第一種使用方式

 .important {color:red;}  //第二種使用方式，推薦第二種

屬性選擇器([])
屬性選擇器用來選擇指定屬性的 HTML 元素。使用方式以下：

[title]{ color:red; }  //爲帶有 title 屬性的全部元素設置樣式：

[title~=hello] { color:red; }//爲包含指定值的 title 屬性的全部元素設置樣式

屬性選擇器一覽表

選擇器	描述
[attribute]	用於選取帶有指定屬性的元素。
[attribute=value]	用於選取帶有指定屬性和值的元素。
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素。
[attribute\|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每一個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每一個元素。
[attribute=value*]	匹配屬性值中包含指定值的每一個元素。

 ========================================================================================================================

   在屬性選擇器中 [attribute~=value] 與 [attribute*=value] , [attribute|=value] 與 [attribute^=value] 的用法 在描述上很類似，很容易混淆：

<img title="hello world"/>

  對於以上的元素  [title~=hello],[title*=hello]均能匹配，可是 [title~=hell]不能匹配，而[title*=hell]能夠匹配,
           
 由於[attribute~=value] 匹配時要求value是一個「單詞」，而 [attribute*=value]匹配時，是以正則表達式規則進行匹配

同理，也能夠類推出 [attribute|=value] 與 [attribute^=value]也是已相似的規則匹配，前者要求是以單詞開頭，然後者僅僅要求以xxxxx字符串開頭便可.

注： 這裏所說的單詞，並非咱們嚴格意義上的單詞，好比 asdasd wasdas, 這裏 asdasd wasdas對於計算機來講就是兩個單詞。可是as@re# 這種含有特殊字符的對於計算機來講就不是單詞。

僞類選擇器（：）

CSS2規則中所容許使用的僞類選擇器

CSS3中僞類選擇器使用以及各瀏覽器的支持狀況

屬性	描述	CSS
:active	向被激活的元素添加樣式。	1
:focus	向擁有鍵盤輸入焦點的元素添加樣式。	2
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。	1
:link	向未被訪問的連接添加樣式。	1
:visited	向已被訪問的連接添加樣式。	1
:first-child	向元素的第一個子元素添加樣式。	2
:lang	向帶有指定 lang 屬性的元素添加樣式。	2










===========================================================================================================

常見的CSS3的規則

屬性	描述	CSS
:nth-child()	匹配父元素的第n個子元素。	3
:nth-of-type()	匹配某父元素下第幾個某一個類型的元素	3
:empty { sRules }	匹配沒有任何子元素（包括text節點）的元素	3
:checked { sRules }	匹配用戶界面上處於選中狀態的元素 (用於input type爲radio與checkbox時)	3


      
  





CSS3的這些規則大部分在IE--8中都是不能使用的，  關於CSS3的一些僞類選擇器及其使用，詳細請見CSS參考手冊

僞元素選擇器（：或者：：）

常見的僞元素選擇器以下：css3

選擇符	版本	描述
:first-letter/E::first-letter	CSS1/3	設置對象內的第一個字符的樣式。
:first-line/E::first-line	CSS1/3	設置對象內的第一行的樣式。
:before/E::before	CSS2/3	設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用
:after/E::after	CSS2/3	設置在對象後（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用
::placeholder	CSS3	設置對象文字佔位符的樣式。
::selection	CSS3	設置對象被選擇時的顏色。

CSS3推薦使用::寫法，用以區分僞類選擇器和僞元素選擇器，可是使用:寫法依舊有效。

可是在使用:first-letter/E::first-letter時，IE6在使用該選擇符時有個顯式的BUG：選擇符與包含規則的花括號之間不能緊挨着，需留有空格或換行。

正則表達式

2.基本選擇器的組合

基本選擇器組合結果的複雜選擇器無外乎如下幾種：兄弟選擇器，子選擇器，後代選擇器,組合選擇器,羣組選擇器。瀏覽器

兄弟選擇器（+）

兄弟選擇器又稱鄰近選擇器，選擇鄰近的元素.使用方式以下：
```
selector1+selector2{
} //由兩個基本選擇器，==》組合選擇器
```
子選擇器（>）
子選擇器，選擇的是直接後代中全部符合條件的元素。post
```
     selector1>selector2{
　　    color:red;
      }
```
後代選擇器（空格）

　　後代選擇器，選擇的是子孫後代中全部符合條件的元素
```
使用方式：

selector1 selector2{
  color:red;
}  //A B是基本選擇器
```
組合選擇器（）

組合選擇器，是兩個基本選擇器同時使用的狀況，匹配需同時知足多個基本選擇器
```
使用方式以下：

selector1selector2{
  color:red;
 }
```
羣組選擇器（,）

羣組選擇器:選擇器同時使用時，多個選擇器之間是相互獨立的

selector1,selector2{

} //第一種
=========================
========================= 兩種使用方式，效果是同樣的，只是第一種有利於代碼的複用。
selector1{

}
selector2{

} //第二種

==================================================================學習

==================================================================、spa

=====================================未完待續....下一篇，各種選擇器的優先級code

本篇中只是大體敘述了一下，CSS選擇器的種類，講的也比較淺顯---若是詳細學習，推薦htm

http://www.css88.com/book/css/selectors/pseudo-classes/index.htm...

相關標籤/搜索

每日一句

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