最近有點忙，所以沒有發表博文，現在時間空閑下來了，好好的整理一下知識，今天總結一下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="">籃球
我了解到的知識都分享給大家了，如果有不足的地方歡迎來留言指正，如果你通過這篇文章學到了，我會非常開心。