Hinweise zur CSS-Auswahl

1. Elementauswahl

序号	选择器	含义
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>;
}

Bevor wir uns mit fortgeschritteneren Selektoren befassen, sollten wir den bekannten Clear-Selektor kennenlernen. Das Sternchen wählt jedes Element auf der Seite aus. Viele Entwickler verwenden es, um „Margin“ und „Padding“ zu löschen. Natürlich können Sie dies beim Üben verwenden, ich empfehle jedoch nicht, es in einer Produktionsumgebung zu verwenden. Es fügt dem Browser viele unnötige Dinge hinzu.
`*` kann auch verwendet werden, um alle untergeordneten Elemente eines Elements auszuwählen.

<span style="color: #800000;">#container * </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
}

Es werden alle Elemente unter „#container“ ausgewählt.

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>; }

Wenn Sie alle Tags auf der Seite finden möchten, verwenden Sie statt „id“ oder „class“ direkt die Tag-Auswahl.

3. .info

<span style="color: #800000;">.error </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;
}

Dies ist ein „Klassen“-Selektor. Er unterscheidet sich vom „id“-Selektor dadurch, dass er auf mehrere Elemente abzielen kann. Sie können „class“ verwenden, wenn Sie mehrere Elemente formatieren möchten. Wenn Sie ein bestimmtes Element ändern möchten, verwenden Sie „id“, um es zu finden.

4. #Fußzeile

<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>;
}

Verwenden Sie „#“ im Selektor, um ein Element anhand der ID zu suchen.

2. Multi-Element-Kombinationsauswahl

序号	选择器	含义
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>; }

Passen Sie alle a-Elemente und li-Elemente an

6. E F

<span style="color: #800000;">li a </span>{<span style="color: #ff0000;">
  text-decoration</span>:<span style="color: #0000ff;"> none</span>;
}

Nur ​​mehrere a-Elemente nach li abgleichen (einschließlich Enkelkinder)

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>;
}

Entspricht nur mehreren a-Elementen nach li (ausgenommen Enkelkinder). Der Unterschied zwischen „E F“ und „E >“ besteht darin, dass der letztere Befehl seine direkten untergeordneten Elemente auswählt. Schauen Sie sich das Beispiel unten an:

<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“ wählt nur alle direkten „ul“-Elemente unter dem „div“ mit „id“ als „container“ aus. Das „ul“-Element wird nicht unter dem ersten „li“ gefunden.

8. E F

<span style="color: #800000;">ul + p </span>{<span style="color: #ff0000;">
   color</span>:<span style="color: #0000ff;"> red</span>;
}

Dies wird als benachbarter Selektor bezeichnet. Es steuert die Auswahl der unmittelbaren Nachfolgerelemente des angegebenen Elements. Das obige Beispiel wählt den ersten Absatz nach allen „ul“-Tags aus und setzt deren Farbe auf Rot.

9. E~F

<span style="color: #800000;">ul ~ p </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;
}

Der Selektor „ul p“ wählt nur die Elemente aus, die unmittelbar auf das angegebene Element folgen. Dieser Selektor wählt alle passenden Elemente aus, die dem Zielelement folgen.

3. Beziehungsauswahl

序号	选择器	含义
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显示为红色。