一起CSS

当前位置:一起CSS > CSS > 文章正文

css2高级选择器

日期:2008-11-1 分类:CSS

用 css 控制页面,必须用好选择器,否则可能会因为 css 的继承及权重等特性而得不到想要的效果。常用的 css 选择器有:标签选择器、类选择器、ID选择器。我们所见到的选择器几乎都是这三种。然而 css2 还有其他选择器,如:子选择器、相邻选择器、属性选择器,用好这些选择器,能少定义 class 或 id。那么这些 css 高级选择器怎么使用呢?

1、子选择器

子选择器,顾名思义就是选择一个元素的子元素,不包括子元素的子元素。它的符号是大于号“>”。如:

XHTML代码:

<p><a href="#">链接1</a><span><a href="#">链接2</a></span></p>

CSS代码:

p>a{
color:#ff0000;
}

你可以点击这里查看效果。

显示效果为“链接1”是红色,而“链接2”则不受影响。如果把“>”换成空格的话,那么css的继承特性会使两个 a 应用样式;如果不用子选择器的话,那就不得不给第一个 a 定义 class 或 id。

2、相邻选择器

相邻选择器就是选择相邻的标签,它的符号是“+”。这里会出现两中情况:

1)如果相邻的两个标签不同,则应用到后一个标签的第一个的标签;

2)如果相邻的两个标签相同,则应用到该标签的除第一个以外的标签(语句有点拗口,看实例能更好的理解)。

以下面的XHTML为例子:

<h2>这是标题</h2>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这是第三个段落</p>

针对第一种情况:

h2+p{
color:#ff0000;
}

查看效果。效果是第一个p为红色。

针对第二种情况:

p+p{
color:#ff0000;
}

查看效果。效果是除第一个p外的p为红色。

3、属性选择器

属性选择器是针对HTML标签中的属性进行选择的。例:

XHTML代码:

<ul>
<li><a href="http://17css.com" title="home">网站首页</a></li>
<li><a href="#" title="about">关于本站</a></li>
<li><a href="#" title="links">友情链接</a></li>
</ul>

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 的使用者正在减少,虽然速度比较慢,但这个趋势是不可避免的。

查看:869 评论:4 标签:,

相关日志

共有 4 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved