在前端或者網(wǎng)頁設(shè)計中，會用html標簽根據(jù)業(yè)務需求搭建框架，用CSS來設(shè)置樣式。而CSS是通過選擇器選中所需要設(shè)置屬性的標簽，來對特定標簽設(shè)置屬性的。為了能夠靈活的完成各種各樣的需求，有很多選擇器可以供我們選擇，下面是自己對常用的選擇器的學習過程的記錄。更多詳情：http://www.w3school.com.cn/
標簽選擇器
用來根據(jù)標簽名稱選擇當前界面的某一類標簽，對一類標簽進行操作。
書寫格式：
標簽名稱｛
屬性：值；
屬性1：值；
｝案例
<style>
p {
color: red;
}
</style>
<body>
<div>
<p>這是段落</p>
<span>這是span</span>
<ul><li><p>li面段落</p></li></ul>
</div>
</body>
- 效果圖
可以看到通過p標簽選擇器選擇了網(wǎng)頁上出現(xiàn)的
所有p標簽，包括li里面的，這也是缺點，因為選擇了所有的p標簽。
id選擇器
id選擇器用來精準的選擇界面的某個標簽，同一個界面中id不能重復.id名稱只能由字母下劃線數(shù)字組成，不能以數(shù)字開頭（遵循大部分編程語言的變量命名規(guī)則），id名稱不能是html標簽名稱，僅僅為了設(shè)置樣式的時候是不會用id的，id的使用主要是留給js調(diào)用。
-
書寫格式
# id的名稱｛ 屬性：屬性值； 屬性1：值； ｝ 案例
<style>
#red{
color: red;
}
#green{
color: green;
}
</style>
<body>
<div>
<p id="red">這是段落</p>
<span>這是span</span>
<ul><li><p id="green">li面段落</p></li></ul>
</div>
</body>
- 效果圖
通過id成功設(shè)置了兩個p標簽的內(nèi)容顏色分別為紅色和綠色。
類選擇器
相對于id選擇器，class選擇器在同一個界面是可以重復的，類名前面是.可以給某個特定的標簽設(shè)置樣式，一個標簽可以有多個類名。一個標簽設(shè)置多個類名的書寫格式<標簽名 class=”class1 class2“>
-
書寫格式
.classname{ 屬性：屬性值； 屬性1：值； } 案例
<style>
.red{
color: red;
}
.green{
color: green;
}
.big{
font-size: 20px;
}
</style>
<body>
<div>
<p class="red big">這是段落</p>
<p class="green">這是段落</p>
<span class="green">這是span</span>
<ul><li><p class="red">li面段落</p></li></ul>
</div>
</body>
- 效果圖
為界面里面的不同的標簽通過指定類名的形式設(shè)置了不同的樣式和樣式疊加。合理的利用和設(shè)置類選擇器，可以大大減少css的重復代碼，優(yōu)化結(jié)構(gòu)。
后代選擇器
后代選擇器用來找到指定標簽的所有后代標簽，設(shè)置屬性。不僅僅局限于直接子標簽，多層嵌套的依然起效果。同時后代選擇選擇器的選擇器標簽可以是類名和 id選擇器名等其他的名稱
書寫格式
標簽直接用空格隔開
標簽名稱1 標簽名稱2｛
屬性：屬性值
｝案例
<style>
div p{
color: red;
}
div .innerli{
color: green;
}
</style>
<body>
<div>
<p>這是段落</p>
<p>這是段落</p>
<ul>
<li><p class="innerli">li里面的p標簽格外的</p></li>
<li><p>li里面的p</p></li>
</ul>
</div>
<p>不再div的p</p>
</body>
效果圖
子元素選擇器
和后代選擇器的區(qū)別是子元素選擇器只會在自己的直接后代中尋找，后代選擇器間接后代也作為查找范圍。
- 書寫格式
標簽名稱1>標簽名稱2｛
屬性：屬性值；
｝ - 案例
<style>
div>p{
color: red;
}
div>ul>li>p{
color: green;
}
</style>
<body>
<div>
<p>這是段落</p>
<p>這是段落</p>
<ul>
<li><p>li里面的p標簽</p></li>
<li><p>li里面的p</p></li>
</ul>
</div>
<p>不再div的p</p>
</body>
- 效果圖
交集選擇器和并集選擇器
交集選擇器，一個標簽具有標簽選擇器1和2兩種身份時設(shè)置相關(guān)屬性。中間沒有任何字符，緊挨著
標簽選擇器1標簽選擇器2｛
屬性：屬性值;
｝
并集選擇器，逗號隔開
擁有標簽選擇器1和2都設(shè)置為相同的屬性
標簽選擇器，1標簽選擇器2｛
屬性：屬性值;
｝
- 案例
<style>
.red{
color: red;
}
p.red{
font-size: 20px;
}
.blue{
color: blue;
}
span,.blue{
font-size: 25px;
}
</style>
<body>
<div>
<p class="red">這是段落</p>
<span class="red">這是span</span>
<p>這是段落</p>
<span class="blue">這是blue類span</span>
</div>
<span>普通的span</span>
</body>
- 效果圖
兄弟選擇器
相鄰兄弟選擇器用來選擇某個標簽緊隨其后的同一級別的標簽，中間有其他的標簽隔開無效，通用兄弟選擇器無此限制。
-
書寫格式
標簽1+標簽2｛ 屬性：屬性值 （相鄰兄弟選擇器） ｝ 標簽1~標簽2｛ 屬性：屬性值 （通用兄弟選擇器） ｝
*案例
<style>
h1+p{
color: red;
}
h2~p{
color: blue;
}
</style>
<body>
<h1>標題1</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<h1>標題2</h1>
<span>隔開后相鄰兄弟選擇器無效</span>
<p>段落1</p>
<h2>標題3</h2>
<p>段落2</p>
<div><p>不是同一級別的無效</p></div>
<p>段落3</p>
</body>```
###序選擇器
css3增加了許多選擇器，可以按照標簽的順序選擇某個選擇器功能強大。直接看案例。
```html
<style>
p:first-child{
color: red;
}
p:first-of-type{
color: blue;
}
p:nth-child(3){
color: aqua;
}
p:nth-of-type(3){
color: rosybrown;
}
span:only-child{
color: darkcyan;
}
h4:only-of-type{
color: blueviolet;
}
</style>
<body>
<div>
<h5>這是標題，first-child只取同級別的第一個，不區(qū)分類型，所以顏色不變</h5>
<p>這是段落1 first-of-type,取出同類型的第一個</p>
<p>通過nth-child，指定同級別不區(qū)分類型的標簽設(shè)置顏色</p>
<p>nth-of-type(3)，區(qū)分類型取第三個</p>
</div>
<div>
<h4>父標簽div包含了h5和h4，但是只包含了一個h4，所以only-of-type,能夠選中</h4>
<!--下面注釋打開后h4不唯一了所有不能夠選中-->
<!--<h4>父標簽div包含了h5和h4，但是只包含了一個h4，所以only-of-type,能夠選中</h4>-->
<h5>h標簽</h5>
</div>
<div>
<span>父標簽只包含了這一個span標簽：only-child，所以上面div同時包含span和h5的無效</span>
</div>
</body>
- 效果圖
<style>
tr{
text-align: center;
}
/*奇數(shù)行*/
tr:nth-child(even){
color: green;
}
td:nth-child(odd){
font-size: 20px;
}
/**用公式選擇n從0遞增*/
span:nth-child(2n+1){
color: aqua;
}
</style>
<body>
<span>1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
<span>7</span><span>8</span><span>9</span>
<table bgcolor="black" width="100" height="40" cellspacing="1px">
<tr bgcolor="white"><td>1</td><td>2</td></tr>
<tr bgcolor="white"><td>3</td><td>4</td></tr>
<tr bgcolor="white"><td>5</td><td>6</td></tr>
<tr bgcolor="white"><td>7</td><td>8</td></tr>
<tr bgcolor="white"><td>9</td><td>0</td></tr>
</table>
</body>
- 效果圖
屬性選擇器
根據(jù)指定的屬性名稱或者屬性名稱和值找到標簽，設(shè)置屬性。
- 案例
<style>
p[id]{
color: green;
}
/*
通常用來判斷input類型不需要設(shè)置任何class和id
*/
input[type="password"]{
color: blue;
}
/*
標簽[attribute^=值]以某個值開頭
*/
img[alt^='abc']{
color: green;
}
/*
標簽[attribute$=值]以某個值結(jié)尾
*/
img[alt^='cd']{
color: blue;
}
/*
標簽[attribute$=值]包含某個值
*/
img[alt*='abd']{
color: brown;
}
</style>
<body>
<!--選擇出有id屬性的標簽設(shè)置紅色-->
<p id="idf1">段落段落</p>
<p id="idf2">段落段落</p>
<p id="idf3">段落段落</p>
賬號：<input type="text"><br>
密碼：<input type="password">
<img src="" alt="abcde">
<img src="" alt="abc">
<img src="" alt="abd">
<img src="" alt="cde">
</body>
- 效果圖
通配符選擇器
- 書寫格式
*｛
屬性：屬性值
｝
用來設(shè)置所有的標簽，通常做一些全局的設(shè)置，比如清除默認標簽的自帶間距。
選擇器的優(yōu)先級
- 是否是直接選中，與之相反的是間接選中，就是通過父類繼承的屬性。直接選擇的要大于間接選擇
- 都是直接選中，并且都是同類型的，按照優(yōu)先級進行比較。id>類>標簽>通配符>繼承>默認
- 如果都是直接選中，并且是相同類型的選擇器，寫在后面的會覆蓋前面的
`
