CSS選擇器
參考：http://blog.csdn.net/hierarch_lee/article/details/52609400
https://www.jianshu.com/p/3c3cf4e02057
一、CSS選擇器的類型
（一）.基礎選擇器
*{
}/*通用元素選擇器*/
#id-selected{
}/*id選擇器*/
.class{
}/*類選擇器*/
p{
}/*標籤選擇器*/（二）組合選擇器
1.多元素（羣組）選擇器（E，F）
多個選擇器之間用逗號（,）隔開，其語法形式爲：<選擇器1>,<選擇器2>，<選擇器3> { 定義樣式 }；
2.後代選擇器（E F）
後代選擇器可以選擇嵌套在標籤內部任意層級的標籤元素
3.子選擇器（E>F）
子選擇器只能選擇當前標籤往內一層的元素，即子選擇器只能匹配直接後代，通俗一點，就是隻能匹配
兒子輩 ，不能匹配孫子輩。每個選擇符之間用“>”進行分割。
4.直接相鄰選擇器（E+F）（比較重要）
“+”只能選擇該選擇器相鄰的下一個選擇器
5.普通相鄰選擇器（E~F）
“~”能選擇該選擇器後的所有同級選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>組合選擇器</title>
</head>
<style>
.mydiv {
font-size: 30px;
}
.parent p {
background: yellow;
}
.parent>div {
border: 1px solid black;
}
.mydiv div+p {
text-align: center;
}
.mydiv div~p {
background: #ccc;
}
</style>
<body>
<div class="parent">
<p>child1</p>
<div class="child2">
<div>child2-1</div>
<div>child2-2</div>
</div>
<div>child3
<p>123</p>
</div>
<div>child4</div>
</div>
<div class="mydiv">
<p>div1</p>
<div>div2</div>
<p>div3</p>
<p>div4</p>
</div>
</body>
</html>
（三）屬性選擇器
E[attr]只使用屬性名，但沒有確定任何屬性值
E[type=”text”]指定屬性名，並指定了該屬性的屬性值
E[attr~=”value”]指定屬性名，並且具有屬性值，此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“〜”不能不寫，多個空格隔開，其中一個值含有value
E[attr^=”value”]指定了屬性名，並且有屬性值，屬性值是以value開頭的
E[attr$=”value”]指定了屬性名，並且有屬性值，而且屬性值是以value結束的
E[attr*=”value”]指定了屬性名，並且有屬性值，而且屬值中包含了value,任意位置包含value
E[attr|=”value”]指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
/*li[title*="123"]{background-color: aqua} //所有包含123的,任意位置*/
li{height:30px; margin-bottom:5px; background-color:#ccc;}
li[title~="123"]{background-color: blueviolet}//包含123的，必須以空格隔開
/* li[title]{background-color: chartreuse}//含有該屬性的 */
</style>
<body>
<li title="123"></li>
<li title="1123456"></li>
<li title="456 123"></li>
<li title="123-456"></li>
<li title="123 456"></li>
<li></li>
</body>
</html>
(四)僞元素和僞類選擇器
1.僞元素選擇器：該類選擇器主要用於向指定的選擇器添加指定的效果。
：first-letter-----選擇“塊級元素”文本段落中的首個字符，只能對“塊級元素”生效。
具有的屬性
font屬性
color屬性
background屬性
margin屬性
padding屬性
border屬性
text-decoration屬性
vertical-align屬性
text-transform屬性
line-height屬性
float屬性
clear屬性
p: first-letter {
border: 2px solid black;
color: blue;
border-radius: 5px;
padding: 5px;
}：first-line-----選擇“塊級元素”文本段落中的首行文本，只能對“塊級元素”生效。
該選擇器可以設置的值有：
font屬性
color屬性
background屬性
word-spacing屬性
letter-spacing屬性
text-decoration屬性
vertical-align屬性
text-transform屬性
line-height屬性
clear屬性
p: first-line {
border: 2px solid black;
letter-spacing: 5px;
color: blue;
} :before 僞元素-----":before" 僞元素可以在元素的內容前面插入新內容。
/*插入文本*/
p:before {
content: "插入文本";
color: red;
}
/*插入圖片*/
div:before {
content: url(../img.jpg);
width: 100px;
height: 100px;
}：after-----在指定的選擇器之後插入一段內容，使用方式和“:before”一樣。
/*插入文本*/
p:after {
content: "插入文本";
color: red;
}
/*插入圖片*/
div:after {
content: url(../img.jpg);
width: 100px;
height: 100px;
}2.僞類選擇器
僞類選擇器和其它選擇器有所不同，它是通過觸發一定的“事件”來實現效果，也就是說如果不進行
任何操作是看不到該選擇器的CSS樣式設置的。
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標移動至鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */
a:focus {color:#0000FF;} /獲得焦點的元素,常用於 input 元素/
二、CSS樣式優先級及權重
(一)樣式優先級規則
1.優先級順序爲：
在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
作爲style屬性寫在元素內的樣式
id選擇器
類選擇器
標籤選擇器
通配符選擇器
2.如果權重相同，則最後定義的樣式的起作用，應該避免這種情況出現
（二）權重規則
原則一： 繼承不如指定
原則二： #id > .class > 標籤選擇符
原則三：越具體越強大
原則四：標籤#id >#id ; 標籤.class > .class
CSS優先級包含四個級別（標籤內選擇符，ID選擇符，Class選擇符，元素選擇符）以及各級別出現的次數!
每個標籤的權重爲1
每個Class選擇符(如 .class)、每個屬性選擇符(如 [attribute=])、每個僞類(如 :hover)爲10
每個id的權重爲100
style的權重爲1000
注意：
1、!important聲明的樣式優先級最高，如果衝突再進行計算。
2、如果優先級相同，則選擇最後出現的樣式。
3、繼承得到的樣式的優先級最低。
/*權重爲1*/
div{
}
/*權重爲10*/
.class1{
}
/*權重爲100*/
#id1{
}
/*權重爲100+1=101*/
#id1 div{
}
/*權重爲10+1=11*/
.class1 div{
}
/*權重爲10+10+1=21*/
.class1 .class2 div{
} 三、css屬性繼承
1.不可繼承的樣式
不可繼承的：display、margin、border、padding、background、height、width
2.可繼承的樣式
可繼承的：color、font、font-family、font-size、font-style、font-variant、font-weight
3.優先級就近原則： 同權重情況下樣式定義最近者爲準
4.載入樣式以最後載入的定位爲準
四、id和class選擇器的區別
id選擇器：
每個元素只能有一個唯一一個ID
每個頁面只能有一個元素使用該ID
class選擇器：
多個元素可以共用相同類
一個元素可以有多個類
五、僞元素和僞類的區別
相同之處：
僞類和僞元素都不出現在源文件和文檔樹中。也就是說在html源文件中是看不到僞類和僞元素的。
不同之處
1.僞類的效果可以通過添加一個實際的類來達到，而僞元素的效果則需要通過添加一個實際的元素才能達到
2.僞元素產生新對象，在DOM樹中看不到，但是可以操作；僞類不產生新的對象，僅是DOM中一個元素的不同狀態；
