1 CSS選擇器的分類
- 基本選擇器
- 層次選擇器
- 偽類選擇器
- 動態(tài)偽類選擇器
- 目標(biāo)偽類選擇器
- 語言偽類選擇器
- UI元素狀態(tài)偽類選擇器
- 結(jié)構(gòu)偽類選擇器
- 否定偽類選擇器
- 偽元素
- 屬性選擇器
2 基本選擇器
2.1 語法
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
| * | 通配符選擇器 | 選擇文檔中所有HTML元素 |
| E | 元素選擇器 | 選擇指定類型的HTML元素 |
| #id | ID選擇器 | 選擇指定ID屬性值為"id"的任意類型元素 |
| .class | 類選擇器 | 選擇指定class屬性值為"class"的任意類型的任意多個元素 |
| selector1, selectorN | 群組選擇器 | 將每一個選擇器匹配的元素集合并在一起 |
2.2 案例
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS3基本選擇器</title>
<style type="text/css">
*{margin: 0;padding:0;}
.clearfix:after,.clearfix:before{display:table;content:""}
.clearfix:after{clear:both;overflow:hidden}
.demo { width: 250px; border: 1px solid #ccc; padding: 10px;margin: 20px auto}
li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; }
.demo *{background: orange}
ul {background:grey}
#first{background:lime;color:#000}
#last {background:#000;color:lime}
.item {background: green;color: #fff;font-weight:bold}
.item.important {background:red;}
</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>
2.3 通配符選擇器（*）
通配符選擇器用來選擇所有的元素，當(dāng)然也可以選擇某個元素下的所有元素。
2.4 元素選擇器（E）
2.5 ID選擇器（#id）
在使用ID選擇器之前要在HTML文檔中給定的元素設(shè)置id屬性，id在整個HTML文檔中具有唯一性
2.6 類選擇器（.class）
類選擇器是以獨立于文檔元素的方式來指定元素樣式。使用前需要給需要的元素設(shè)置class屬性，與ID選擇器的不同就是一個文檔中可以有多個相同的類名。
在使用多類選擇器時，要注意，如果一個多類選擇器包含的類名中其中一個不存在，這個選擇器講無法找到相匹配的元素
由于類名在一個HTML文檔中可以同時存在于不同的標(biāo)簽上，比如div上有類名block，ul上也有類名block，當(dāng)僅需要對ul為block定義樣式，此時采用類選擇器并不能達到需要的效果，其實CSS選擇器還支持帶有標(biāo)簽的類名選擇器ul.block，這將只匹配class為block的所有ul元素
2.7 群組選擇器（selector1, selectorN）
將具有相同樣式的元素分組在一起，每個選擇器之間用逗號（,）隔開，注意這里省去逗號局變成后代選擇器了。
3 層次選擇器
層次選擇器時通過HTML的DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰和通用兄弟。
3.1 語法
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
| E F | 后代選擇器 | 選擇匹配F元素，且匹配的F元素被包含在匹配的E元素內(nèi) |
| E>F | 子選擇器 | 選擇匹配F元素，且匹配的F元素是所匹配的E元素的子元素 |
| E+F | 相鄰兄弟選擇器 | 選擇匹配F元素，且匹配的F元素緊接于匹配的E元素后面 |
| E~F | 通用選擇器 | 選擇匹配F元素，且位于匹配的F元素后的所有匹配的F元素 |
3.2 案例
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS3層次選擇器</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body > div {background: green;}
.active ~ div {background: red;}
.active + div {background: lime;}
</style>
</head>
<body>
<div class="active">1</div><!-- 為了說明相鄰兄弟選擇器，在此處添加一個類名active -->
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html>
3.3 后代選擇器（E F）
選擇E元素的所有后代，包括子元素、孫輩元素及更深層次的元素
3.4 子選擇器（E>F）
選擇E元素下的所有子元素
3.5 相鄰兄弟選擇器（E+F）
選擇和E元素同層級且緊跟在E元素后面的元素
3.6 通用兄弟選擇器（E~F）
選擇E元素后面的所有兄弟元素
4 動態(tài)偽類選擇器
待續(xù)。。。
