后代选择器与子代选择器

【后代选择器】

写法：选择器1 选择器2 选择器3……{} ，每个选择器之间使用空格分隔。

代码示例：

div .li{color: yellow;}

div .li{} 是指选中的元素包括div里面的class="li"的元素，其中class="li"的元素能是div的子代，也能是div的后代（也就是孙代及往后）。

【子代选择器】

写法：选择器1>选择器2>选择器3……{} ，每个选择器之间使用大于号分隔。

代码示例：

div>ul{color: blue;}

div>ul{} 则ul必需是div的直接子代，孙代以后选不中。

交集选择器与并集选择器

【交集选择器】

写法：选择器1选择器2……{} ，选择器之间没有分隔符。

代码示例：

.list#li{

color: red;

}

.list#li{} 元素必需同时具有class="list"并且id="li"样式才可以生效。

【并集选择器】

写法：选择器1,选择器2,……{} ，选择器之间使用逗号分隔。

代码示例：

.li,#li{

color: red;

}

.li,#li{} 元素只需具有class="li"或者者id="li"，样式就可生效。

伪类选择器

写法：选择器名称:伪类状态{}

代码示例：

a:hover{

color: red;

}

常见的伪类状态：

link-未访问状态；

visited-已访问状态；

hover-鼠标指向时，即悬停在元素上方时；

active-激活选定状态（鼠标点下去没松开）；

focus-取得焦点时（input常使用）。

超链接多种伪类共存时的顺序：link(visited)-hover-active

选择器的命名规则及优先级

1、选择器的命名规则

a）只可以有字母、数字、下划线组成，不可以有其余任何特殊字符。

b）开头不可以是数字。（即只可以以字母下划线开头）

2、选择器的优先级

a）第一准则：“近者优先”，最内层选择器永远比外层优先。

例如： div ul li > div #ul，li在ul内层，所以li标签选择器可以覆盖外层id选择器。

b）当作使用在同一层时，ID选择器>class选择器>标签选择器

例如：div #li > div ul .li > div ul li

c）当最终作使用在相同元素时，选择器的范围越准确，优先级越高。

例如：div ul .li > div .li

d）当优先级完全相同时，写在后面的选择器，会覆盖前面的选择器。

e）除以上准则外，CSS 中还有一个特殊样式规则!important，!important作使用是提高指定CSS样式规则的应使用优先权。当 !important 规则被应使用在一个样式公告中时，该样式公告会覆盖CSS中任何其余的公告, 无论它处在样式列表中的哪里，但我们并不推荐用!important，由于它会使你的页面难以修改调试。

3、在用!important时需要注意：

a）永远不要在应使用于全站的CSS上用 !important。

b）只在需要覆盖全站或者外部 CSS的特定页面中用 !important。

c）要通过优化选择器的优先级来处理问题而不是用 !important。