CSS选择器笔记

一、元素选择符

序号	选择器	含义
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 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 style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><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 style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>         <span style="color: #0000ff;"><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 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 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 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></span></span></span></span></span></span></span></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 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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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></span></span></span></span></span></span></span></span></span></span></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 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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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></span></span></span></span></span></span></span></span></span></span></span>

这个`~`符号可以定位那些某属性值是空格分隔多值的标签（因此只有外部链接是红色字体）。

13. E[att|=val]

选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><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 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 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 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 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 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></span></span></span></span></span></span></span></span></span>

因此只有项目3为红色。

14. E[att^="val"]

选择具有att属性且属性值为以val开头的字符串的E元素。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><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 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 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 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 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 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></span></span></span></span></span></span></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 style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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 style="color: #800000;">li</span><span style="color: #0000ff;">><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></span></span></span></span></span></span></span></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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><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 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 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 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 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></span></span></span></span></span></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 style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><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 style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>    <span style="color: #0000ff;"><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 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 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></span></span></span></span></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 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 style="color: #800000;">div</span><span style="color: #0000ff;">><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 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 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 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 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 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></span></span></span></span></span></span></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显示为红色。