css2高级选择器

用 css 控制页面，必须用好选择器，否则可能会因为 css 的继承及权重等特性而得不到想要的效果。常用的 css 选择器有：标签选择器、类选择器、ID选择器。我们所见到的选择器几乎都是这三种。然而 css2 还有其他选择器，如：子选择器、相邻选择器、属性选择器，用好这些选择器，能少定义 class 或 id。那么这些 css 高级选择器怎么使用呢？ 1、子选择器 子选择器，顾名思义就是选择一个元素的子元素，不包括子元素的子元素。它的符号是大于号“>”。如： XHTML代码：

链接1链接2

CSS代码： p>a{ color:#ff0000; } 你可以点击这里查看效果。 显示效果为“链接1”是红色，而“链接2”则不受影响。如果把“>”换成空格的话，那么css的继承特性会使两个 a 应用样式；如果不用子选择器的话，那就不得不给第一个 a 定义 class 或 id。 2、相邻选择器 相邻选择器就是选择相邻的标签，它的符号是“+”。这里会出现两中情况： 1）如果相邻的两个标签不同，则应用到后一个标签的第一个的标签； 2）如果相邻的两个标签相同，则应用到该标签的除第一个以外的标签（语句有点拗口，看实例能更好的理解）。 以下面的XHTML为例子：

这是标题

这是第一个段落

这是第二个段落

这是第三个段落

针对第一种情况： h2+p{ color:#ff0000; } 查看效果。效果是第一个p为红色。 针对第二种情况： p+p{ color:#ff0000; } 查看效果。效果是除第一个p外的p为红色。 3、属性选择器 属性选择器是针对HTML标签中的属性进行选择的。例： XHTML代码：

• 网站首页
• 关于本站
• 友情链接

CSS代码： a[title]{ text-decoration:none; } a[title="home"]{ color:#ff0000; } 查看效果 a[title] 是选择定义了 title 属性的 a 标签，a[title="home"] 是选择定义了 title="home" 的a标签。另：属性可以不加双引号，也可以是单引号，如 a[title="home"] 也可以写成 a[title=home] 或 a[title='home'] 。 从例子中可以看到这三个选择器确实能减少网页中的class或id，但遗憾的是 IE6 均不支持。万恶的 IE6 。不过 IE6 的使用者正在减少，虽然速度比较慢，但这个趋势是不可避免的。