CSS 选择器

后代选择器：

h1 em {color: red;}

上面这个规则会把作为h1元素后代的em元素的文本变成红色。其他 em文本（如段落或块引用中的em）则不会被这个规则选中：

<h1> This is a <em>important</em>heading<./h1>

<p> This is a <em>important</em> paragraph</p>

子元素选择器：

h1 > strong {color: red;}    (子选择器使用了大于号，也叫子结合符，两边可以空白)

这个规则会把第一个h1下面的strong元素变为红色，但是第二个h1中的strong不受影响：
<h1> This is <strong>very</strong><strong>very</strong> important</h1>

<h1> This is<em>really<strong>very</strong></em>important</h1>

结合后代选择器和子选择器：

table.company td > p

上面的选择器会选择作为td元素的子元素所有p元素，这个td元素本身从table元素继承，该table元素有一个包含company的class属性。

相邻兄弟选择器：

h1 + p {margin-top: px;}
这个选择器读作： 选择紧接在h1元素后出现的段落， h1和p元素拥有共同的父元素。

子选择器结合相邻兄弟选择器：

html > body table + ul {margin-top: 20px;}

选择紧接在table元素后出现的所有兄弟ul元素，该table元素包含在一个body元素中，body元素本身是html元素的子元素。4

在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括： 活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a: link {color: #FF0000;}  /* 未访问的链接*/

a: visited {color: #00FF00;} /* 已访问的链接*/

a: hover {color: #FF00FF;} /* 鼠标移动到链接上*/

a: active {color: #0000FF;} /* 选定的链接*/

在CSS定义中。 a:hover 必须被置于 a: link 和 a:visited之后，才是有效的。

a: active 必须被置于a: hover之后才是有效的。

CSS2 : first-child 伪类

<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

若规则如下

p: first-child { font-weight: bold;}

li: first-child {text-r=transform: uppercase;}

第一个规则将作为某元素的第一个子元素的所有p元素设置为粗体，第二个规则将作为某个元素第一个子元素的所有li元素变成大写。