標(biāo)簽選擇器：?
h1, h2, p {}? ?//? 選擇所有的h1,h2,p? ? ??
類選擇器? .content
id選擇器? #content
全局選擇器：?以*開(kāi)頭(星號(hào)標(biāo)在大括號(hào)前辟宗，修飾了包含body所有的標(biāo)簽) *{ padding: 10px}
結(jié)構(gòu)選擇器：
1克懊、后代選擇器? (包含選擇器)：?以空格隔開(kāi)包含關(guān)系的元素
??<div?class="tab">
????<p>標(biāo)簽1</p>
? ? <div>??????<p>標(biāo)簽1</p>????</div>
???<h2>標(biāo)簽兒</h2>
? ?<h2>標(biāo)簽兒</h2>
????<p>標(biāo)簽2</p>
??</div>
<style>
.tab?p?{????color:?orange;??}? //? tab下所有的p都會(huì)改變顏色
</style>
2寺董、子選擇器??以>隔開(kāi)父子級(jí)元素
div>p{ color: red; }? ?//? ?div下的p元素
3、兄弟選擇器 ~ +
<div>兄弟元素
? ? <p>兄元素</p>
? ? <p>弟元素</p>
</div>div p~h2{ color: red}? ?// p后面的h2
div p+h2{ color: green}? ?// p后面緊挨著的h2
屬性選擇器 []
??<div?class="tab">
????<p?title='name'>標(biāo)簽1</p>
????<div> <p>標(biāo)簽1</p> </div>
????<h2>標(biāo)簽兒</h2>
????<h1>標(biāo)簽1</h1>
????<p?title='www.name?oppo'>標(biāo)簽2</p>
??</div>
1、.tab p[title]:{ color: red} 選擇所有帶有title屬性的p標(biāo)簽
2拴还、.tab p[title = 'name']: { color: red} 選擇所有title=name屬性的標(biāo)簽
3、.tab p[title ^= 'na'] :{}? 選擇開(kāi)頭title屬性帶有na開(kāi)頭的標(biāo)簽
4鸦难、.tab p[title$= 'po'] :{}? 選擇title屬性結(jié)尾是po的標(biāo)簽
5根吁、.tab p[title *= 'name'] 只要含有name值就行的標(biāo)簽
6、.tab p[title ~= 'name flower'] 包含name的屬性的標(biāo)簽
7合蔽、.tab p[title |= 'name'] 以name開(kāi)頭的屬性的標(biāo)簽
偽類選擇器
偽類不僅可以作用在a鏈接上击敌，還可以作用在其他元素上
:link? 未訪問(wèn)過(guò)的鏈接
:visited 訪問(wèn)過(guò)的鏈接
:active 鼠標(biāo)點(diǎn)擊的一瞬間
:hover? 鼠標(biāo)懸浮在鏈接上
:focus 具有焦點(diǎn)的輸入元素 innput(將輸入的外邊框去掉 :focus{ outline: none})
:target 錨點(diǎn)目標(biāo)選擇器
:root? 文檔的根選擇器
:empty? 空選擇器，沒(méi)有任何子集的元素
:first-child? div下所有孩子中的第一個(gè)
:last-child div下所有孩子中的最后一個(gè)
:first-of-type div下類型為p的第一個(gè)元素
:last-of-type? div下類型為p的最后一個(gè)元素
:nth-child(2)??選擇每個(gè)p元素是其父級(jí)的第二個(gè)子元素拴事，選擇器匹配父元素中的第 n 個(gè)子元素沃斤，元素類型沒(méi)有限制。
:nth-last-child(n) 選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素刃宵，不論元素的類型衡瓶，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)。
:nth-last-of-type(n)選擇器匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素牲证。
:after? 文本偽類選擇器哮针，在每個(gè)<p>元素之后插入內(nèi)容
:before? 文本偽類選擇器，在每個(gè)<p>元素之前插入內(nèi)容
:first-letter? 文本偽類選擇器坦袍，選擇每一個(gè)<p>元素的第一個(gè)字母
:first-line? 文本偽類選擇器诚撵，選擇每一個(gè)<p>元素的第一行
a?{
????&:link?{???//?未訪問(wèn)
????????color:?yellow;
? ? }????&:visited?{??//?訪問(wèn)過(guò)
??????color:?gray;
????}
????&:hover?{???//?鼠標(biāo)移上去
??????color:?red;
????}
????&:active?{???//?點(diǎn)擊的一瞬間
??????color:?blueviolet;
????}
}
錨點(diǎn)目標(biāo)的偽類選擇器
<a href="#id"></a>
<div id='id'></div>
div:target{ 錨點(diǎn)的目標(biāo)選擇器}
<li > diyihge</li>
<li></li>li:empty{ display: none; }
首尾元素的偽類選擇器
<div>
<p></p>
<h1></h1>
<p></p>
</div>
:first-child? div下所有的第一個(gè)p元素 div p:first-chid
:last-child? div下所有的最后一個(gè)p元素? div:last-child
:first-of-type 特定類型(p元素)的第一個(gè)元素? div p:first-of-type
:last-of-type? 特定類型(p元素)的第一個(gè)元素
唯一選擇器
:only-child? ?只有一個(gè)孩子的div
:only-of-type?div下只有一種孩子類型的選擇器
表單上的偽類選擇器
<input type='text' disable>
<input type='password' required>
input:disable{}
input:required{}
:valid? ?: valid用于匹配輸入值為合法的元素
:invalid? ?:invalid用于匹配輸入值為非法的元素
文本的偽類選擇器
?p::first-letter?{? ?選擇每一個(gè)<p>元素的第一個(gè)字母
??????color:?red
????}
p::first-line?{??選擇每一個(gè)<p>元素的第一行
??????color:?pink;
}
:beforep:before在每個(gè)<p>元素之前插入內(nèi)容
:afterp:after在每個(gè)<p>元素之后插入內(nèi)容
文本偽類表單
<div>
????<input?type='text'>
????<span></span>
??</div>
div?{
??????width:?150px;
??????border:?1px?solid?gray
????}
????div?input[type='text']?{
??????border:?none;
??????outline:?none;
??????width:?100px;
????}
????div?input[type='text']+span::after?{
??????content:?'123';
????}
權(quán)重應(yīng)用
知識(shí)點(diǎn)補(bǔ)充：
!important : 強(qiáng)制權(quán)重優(yōu)先級(jí)
瀏覽器默認(rèn)font-size: 14px
可繼承元素：color、font-size键闺、font-family
通配符的權(quán)重：0
繼承的權(quán)重：? NULL? ? ? ?0>NULL
總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 寿烟、偽類> 通配符* > 繼承 > 瀏覽器默認(rèn)屬性
