[CSS3技术]CSS3每日一练之选择器-结构性伪类选择器[一]

[tr][td] 本节来学习一下CSS 3.0中的结构性伪类选择器，在这之前，先来简单的回顾一下CSS
2.0中的类和伪类选择器，我们知道在CSS中，可以使用类选择器把相同的元素定义成不同的样式，譬如针对一个p元素，我们可以做如下定义：

p.left{color:#900;}
p.right{color:#090;}

然后在HTML中对p使用class属性，如下：

前端开发网(W3Cfuns.com)

<p
class="right">web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</p>

 在CSS中除了上面所属的类选择器之外，还有伪类选择器，这种选择器与类选择器的区别是，类选择器可以随便起名，而伪类选择器是固定的，也就是默认已定义好的选择器，不可随便起名。比如超链接的Hover伪类。

CSS3.0 四个最基本的结构性伪类选择器
:root
选择器
　　此选择器将绑定到页面的根元素中，所谓根元素，是指文档树中最顶层的元素，也就是部分。

[*]
[*]
[*]
[*]
[*] CSS3每日一练之选择器-结构性伪类选择器[一] |
前端开发网(W3Cfuns.com)!
[*]
[*]
[*]
[*]
[*]
[*]
[*]

:not选择器
　　如果想对某个结构元素使用样式，但是又想排除这个个元素下面的某个子元素，让它不使用此样式，可以使用它，看例子：

[*]
[*]
[*]
[*]
[*] CSS3每日一练之选择器-结构性伪类选择器[一] |
前端开发网(W3Cfuns.com)!
[*]
[*]
[*]
[*]
[*]
[*] 前端开发网(W3Cfuns.com)
[*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
[*]
[*]
[*]

:empty选择器
　　当元素内容为空白的时候，使用其所定义的样式，案例如下：

[*]
[*]
[*]
[*]
[*] CSS3每日一练之选择器-结构性伪类选择器[一] |
前端开发网(W3Cfuns.com)!
[*]
[*]
[*]
[*]
[*]
[*]
[*]

:target选择器
　　使用其选择器来对页面中的target元素（该元素的ID被当作页面中的超链接）指定的样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用，案例如下：

[*]
[*]
[*]
[*]
[*] CSS3每日一练之选择器-结构性伪类选择器[一] |
前端开发网(W3Cfuns.com)!
[*]
[*]
[*]
[*]
[*] 第一个 第二个 第三个 第四个
[*]
[*] 第一个：前端开发网(W3Cfuns.com)
[*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
[*]
[*]
[*] 第二个：前端开发网(W3Cfuns.com)
[*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
[*]
[*]
[*] 第三个：前端开发网(W3Cfuns.com)
[*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
[*]
[*]
[*] 第四个：前端开发网(W3Cfuns.com)
[*] web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
[*]
[*]
[*]

[/td][/tr]