CSS3中給了我們更多的選擇器讓我們來獲取元素搏存，極大程度提高了查找元素的精度以及準(zhǔn)確性咖摹，值得慶幸的是絕大多數(shù)的選擇器的語法跟
jQuery中兼容
屬性選擇器
屬性選擇器的作用就是星虹，根據(jù)標(biāo)簽的屬性去篩選對應(yīng)的元素校套，屬性選擇器從
CSS2推出悴侵，在CSS3中增加了幾個(gè)新的
- 選擇器語法：
下列的屬性名都為att 這里就不單獨(dú)寫了
E[att]:包含attr屬性
E[att="val"]:屬性值為val
E[att~="val"]:屬性值使用空格進(jìn)行分割,有一個(gè)為val
E[att^="val"]:屬性值以val開頭
E[att$="val"]:屬性值以val結(jié)尾
E[att*="val"]:屬性中包含val
E[att|="val"]:屬性以‘-’分割狰住，其中有val值（如果屬性只有val 那么也會(huì)被選中哦）
- 示例代碼：
示例代碼直接新建頁面运嗜，運(yùn)行即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li[skill]{
background-color: red;
}
li[color = "white"]{
background-color: blue;
}
li[color~="red"]{
background-color: orange;
}
li[color^="bla"]{
border: 10px solid #0094ff;
}
li[color$="ge"]{
font-size: 32px;
}
li[color*="orange"]{
color:orange;
}
li[color|="black"]{
background-color: black;
}
</style>
</head>
<body>
<ul>
<li skill="噴火">葫蘆娃</li>
<li color = "black">黑貓警長</li>
<li color = "white">海爾兄弟</li>
<li color = "blue red">舒克和貝塔</li>
<li color = "white gray">喜羊羊與灰太狼</li>
<li color = "black-orange">大頭兒子小頭爸爸</li>
</ul>
</body>
</html>
兄弟選擇器
兄弟選擇器的作用是从媚，選擇相鄰的兄弟節(jié)點(diǎn)
-
語法：
- 相同
父元素中 - 在選擇器1
之后 - 的所有滿足選擇器2的元素
- 相同
選擇器1~選擇器2
- 示例代碼：
在class為
.first之后的所有class為.meat的元素背景顏色會(huì)變?yōu)榧t色
需要注意的是,之前的并不會(huì)獲取到哦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟選擇器</title>
<style type="text/css">
.first~.meat{
background-color: red;
}
</style>
</head>
<body>
<p class="meat">牛肉</p>
<h1 class="first">我是h1</h1>
<p>西蘭花</p>
<p>西葫蘆</p>
<p class="meat">牛肉</p>
<h1>我是h1</h1>
<p>小白菜</p>
<p class="meat">牛肉</p>
<p class="meat">牛肉</p>
</body>
</html>
偽類選擇器
偽類選擇器，CSS3中推出了一些新的
偽類選擇器橡羞，將常用的列舉如下
- 語法：
使用注意：
* 標(biāo)簽E,必須是某個(gè)元素的子元素(在界面上)
* 如果通過偽類選擇器找到的元素不是E則選擇無效
結(jié)構(gòu)偽類
E:first-child：第一個(gè)子元素
E:last-child：最后一個(gè)子元素
E:nth-child(n)： 第n個(gè)子元素眯停，計(jì)算方法是E元素的全部兄弟元素；
E:nth-last-child(n)： 跟E:nth-child(n)類似 卿泽，只是倒著計(jì)算莺债；
其中n的取值范圍是：0，1,2,3,4...線性累加
可以傳入表達(dá)式，比如2n,2n+1等等
可以傳入特殊字符：even(偶數(shù)) odd(奇數(shù))
E:empty 指的是E標(biāo)簽齐邦，并且內(nèi)容為空
E:not(選擇器)：指的是椎侠，不滿足括號內(nèi)選擇器條件的元素E
目標(biāo)偽類
E:target:選中當(dāng)前錨點(diǎn)
- 示例代碼：
示例代碼直接新建頁面，運(yùn)行即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器 - 偽類</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
ul {
width: 560px;
padding: 0;
margin: 100px auto;
list-style: none;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
overflow: hidden;
}
li {
width: 79px;
height: 80px;
text-align: center;
line-height: 80px;
border-left: 1px solid #CCC;
border-top: 1px solid #CCC;
background-color: #FFF;
font-size: 24px;
font-weight: bold;
color: #333;
float: left;
}
/*第一個(gè)*/
li:first-child{
color: red;
}
li:last-child{
color:red;
}
li:nth-child(2){
color:blue;
}
li:nth-child(2n){
color: blue;
}
li:nth-child(2n+1){
color:red;
}
li:nth-last-child(1){
background-color: pink;
}
li:nth-last-child(2){
background-color: yellow;
}
/*奇數(shù)*/
li:nth-child(odd){
background-color: pink;
}
/*偶數(shù)*/
li:nth-child(even){
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</body>
</html>
calendar.png
偽元素選擇器
before&after
- 語法：
使用注意：
- 需要配合
content屬性使用（如果沒有,輸入""空字符串）- 可以用來制作圖標(biāo)
- 部分圖標(biāo)框架使用的就是這種機(jī)制
- 默認(rèn)是行內(nèi)元素措拇，根據(jù)需求可能需要修
E:before：在元素E之前添加
E:after：在元素E末尾添加
也可以寫為
E::before
E::after
first-letter
-
語法：
- 獲取的是內(nèi)容的第一個(gè)文字
- 根據(jù)語言不通肺蔚，會(huì)有細(xì)微差別
E:first-letter等價(jià)于E::first-letter
first-line
-
語法：
- 獲取的是內(nèi)容的第一行的內(nèi)容
- 可以配合p標(biāo)簽使用
E:first-line等價(jià)于E::first-line
