選擇器語法
在html文件中，則先寫一個<style>標簽，每個選擇器的樣式用{}包起來，以：屬性:值形式，屬性之間用分號隔開，舉例：
<style>
選擇器1 {
屬性1 : 值;
屬性2 : 值;
…
}
選擇器2 {
屬性1 : 值;
屬性2 : 值;
…
}
...
</style>
如果幾個選擇器之間有相同樣式，可以把相同的地方寫在一起，并用逗號隔開，然后可以在另外寫自己的屬性，舉例：
選擇器3，選擇器4 { <!-- 選擇器3和4的公共樣式 -->
屬性1 : 值;
屬性2 : 值;
…
}
選擇器4 { <!-- 選擇器4自己特有的樣式 -->
屬性3 : 值;
屬性4 : 值;
…
}
在外部引用的css文件中，則不需要寫<style>標簽，直接寫樣式即可
常用選擇器
style屬性（內(nèi)聯(lián)）
這種寫法是較不靈活的，只能在單個標簽范圍內(nèi)作用，舉例：
<p style="background: gray">AAA</p>
元素選擇器
針對某一類元素標簽來進行樣式設(shè)置，則只需以標簽為樣式命名即可，舉例：
p {
background: blue;
font-size: large;
}
此時，則所有<p>標簽都會將有該樣式
類選擇器
針對標簽的類來選擇，使用時在標簽中加入：class="xxx"，然后在樣式當(dāng)中寫：.xxx的樣式，.代表類，舉例：
.red {
color: red;
}
<div class="red">BBB</div>
如果一個標簽有多個類，可以在class屬性中用空格隔開，舉例：
<div class="red fontsize">BBB</div> <!-- 標簽有red和fontsize兩個類 -->
此時可以分別寫一個red和fontsize的類選擇器，但也可以寫一個同時擁有red和fontsize類才能用的類選擇器，舉例：
.red.fontsize { <!-- 同時有red和fontsize的類選擇器 -->
color: red;
font-weight: 900;
}
但要注意的是此時.red和.fontsize之間沒有空格，其代表這兩個類是同時擁有的，如果有空格，參考后代選擇器
ID選擇器
ID選擇器和類選擇器相似，在標簽中加入：id="xxx"，然后在樣式中寫：#xxx的樣式，#代表ID，舉例：
#id1 {
color: gray;
}
<h1 id="id1">ID1</h1>
注：
id選擇器功能和類的差不多，目的主要是為了給標簽提供一個唯一標識，雖然也允許重復(fù)id，但是這樣就意義不大，所以一般最好id唯一
屬性選擇器
根據(jù)標簽的屬性來寫樣式，在樣式中寫：[屬性]的樣式，則有該屬性的標簽都會獲得樣式，舉例：
[title] {
color: yellow;
}
<a title="百度一下">百度</a>
上面的說明當(dāng)有title屬性時就會獲得樣式，如果要屬性等于某一特定值時才能獲取樣式，則可以如下寫法：
[title="百度一下"] {
color: yellow;
}
還有就是可以當(dāng)屬性包含某些值時就能獲取樣式，此時只需在=前面加個*，然后后面是包含的部分字符即可，舉例：
[title*="百度"] {
color: yellow;
}
如果是想屬性值以某些字符開始，則在=前面加個^，舉例：
[title^="百度"] {
color: yellow;
}
如果是想屬性值以某些字符結(jié)束，則在=前面加個$，舉例：
[title$="百度"]
…
屬性選擇器還可以判斷是某一類標簽下的屬性才能用，在屬性前面加標簽名即可，舉例：
a[title="百度一下"] {
color: yellow;
}
則此時只有a標簽且有title屬性的才能用。
以上這些規(guī)則在像href等屬性中用的比較多，比如說明當(dāng)鏈接開頭是：[http://abc](http://abc)開頭的，后面不管跟的是什么，都是隸屬本站的頁面之類的，那么就可以給他添加個特殊的樣式，這樣就可以區(qū)分這個鏈接是否是站內(nèi)鏈接，舉例：
[href] {
color: yellow;
}
[href^="http://abc"] { <!-- 當(dāng)網(wǎng)址開頭為這些的時候鏈接為藍色字 -->
color: blue;
}
后代選擇器
當(dāng)幾個標簽嵌套時，可以對其里面層進行定位確定樣式，比如有嵌套關(guān)系：A(B(C))，那么就可以：A B定位到B，可以：A B C定位到C，也可以：A C定位到C，中間用空格隔開，舉例：
.a .b { <!-- class a下的class b為藍色 -->
color: blue;
}
.a div { <!-- class a下所有div標簽為綠色-->
color: green;
}
<div class="a">A
<div class="b">B
<div class="c">C
</div>
</div>
</div>
那么此時B就為藍色，C為綠色
相鄰選擇器
當(dāng)幾個標簽相鄰時，可以設(shè)置這幾個的樣式，比如有三個div標簽A、B、C平行，若想設(shè)置a的后一個div標簽樣式，則可以：
.a + div {
background: rgba(255, 0, 0 ,0.2); <!--rgba設(shè)置顏色，最后一個是透明度，1最大-->
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
則.a + div代表class a的后一個div標簽，如果想設(shè)置a后面所有div的樣式可以把+改成~，即：
.a ~ div {
background: rgba(255, 0, 0 ,0.2);
}
復(fù)合選擇器
如果要選擇的內(nèi)容只要符合選擇器的其中一個條件即可，則在選擇中用逗號隔開，舉例：
.a, div {
background: rgba(255, 0, 0 ,0.2);
}
偽類選擇器
像href鏈接、鼠標移動時也有對應(yīng)的選擇器，舉例：
a:link {
/*未點擊過的鏈接*/
color: blue;
}
a:visited {
/*點擊過的鏈接*/
color: gray;
}
button:hover {
/*鼠標懸浮時改變背景色*/
background: rgba(255, 0, 0, 0.2);
}
.b:hover {
background: rgba(255, 0, 0, 0.2);
}
<a >baidu</a>
<button >click</button>
<div class="b">aaa</div>
:link
未點擊樣式
a:link {
...
}
:hover
鼠標浮動樣式
a:hover {
...
}
:active
點擊時樣式
a:active {
...
}
:visited
訪問后樣式
a:visited {
...
}
除了上面的link、visited、hover，還有像active（當(dāng)有動作時）、focus（聚焦時）等都十分常用
注：
:hover/:active還能用在<a>標簽以外的標簽上
動態(tài)偽類優(yōu)先級問題
-
:hover必須在:link/:visited之后才能完全生效 -
:active必須在:hover之后才能完全生效
推薦編寫順序：:link :visited :focus :hover :active
偽類:target
選中的錨點樣式，舉例：
<head>
<style>
div {
height: 100px;
width: 100px;
position: absolute;
}
:target {
border: 10px solid yellow;
z-index: 2;
}
</style>
</head>
<body>
<a href="#aaa">aaa</a>
<a href="#bbb">bbb</a>
<div id="aaa" style="background-color: green;"></div>
<div id="bbb" style="background-color: blue;"></div>
</body>
結(jié)構(gòu)偽類
nth-child/nth-last-child
第幾個xxx元素（從頭開始算）/第幾個xxx元素（從尾開始算），舉例：
div:nth-child(2n) {
/* 第偶數(shù)個子元素的樣式 */
...
}
span:nth-last-child(-n + 2) {
/* 最后兩個子元素的樣式 */
...
}
該偽類可以用于如條紋表格的實現(xiàn)
注：
nth-child是基于父元素下的第幾個子元素，如果該元素為xx，那么則有效；nth-of-type是指xx元素中的第幾個
:only-of-type
父元素中的唯一元素
:empty
空白元素
:not(xxx)
否定元素，如：:not(div):not(span)就是非div且非span元素
偽元素
::first-line
首行文本樣式，其下只能設(shè)置如：字體、顏色和背景這類屬性
::first-letter
首字母樣式
::before/::after
在元素的前/后添加的內(nèi)容，但是并不會出現(xiàn)在dom中，通過content設(shè)置內(nèi)容，舉例：
div::before {
content: 'abc';
/*添加字符串*/
/*content: attr(id);*/
/*添加該其id屬性的字符*/
/*content: url('http://xxx.xxx.xxx/xxx.jpg');*/
/*添加一張圖片*/
color: blue;
/*順便字體改藍色*/
}
這個經(jīng)常用來實現(xiàn)像播放器的播放暫停的復(fù)用按鈕（可能還會結(jié)合:hover之類的）
注：
可以通過attr()獲取當(dāng)前標簽屬性：
a::after {
content: "=>" attr(href);
/* 獲取標簽的href屬性，其中字符串拼接直接用空格就行 */
}
選擇器默認優(yōu)先級
!important > 內(nèi)聯(lián)樣式 > id選擇器 > 類選擇器 = 屬性選擇器 = 偽類 > 元素選擇器 = 偽元素 > 通配符
選擇器權(quán)重
在各種選擇器中，其權(quán)重如下：
!import 10000
內(nèi)聯(lián) 1000
id 100
類/屬性/偽類 10
元素/偽元素 1
通配符 0
比較方式
從權(quán)值最大的選擇器的數(shù)量開始比，數(shù)量多的則優(yōu)先級高，如果數(shù)量相同就往低權(quán)值的選擇器進行比較，...，如果都一樣，就采取就近原則（選擇器針對性越強，優(yōu)先級越高）
