css3高级选择器使用方法CSS3 选择器 基本选择器介绍CSS3 选择器 伪类选择器介绍CSS3 选择器 属性选择器介绍CSS3结构性伪类选择器九种写法CSS3中31种选择器使用方法教程HTML5/CSS3实现的华丽的日期选择器源码css3选择器基本介绍

css3属性选择器

css3之属性选择器，其中包括：

下面我将用实例演示它们的用法

css代码：

效果如图1：

结构性伪类选择器

1.伪类选择器

在讲伪类选择器之前，我先说下类选择器，类选择器的使用如下所示：

伪类选择器,大家看到这个术语不是很懂，楼主跟你们一样，但是看到下面的示例，立马知晓：

看到这大家顿时知道了吧，在css中我们最常用的伪类选择器是使用在a元素上。那么伪类选择器与类选择器额区别是,类选择器可以随便起名字如“p.right”，
“p.left”；但是伪类选择器是css中已经定义好的选择器，不能随便起名。

2.伪元素选择器

伪元素选择器是指并不是对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器。

在css中有下面四个伪元素选择器：

2.1.first-line伪元素选择器(它用于某个元素中的第一行文字使用样式，只能与块级元素关联)

示例如下：

2.2.first-letter伪元素选择器(向文本的第一个字母添加特殊样式,在 CSS2.1 之前，:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围，可以与任
何元素关联)

示例如下:

2.3.before伪元素选择器(在元素之前添加内容)

这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点.

示例如下:

2.4.after伪元素选择器(在元素之后添加内容)

示例如下:

3. 4个基本结构性伪类选择器

3.1.root选择器（将样式绑定到页面的根元素中）

所谓根元素，是指位于文档树的最顶层结构的元素，在html页面上就是指包含整个页面的“html”部分.

示例如下:

ps:在使用样式指定root元素与body元素的背景时，根据情况不同的指定条件，背景色的显示范围会有所变化，如上面的代码不使用root选择器来指定root元素
的背景色，只指定body元素的背景色，则整个页面就变成红色的了。

3.2.not选择器(想对某个结构使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，就使用not选择器)

示例如下:

3.3.empty选择器(指定当元素的内容为空时使用样式)

示例如下:

3.4.target选择器(使用target选择器来对页面中的某个target元素[该元素的id被当作页面的超链接类使用]指定样式，该样式只有在用户点击了页面中的超链接

，并且跳转到target元素后起作用)

示例如下:

4. 下面接着说其它几个选择器

first-child,last-child,nth-child,nth-last-child这几个选择器能够针对一个父元素中的第一个，最后一个，指定序号的子元素，甚至第偶数个，第奇数
个子元素进行样式指定。

4.1.first-child与last-child的运用，first-child在ie7开始被支持，其它现代浏览器都支持

4.2.nth-child(表示第几个元素),运用如下:

4.3.nth-last-child(表示倒数第几个元素),运用如下:

ps:nth-child与nth-last-child的序号是从1开始，当然也可以是关键词或公式。；除了对指定序号的子元素使用样式以外，还可以对某个父元素中的所有第奇
数个子元素或第偶数个子元素使用样式。

4.3.1 nth-child 对某个父元素中的所有第奇数个子元素的样式设置

4.3.2 nth-last-child 对某个父元素中的所有倒数上去的第偶数个子元素的样式设置

4.4.nth-of-type(匹配属于父元素的特定类型的第 N 个子元素的每个元素)

4.5.nth-last-of-type(配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数)

好，既然知道他们的用处，那我们直接看个列子：