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