css選取器總結，css選取器

css選取器總結，css選取器

　　最近有點忙，所以沒有發表博文，現在時間空閑下來了，好好的整理一下知識，今天總結一下css裡面的一些選取器。

　　css裡的選取器有好多種，下面我就把我瞭解到的寫一寫，如果有不全的或者有誤的歡迎留言指正，萬分感謝。

　　一、選取器

　　1、* 萬用字元選取器 

　　　這個選取器是匹配頁面中所有的元素，一般用來清除瀏覽器的預設樣式.

*{margin:0; padding:0}

　　2、元素選取器 

　　　　通過標籤名來選擇元素。

div{width:100px; height:100px;}

　　3、class選取器

　　　　　class選取器 / 類別選取器 / 用class屬性給元素命名，在頁面中可以出現很多次，相當於人的名字。

.box{width:100px; height:100px;}<div class="box"></div><p class="box"></p>

　　4、 id選取器

　　　　以id屬性來命名，在頁面中只能出現一次，具有唯一性，並且權重值最高，相當於一個人的身份證。

#box{width:100px; height:100px;}<div id="box"></div>

　二、進階選取器 一　

　　1、 E F  後代選取器

　　　　匹配到E元素下面的所有的F元素（包括子、孫），空格隔開。

div ul li {width:100px; height:100px;}
//匹配到div下面的所有ul，且ul的所有後代li<div>　　<ul>　　　　<li></li>　　　　<li></li>    </ul></div>   

　　2、 E,F  多元素選取器

  　　　　同時匹配到E元素和F元素，用逗號隔開。

div,#box{width:100px; height:100px; background:#000;}//同時匹配到下文中的div標籤和id為box的p標籤<div></div><p id="box"></p>

　　3、E>F 子項目選取器

　　　　選擇到E元素的直接子代F，只選擇子代。

ul>li{width:100px; height:100px;}

<ul>
　　<li>
 　</li>
</ul>

　　4、E+F（毗鄰選取器） 相鄰兄弟選取器

　　緊接在E元素後面的同級元素F，相鄰兄弟選取器，有相同的父級。

　　

div+.box{width:100px; height:100px; background:pink;}//這個只能選擇到下面第二行的那個p元素  最後一個不滿足緊接在div元素後面這個條件　　<div></div>    <p class="box"></p>     <p class="box"></p>    <div></div>    <p></p>    <p class="box"></p>

　　　

div p + p{    width:100px;    height:100px;    margin-top:2px;    background:pink;}　　//這個可以選擇到下面除了第一個p元素外其他所有的元素。　　<div>        <p></p>        <p></p>        <p></p>        <p></p>    </div>

　　三、進階選取器 二       屬性選取器

　　1、 E[attr] 匹配具有attr屬性的E元素 　　　

div[title]{    width:100px;    height:100px;    margin-top:2px;    background:pink;}　　//匹配到下文中的第一個和第三個div元素 因為他們含有title屬性    <div title="width"></div>    <div></div>    <div title="height"></div>

　　2、E[attr=val]

　　　　匹配具有attr屬性且值只為val的的E元素（注意   屬性值要用引號引起來，我自己試了試好像不用括弧也可以。）

div[title="height"]{    width:100px;    height:100px;    margin-top:2px;    background:pink;
}  //匹配到下文中的第三個div元素    <div title="width"></div>    <div></div>    <div title="height"></div>

　　3、E[attr~=val]

　　　　匹配屬性值為attr，並包含這個值的E元素，用於選取屬性值中包含指定詞彙的元素。

div[class~="c1"]{    width:100px;    height:100px;    margin-top:2px;    background:pink;} //選擇到下方第一個和第二個div元素　　 <div class="c1"></div>    <div class="c1 c2"></div>    <div class="c2c1"></div>

　　4、E[attr|=val]

　　　　匹配所有屬性為attr，值為val或者以 var- 開頭的E元素

div[class|="c1"]{    width:100px;    height:100px;    margin-top:2px;    background:pink;}//選擇到下面當中的第一個和第三個元素　　 <div class="c1"></div>    <div class="c1cs"></div>    <div class="c1-c2"></div>

　　　5、E[attr][attr2=val]匹配所有 有attr1屬性 且有attr2屬性，且attr2的值為val的E元素，這個就是寫出幾個屬性選取器，並且都要同時滿足他們的條件。　　

div[title="width"][class]{    width:100px;    height:100px;    margin-top:2px;    background:pink;}    //選擇到下面的第一個div元素    <div title="width" class="box"></div>    <div title="width"></div>

　　四、a偽類別選取器

1、 :link匹配所有未被點擊的連結　　a:link{ color: green; }2、：hover匹配滑鼠移至上方在其上的元素　　a:hover{ color: gold; }3、：active匹配滑鼠按下還沒有釋放的元素　　a:active{ color: blue; }4、：visited匹配所有已經被點擊的連結a:visited{ color: red; }

　　hover的使用，只是一個選取器，一定是他的後代。

.box{    width:100px;    height: 100px;    color:#fff;    background: #000;}
.box:hover p{　　color:red;}//滑鼠移動div上，p字型的顏色改變　　<div class="box">        <p>我的字型</p>    </div>

　　2. a虛擬元素選取器

　　　　1> ：before  在元素

div:before{    content: "before插入的元素";}//在div所有元素的最前面插入這個

　　<div>
　　　　<p>這個是p</p>
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　</ul>
　　</div>

　　　　2>  :after 在元素後面插入內容，插到最後一個子項目的後面。

div:after{content:"";}<div></div>

　

　　css3新增的選取器

　　　五. 關聯選取器

　　　　E1~E2(選擇E1後面的兄弟E2)

 div~p{    width:100px;    height: 100px;    margin-top: 2px;    background: #000;}　　//div後面的三個p元素都選擇到了    <div></div>    <p></p>    <p></p>    <p></p> 

　　　六、 屬性選取器新增

　　　　1. [attr^=" .."] 以....開頭的元素

div[class^="de"]{    width:100px;    height: 100px;    margin-top: 2px;    background: #000;}　　//選擇到了前面三個div元素    <div class="de1"></div>    <div class="de"></div>    <div class="dedkjsfkld"></div>    <div class="1fde"></div>

　　　　2.   [attr$="... "]　以...結束的元素

div[class$="de"]{    width:100px;    height: 100px;    margin-top: 2px;    background: #000;}　　//選擇到了前三個    <div class="de1de"></div>    <div class="de"></div>    <div class="dedkjsfklde"></div>    <div class="1f"></div>

　　　　3. [attr*=""] 選擇到包含值的元素　

div[class*="de"]{    width:100px;    height: 100px;    margin-top: 2px;    background: #000;}　　//選擇到下面的  1 2 4 都包含de字母    <div class="de1de"></div>    <div class="de"></div>    <div class="dld"></div>    <div class="1def"></div>

　　七、偽類新增的選取器  下面都用p來舉例子，其他的也一樣

　　　下面當中就舉一個例子，其他的那些自己去實驗一下，可以用這個例子來實驗

　　　　這裡是有of的是從p元素當中選p

　　　1. :first-of-type

p:first-of-type{    width:100px;    height:100px;    background: #000;}//父級下面所有p元素的第一個     <div>        <p></p>        <p></p>        <p></p>        <p></p>        <p></p>    </div>

　　2. :last-of-type 

　　p:last-of-type   父級下面所有p元素的最後一個

　　3. only-of-type

　　p:only-of-type  父級下面只有一個p元素，其他的元素不能是p，如果有其他元素那麼會選不中。

　　4. ：nth-of-type

　　p:nth-child(n)   選中父級元素中第n個p

　　5. ：nth-last-of-type(n)

　　　　選擇p，父級元素中倒數第n個p元素

 

下面是沒有of的是在子項目中選擇

　　6. :only-child   

　　　p:only-child  選擇p，p必須為他們各自父級的唯一一個子項目

　　

p:only-child{    width:100px;    height: 100px;    background: #000;}
　　//下面的這個只能選擇到第一個div當中的p    <div>        <p></p>    </div>    <div>        <p></p>        <span></span>    </div>    <div>        <p></p>        <p></p>        <p></p>    </div>

　　7. :last-child

　　　p:last-child   選擇p，p必須為父級的最後一個子項目

　　8. nth-child（n）

　　p:nth-child(n)   父元素的第n個元素，叫p元素

　　9  nth-last-child(n)

　　　p：nth-last-child(n)　選擇p，也就是父級的倒數第n個元素，叫p。

 

後面的偽類沒有什麼規律了，別著急，一個一個慢慢來。

　　只是舉例子，不要以為括弧裡面的內容是固定的。

　　1.  ：not（.c1）   選擇到class除了c1的p 括弧裡面的內容還可以是id等

p:not(.c1){    width:100px;    height: 100px;    margin-top: 2px;    background: #000;
}//下面的元素當中除了第一個class為c1的p元素其他的都被選中了。　　    <div>       <p class="c1"></p>       <p class="c2"></p>       <p id="box"></p>       <p></p>       <p></p>   </div> 

　　　2.  :empty　 選擇倒標籤內容為空白的規定元素 

p:empty{    width:100px;    height: 100px;    margin-top: 2px;    background: #000;}//會選擇到下面的第二個p元素，因為他沒有內容    <div>        <p>11</p>        <p></p>        <p>11</p>        <p>11</p>        <p>1</p>    </div>

　　　3.  p:target  選擇倒當前被錨點啟用的p

p:target{    width:100px;    height: 100px;    margin-top: 2px;    color:#fff;    background: #000;}  //點擊a的內容，p標籤的樣式會被選中啟用    <a href="#a1">點我</a>    <div></div>    <p id="a1">p標籤的內容</p>

　4. 　　：：selection 被使用者選中的p　這句話什麼意思呢，來看下面的效果

p::selection{    width:100px;    height: 100px;    margin-top: 2px;    color:#fff;    background: #000;}    <p>111</p>    <p>222</p>    <p>333</p>    <p>444</p>    <p>555</p>

　　

       

 5. input:disable

　　選擇到不能被操作的input框

6. input：enable

　　選擇到能被cao操作的input框

input:enabled{    background:yellow;}input:disabled{    background:red;}　　//一般可以寫內容的都是可以被操作的，加上disabled的屬性和disabled的值的是不可以被操作的    <input type="text" value="">    <input type="text">    <input type="text" disabled="diabled">

7. input:checked 

　　選擇到被選中的input，一般用於js

 

input:checked{    width:40px;    height:40px;}//就是框被打上對勾，被選中的元素會被選中　　　    <input type="checkbox" checked="" value="">足球    <input type="checkbox" value="">籃球

　我瞭解到的知識都分享給大家了，如果有不足的地方歡迎來留言指正，如果你通過這篇文章學到了，我會非常開心。