一习柠、選擇器
1匀谣、* 通配符選擇器?
這個選擇器是匹配頁面中所有的元素照棋，一般用來清除瀏覽器的默認(rèn)樣式.
1*{margin:0;?padding:0}
2、元素選擇器?
通過標(biāo)簽名來選擇元素武翎。
1div{width:100px;?height:100px;}
3烈炭、class選擇器
class選擇器 / 類選擇器 / 用class屬性給元素命名，在頁面中可以出現(xiàn)很多次宝恶，相當(dāng)于人的名字符隙。
.box{width:100px;?height:100px;}
<div class="box"></div>
<p class="box"></p>
4、 id選擇器
以id屬性來命名垫毙，在頁面中只能出現(xiàn)一次霹疫，具有唯一性，并且權(quán)重值最高综芥，相當(dāng)于一個人的身份證丽蝎。
#box{width:100px;?height:100px;}
<div id="box"></div>
二、高級選擇器 一
1膀藐、?E F? 后代選擇器
匹配到E元素下面的所有的F元素（包括子屠阻、孫），空格隔開额各。
div ul li {width:100px;?height:100px;}<br>//匹配到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標(biāo)簽和id為box的p標(biāo)簽
<div></div>
<p id="box"></p>
3、E>F 子元素選擇器
選擇到E元素的直接子代F缸逃，只選擇子代针饥。
1ul>li{width:100px;?height:100px;}<br><br><ul><br> <li><br> </li><br></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元素 因?yàn)樗麄兒衪itle屬性
????<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;<br>}? //匹配到下文中的第三個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;
}//選擇到下面當(dāng)中的第一個和第三個元素
<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??? 匹配所有未被點(diǎn)擊的鏈接
a:link{?color:?green; }
2铜跑、：hover??? 匹配鼠標(biāo)懸停在其上的元素
a:hover{?color: gold; }
3门怪、：active?? 匹配鼠標(biāo)按下還沒有釋放的元素
a:active{?color:?blue; }
4、：visited? 匹配所有已經(jīng)被點(diǎn)擊的鏈接
a:visited{?color:?red; }
hover的使用锅纺，只是一個選擇器掷空，一定是他的后代。
.box{
????width:100px;
????height:?100px;
????color:#fff;
????background:?#000;
}<br>.box:hover p{
color:red;
}//鼠標(biāo)移動div上囤锉，p字體的顏色改變
<div class="box">
????????<p>我的字體</p>
????</div>
2. a偽元素選擇器
1> ：before? 在元素
div:before{
????content:?"before插入的元素";
}
//在div所有元素的最前面插入這個
這個是p
2>? :after 在元素后面插入內(nèi)容坦弟，插到最后一個子元素的后面。
div:after{content:"";}
<div></div>
css3新增的選擇器
五. 關(guān)聯(lián)選擇器
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$="... "] 以...結(jié)束的元素
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來舉例子，其他的也一樣
下面當(dāng)中就舉一個例子驱入，其他的那些自己去實(shí)驗(yàn)一下赤炒，可以用這個例子來實(shí)驗(yàn)
這里是有of的是從p元素當(dāng)中選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，父級元素中倒數(shù)第n個p元素
下面是沒有of的是在子元素中選擇
6. :only-child? ?
p:only-child? 選擇p雪情，p必須為他們各自父級的唯一一個子元素
p:only-child{
????width:100px;
????height:?100px;
????background:?#000;
}<br> //下面的這個只能選擇到第一個div當(dāng)中的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巡通，也就是父級的倒數(shù)第n個元素尘执，叫p。
后面的偽類沒有什么規(guī)律了宴凉，別著急誊锭，一個一個慢慢來。
只是舉例子弥锄，不要以為括號里面的內(nèi)容是固定的炉旷。
1.? ：not（.c1）? ?選擇到class除了c1的p 括號里面的內(nèi)容還可以是id等
p:not(.c1){
????width:100px;
????height:?100px;
????margin-top:?2px;
????background:?#000;<br>}//下面的元素當(dāng)中除了第一個class為c1的p元素其他的都被選中了签孔。
????<div>
???????<p class="c1"></p>
???????<p class="c2"></p>
???????<p id="box"></p>
???????<p></p>
???????<p></p>
???</div>
2.? :empty 選擇倒標(biāo)簽內(nèi)容為空的規(guī)定元素?
p:empty{
????width:100px;
????height:?100px;
????margin-top:?2px;
????background:?#000;
}//會選擇到下面的第二個p元素，因?yàn)樗麤]有內(nèi)容
????<div>
????????<p>11</p>
????????<p></p>
????????<p>11</p>
????????<p>11</p>
????????<p>1</p>
????</div>
3.? p:target? 選擇倒當(dāng)前被錨點(diǎn)激活的p
p:target{
????width:100px;
????height:?100px;
????margin-top:?2px;
????color:#fff;
????background:?#000;
}? //點(diǎn)擊a的內(nèi)容窘行，p標(biāo)簽的樣式會被選中激活
????<a href="#a1">點(diǎn)我</a>
????<div></div>
????<p id="a1">p標(biāo)簽的內(nèi)容</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;
}
//一般可以寫內(nèi)容的都是可以被操作的罐盔，加上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="">籃球
文章源：https://www.cnblogs.com/z937741304/p/7901086.html
