CSS選擇器筆記
- WBOY原創
- 2016-10-15 10:32:031004瀏覽
一、元素選擇符
| 序號 | 選擇器 | 含義 |
| 1. | * | 通用元素選擇器，符合任何元素 |
| 2. | E | 標籤選擇器，符合所有使用E標籤的元素 |
| 3. | .info | class選擇器，符合所有class屬性中包含info的元素 |
| 4. | #footer | id選擇器，符合所有id屬性等於footer的元素 |
1. *
<span style="color: #800000;">* </span>{<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 0</span>;
}
在我們看比較高級的選擇器之前，應該先認識這個眾所周知的清空選擇器。星號呢會將頁面上所有每個元素都選到。許多開發者都用它來清空`margin`和`padding`。當然你在練習的時候使用這個沒問題，但我不建議在生產環境中使用它。它會為瀏覽器憑添許多不必要的東西。
`*`也可以用來選取某元素的所有子元素。
<span style="color: #800000;">#container * </span>{<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
}
它會選取`#container`下的所有元素。
2. E
<span style="color: #800000;">a </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;">
ul </span>{<span style="color: #ff0000;"> margin-left</span>:<span style="color: #0000ff;"> 0</span>; }
如果你想定位頁面上所有的某標籤，不是透過`id`或是’class’，直接使用標籤選擇器。
3. .info
<span style="color: #800000;">.error </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> red</span>;
}
這是個`class`選擇器。它跟`id`選擇器不同的是，它可以定位多個元素。當你想要對多個元素進行樣式修飾的時候就可以使用`class`。當你要對某個特定的元素進行修飾那就是用`id`來定位它。
4. #footer
<span style="color: #800000;">#container </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 960px</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> auto</span>;
}
在選擇器中使用`#`可以用id來定位某個元素。
二、多元素的組合選擇器
| 序號 | 選擇器 | 含義 |
| 5. | E,F | 多元素選擇器，同時搭配所有E元素或F元素，E和F之間用逗號分隔 |
| 6. | E F | 後代元素選擇器，匹所有屬於E元素後代的F元素，E和F之間用空格分隔 |
| 7. | E > F | 子元素選擇器，符合所有E元素的子元素F |
| 8. | E + F | 相鄰元素選擇器，與所有緊接在E元素之後的同級元素F |
| 9. | E~F | 符合任何在E元素之後的同級F元素 |
5. E,F
<span style="color: #800000;">a,li </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }
符合所有的a元素和li元素
6. E F
<span style="color: #800000;">li a </span>{<span style="color: #ff0000;">
text-decoration</span>:<span style="color: #0000ff;"> none</span>;
}
只匹配li後面多有的a元素（包括孫子輩）
7. E > F
<span style="color: #800000;">div#container > ul </span>{<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
}
只匹配li後面多有的a元素（不包括孫子輩）`E F`和`E > F`的差別就是後面這個指揮選擇它的直接子元素。看下面的範例：
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> List Item<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> Child <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> List Item <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> List Item <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> List Item <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">10</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">11</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
`#container > ul`只會選取`id`為’container’的`div`下的所有直接`ul`元素。它不會定位到如第一個`li`下的`ul`元素。
8. E + F
<span style="color: #800000;">ul + p </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> red</span>;
}
這個叫相鄰選擇器。它指揮選中指定元素的直接後繼元素。上面那個例子就是選取了所有`ul`標籤後面的第一段，並將它們的顏色都設為紅色。
9. E~F
<span style="color: #800000;">ul ~ p </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> red</span>;
}
`ul + p`選擇器只會選擇那些緊鄰指定元素的元素。而這個選擇器，會選擇跟在目標元素後面的所有相符的元素。
三、關係選擇器
| 序號 | 選擇器 | 含義 |
| 10. | E[att] | 符合所有具有att屬性的E元素，不考慮它的值。 （注意：E在此處可以省略，例如"[cheacked]"。以下同。） |
| 11. | E[att=val] | 匹配所有att屬性等於"val"的E元素 |
| 12. | E[att~=val] | 符合所有att屬性具有多個空格分隔的值、其中一個值等於"val"的E元素 |
| 13. | E[att|=val] | 符合所有att屬性且屬性值為以val開頭並以連接符號"-"分隔的字串的E元素。 |
| 14. | E[att^="val"] | 匹配所有att屬性以"val"開頭的元素 |
| 15. | E[att$="val"] | 匹配所有att屬性以"val"結尾的元素 |
| 16. | E[att*="val"] | 符合所有att屬性包含"val"字串的元素 |
10. E[att]
匹配所有具有att属性的E元素，不考虑它的值。
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="background-color: #f5f5f5; color: #800000;">a[class]</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#f00</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
上面的这个例子中，只会选择有class属性的元素。那些没有此属性的将不会被这个代码修饰。
11. E[att=val]
匹配所有att属性等于"val"的E元素
<span style="color: #800000;">a[class="external"]</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
上面这片代码将会把`class`属性值为`external`的标签设置为红色，而其他标签则不受影响。
12. E[att~=val]
匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素
<span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
a[class~="external"]</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#f00</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external txt"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="txt"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external txt"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="txt"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
这个`~`符号可以定位那些某属性值是空格分隔多值的标签（因此只有外部链接是红色字体）。
13. E[att|=val]
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="background-color: #f5f5f5; color: #800000;">li[class|="test3"]</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#f00</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test1-abc"</span><span style="color: #0000ff;">></span>列表项目1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test2-abc"</span><span style="color: #0000ff;">></span>列表项目2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test3-abc"</span><span style="color: #0000ff;">></span>列表项目3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test4-abc"</span><span style="color: #0000ff;">></span>列表项目4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test5-abc"</span><span style="color: #0000ff;">></span>列表项目5<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test6-abc"</span><span style="color: #0000ff;">></span>列表项目6<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
因此只有项目3为红色。
14. E[att^="val"]
选择具有att属性且属性值为以val开头的字符串的E元素。
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="abc"</span><span style="color: #0000ff;">></span>列表项目1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="acb"</span><span style="color: #0000ff;">></span>列表项目2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bac"</span><span style="color: #0000ff;">></span>列表项目3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bca"</span><span style="color: #0000ff;">></span>列表项目4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cab"</span><span style="color: #0000ff;">></span>列表项目5<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cba"</span><span style="color: #0000ff;">></span>列表项目6<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">10</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">li[class^="a"]</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
选择具有class属性且属性值为以a开头的字符串的E元素(因此只有项目1、2为红色)。
15. E[att$="val"]
匹配所有att属性以"val"结尾的元素
<span style="color: #800000;">li[class$="a"]</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
选择具有class属性且属性值为以a结尾的字符串的E元素(项目4、6为红色)。
16. E[att*="val"]
匹配所有att属性包含"val"字符串的元素
<span style="color: #800000;">li[class*="a"]</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
因为class的属性中都含有字母a所以结果均为红色。
四、伪类选择器
| 17. | E:link | 匹配所有未被点击的链接 |
| 18. | E:visited | 匹配所有已被点击的链接 |
| 19. | E:hover | 匹配鼠标悬停其上的E元素 |
| 20. | E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| 21. | E:first-child | 匹配父元素的第一个子元素E |
| 22. | E:last-child | 匹配父元素的最后一个子元素E |
| 23. | E:only-child | 匹配父元素仅有的一个子元素E |
| 24. | E:nth-child(n) | 匹配父元素的第n个子元素E |
| 25. | E:nth-last-child(n) | 匹配父元素的倒数第n个子元素E |
| 26. | E:first-of-type | 匹配同类型中的第一个同级兄弟元素E |
| 27. | E:last-of-type | 匹配同类型中的最后一个同级兄弟元素E |
| 28. | E:only-of-type | 匹配同类型中的唯一的一个同级兄弟元素E |
| 29. | E:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素E |
| 30. | E:nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素E |
17. E:link
设置超链接a在未被访问前的样式。
<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="external"</span><span style="color: #0000ff;">></span>外部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="?"</span><span style="color: #0000ff;">></span>内部链接<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">6</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">a:link</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#03c</span>;}<span style="color: #800000;">
.external:link</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
运行结果：外部链接为红色；内部链接为蓝色
18. E:visited
设置超链接a在其链接地址已被访问过时的样式。
19. E:hover
设置元素在其鼠标悬停时的样式。
20. E:active
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
21. E:first-child
匹配父元素的第一个子元素E。
<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;">2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test5<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">8</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">li:first-child</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果只有列表第一条信息test1为红色
22. E:last-child
匹配父元素的最后一个子元素E。
<span style="color: #800000;">li:last-child</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果只有列表最后一条信息test5为红色
23. E:only-child
匹配父元素仅有的一个子元素E。
<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>test4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">8</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">li:only-child</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果只有列表test1为红色
24. E:nth-child(n)
匹配父元素的第n个子元素E。
<span style="color: #800000;">li:nth-child(3)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果只有列表test3为红色
25. E:nth-last-child(n)
匹配父元素的倒数第n个子元素E。
<span style="color: #800000;">li:nth-last-child(3)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果只有列表test3为红色
26. E:first-of-type
匹配同类型中的第一个同级兄弟元素E。
<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>我是一个div元素<span style="color: #0000ff;"></</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #008080;">4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #008080;">5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落3<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落4<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #008080;">7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是段落5<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #008080;">8</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #800000;">p:first-of-type</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果只有这是段落1为红色。
27. E:last-of-type
匹配同类型中的最后一个同级兄弟元素E。
<span style="color: #800000;">p:last-of-type</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果只有这是段落5为红色。
28. E:only-of-type
匹配同类型中的唯一的一个同级兄弟元素E。
<span style="color: #800000;">b:only-of-type</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">f00</span>;}
结果只有我是一个div元素为红色。
29. E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E,n 可以代表数字也可以代表字母。
<span style="color: #800000;">p:nth-of-type(2)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果只有这是段落2为红色。
n为odd时表示奇数；n为even表示偶数；
<span style="color: #800000;">p:nth-of-type(odd)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果：段落1、3、5显示为红色。
<span style="color: #800000;">p:nth-of-type(even)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果：段落2、4显示为红色。
30. E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E，n 可以代表数字也可以代表字母。。
<span style="color: #800000;">p:nth-last-of-type(2)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果：段落4显示为红色。
n为odd时表示奇数；n为even表示偶数；
<span style="color: #800000;">p:nth-last-of-type(odd)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果：段落1、3、5显示为红色。
<span style="color: #800000;">p:nth-last-of-type(even)</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#f00</span>;}
结果：段落2、4显示为红色。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn