基本的选择器

后代选择器

后代选择器用于选取某元素的后代元素。以空格作为分隔 选择<div>后的<P>元素

div p
{
  background-color:yellow;
}

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

以>作为连接符号, 选择div下的直接子元素p元素为例：

div>p
{
  background-color:yellow;
}

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以符号+为连接点，选择div后面相邻的p元素

div+p
{
  background-color:yellow;
}

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以符号~为连接点，选择div后的所有相邻兄弟p元素

div~p
{
  background-color:yellow;
}

CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。

anchor伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

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

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。