CSS選擇器

回憶一下CSS2中得選擇器樣式：

行內樣式>ID選擇器>類選擇器>標籤名選擇器

1、第一種分類方式：按照功能上

一、ID選擇器   <div id="div1">類選擇的優先級最高</div>    #div1{color:black;}

二、類選擇器  <div class="div2">類選擇最常常用</div>   .div2{text-align:center;}

三、標籤名選擇器  <div>標籤名選擇器是最廣泛的在全部的樣式元素都有裏通常採用標籤名選擇器</div>   單獨一個div就ok   div{background:yellow;}

四、羣組選擇器(就是把有着相一樣式的元素合在一塊兒來寫)  

每一個元素都有相同的屬性，

例如：h1{color:red;}

           p{color:red;}

          span{color:red;}

上邊那種方式就至關繁瑣如今就能夠寫成這種樣式：h1,p,span{color:red;}

五、後代選擇器

例如：<div class="div4"><p>後代元素選擇器是用處不少，而且也有不少其餘的用法，css3中會有不少體現</p></div>

.div4  p{color:black;}

接下來就是CSS3的選擇器

CSS 3中的結構性僞類

六、根元素選擇器

:root  選擇器匹配文檔根元素。(選擇器匹配到的元素，也就是文檔樹中最頂層結構的元素。在不一樣的場景下具體的根元素不一樣。)

:root{background: pink;border: 1px solid black;}

七、同級選擇器(兄弟選擇器)

element1~element2     element1 以後出現的全部 element2。

兩種元素必須擁有相同的父元素,可是 element2 沒必要 直接緊隨 element1。

例子： p~ul{font-size: 50px;}   (ul在p的下方)

其中有有一個特殊的：相鄰的兄弟選擇器（緊隨到其元素纔會有影響）；p+ul{font-size:50px;}

八、子選擇器

子選擇器使用了大於號.表示父級元素的子元素將有所改變

h1>strong{color:red;}  子元素的樣式有所變化

<h1>我是<strong>子選擇器<strong>我是子元素樣式</strong><h1>

九、屬性選擇器

(1)    [attribute]   匹配帶有指定屬性的元素

例子：[title]{color:green}   

<div><a href="#" title="我是特殊的title">屬性選擇器</a></div>

輸出

(2)[attribute=value] 匹配帶有指定屬性與值得元素；

  [title="title"]{color: #00CCFF;margin-left: 30px;}

<div>
        <a href="#" title="titlehh">屬性選擇器</a>
        <a href="#" title="title">帶title的值得選擇器</a>
    </div>

顯示的結果爲：

（3）[attribute~=value]匹配屬性值包含指定的詞彙的元素，value必須是獨立的字符串

[title~="title"]{color:red;margin-left: 30px;}

<div>
        <a href="#" title="title name">屬性選擇器</a>
        <a href="#" title="title">帶title的值得選擇器</a>
    </div>

顯示的結果是兩個a標籤內的顏色都有所變化

（4）[attribute|=value]  匹配全部帶有指定值開頭的屬性值得元素，該值必須是整個單詞

   [title|="title"]{color:red;margin-left: 100px;display: inline-block;}

<div>
        <a href="#" title="title">咱們都帶有title這個單詞</a>
        <a href="#" title="title">咱們都帶有title這個單詞</a>
        <a href="#" title="title">咱們都帶有title這個單詞</a>
        
    </div>

顯示出來的結果是

（5）[attribute^=valiue] 匹配屬性值以指定值開頭的每一個元素.

指定值能夠是單獨一個字母或者一個單詞或者是數字。最好是單詞（便於代碼的編輯）

 [title^="title"]{color: green;margin-left: 50px;}

<div>
        <a href="#" title="titleFirst">咱們都帶有title這個單詞</a>
        <a href="#" title="titleSecond">咱們都帶有title這個單詞</a>
        <a href="#" title="title">咱們都帶有title這個單詞</a>
    </div>

（6）[attribute$=value]  匹配屬性值以指定值結尾的每一個元素

   [title$="title"]{color: #003399;margin-left: 100px;}

    <div>
        <a href="#" title="Firsttitle">咱們都帶有title這個單詞</a>
        <a href="#" title="Secondtitle">咱們都帶有title這個單詞</a>
        <a href="#" title="1title">咱們都帶有title這個單詞</a>
    </div>

（7）[atrribute*=value]匹配屬性值包含指定值的每一個元素（這個是最經常使用的屬性選擇器）

 [title*="ti"]{color: red;margin-left: 100px;}

<div>
        <a href="#" title="Firstitle">咱們都帶有ti這個單詞</a>
        <a href="#" title="Secondtitle">咱們都帶有ti這個單詞</a>
        <a href="#" title="title">咱們都帶有ti這個單詞</a>
        <a href="#" title="ti">咱們都帶有ti這個單詞</a>
    </div>

顯示的結果爲：

 十、子元素選擇器（僞類選擇器）

(1):nth-child(n)匹配屬於其父級元素的第N個子元素，不管元素的類型

(2):nth-last-child(n)匹配屬於其元素的第N個子元素，不管元素類型，從最後一個元素開始算起

(3):first-child 匹配屬於其父元素的首個子元素的子元素

(4):last-child 匹配屬於其父元素的最後一個子元素的每一個元素。

(5):first-of-type 匹配屬於其父元素的特定類型的首個子元素的的每一個元素

(6):last-of-type 匹配屬於其父元素的特定類型的最後一個子元素的每一個元素

(7):nth-of-type(n)匹配屬於父元素的特定類型的第N個元素子元素的每一個元素

     N能夠是數字，關鍵字和公式

(8):nth-last-of-type(n)匹配屬於父元素的特定類型的第N個子元素的每一個元素，以最後一個子元素開始計數

(9):only-child匹配屬於其父元素的惟一子元素的每一個元素

(10):only-of-type 匹配屬於其父元素的特定類型的惟一子元素的每一個元素

 十一、表單元素選擇器

(1):endabled 匹配每一個已啓用的元素（大多用在表單元素上）

(2):disabled 匹配每一個被禁用的元素（大多用字表單元素上）

(3):checkek 匹配每一個已被選中得input元素（只用在單選按鈕上和複選框上）

十二、其餘選擇器

(1):empty  匹配沒有子元素（包括文本節點）的每一個元素

(2):target  URL帶有後面跟有瞄名稱#，指向文檔內某個具體的元素，這個被鏈接元素

 就是目標元素(target element)。 :target 選擇器可用於選取當前活動的目標元素。

點擊就會有樣式的改變

:target{
         color: red;
         font-size:30px ;
     }

<div>
        <a href="#news" title="Firstitle">而且href有值跳轉到new1</a>
        <a href="#" title="Secondtitle">帶有href屬性</a>
        <p id="news">我有專有的href值,內容1</p>
    </div>

點擊第一個a標籤，會跳轉到對應id的p標籤，而且p標籤的樣式會有改變

(3)::selection 匹配每一個已被選中的 input 元素(只用於單選按鈕和複選框)

(4):not(selector)(反僞類)

綜上就是我對CSS選擇器的總結，你們有什麼問題能夠提出來。後期我還會對對它優化更新。

多多指點意見