作者: gkm422  链接： http://remind.javaeye.com/blog/225293  发表时间: 2008年08月07日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

学习jquery的过程中,发现对于CSS的使用不熟悉,所以在这里载一篇介绍CSS选择符的文章,备忘.

相邻同级选择符

   

相邻同级选择符让你选择紧接在一个元素后面的同级元素。它允许你选择紧靠在一个特定元素后的元素，并对它使用样式。这些选择符的语法是用加号(+)连接同级元素。

例如，你可能希望对某些标题元素后的段落使用与其它段落不同的样式。列表A中的例子选择紧贴在h1后面的元素，即说明这个问题。这个例子还指出，选中h1元素后的第二个段落时，同级元素可以指定给第二个段落，其字体颜色设定为绿色。

虽然应用元素和它们的子或同级元素拥有许多选项，但你可能希望通过属性值对元素使用样式。

 

属性选择符

属性选择符使用一个元素的属性。也就是说，属性或指定的属性值是应用某个CSS样式的决定性因素。属性选择符共有四种用法：

  • [attribute]：只要属性存在，不管是否存在属性值，都进行匹配。
  • [attribute = value]：如果属性存在指定值，则返回一个匹配。
  • [attribute ~= value]：如果属性存在，则返回一个匹配；它包含一个由逗号隔开的属性值列表，其中含有指定的属性值。
  • [attribute |= value]：如果属性是由连字符分隔的属性值列表中的第一个值，则进行匹配。这个语法主要用于匹配由lang属性（XHMTL中的xml:lang）指定的语法子码。

列表B中的例子说明了属性选择符的用法。如果且只有它包含一个概括属性时，它才对表进行格式化；它将abbr属性值为sales的栏的字体颜色设为白色；将标题属性值为col1的表栏的背景设为黄色。（警告：这个例子在Internet Explorer中无法正常运行，但在最新版的Firefox中能够正常显示。这个网站提供CSS选择符支持的浏览器列表。）

另外，你可以组合使用多个属性选择符，以便在一个CSS规则中应用几个条件。列表C对前面的例子进行了一些修改，说明了这个问题。注意，只有abbr属性设为sales；scope属性设为col，栏标题的格式才为白色。

到现在为止，选择符主要用于处理文档树中的已有项目，但你也可以用它来处理页面标准特性以外的元素。

 

伪类

CSS支持伪元素和伪类。在CSS中，伪表示你可以对一个文档层次中不存在的，没有CSS选择符的元素使用样式。根据状态（visited, active等）对一个超链接使用样式就是一个典型的例子。下面的列表简单说明了CSS支持的伪类：

  • active：对一个活动元素使用样式。
  • focus：对一个受到关注的元素使用样式。
  • hover：当用户鼠标划过一个元素时，对它使用样式。
  • link：对一个未被访问的链接使用样式。
  • visited：对一个已被访问的链接使用样式。
  • first-child：对元素的第一个子元素使用样式。
  • lang：允许作者给特定的元素指定一种语言。

CSS1支持与链接有关的伪类(active, hover, link, visited)，CSS2增加了其它伪类。伪类的语法是使用一个逗号将伪类与元素分隔开来。列表D用伪类对锚元素，以及段落元素的第一个子元素使用样式。

你可以通过一个优秀的在线指南确定一个特殊的浏览器是否支持某个特性。CSS还支持用伪元素来处理信息。

 

伪元素

伪元素允许你对文档树中不存在的信息使用样式。大量例子说明如何对一个元素内容的首行或首字母使用样式。下面列出了CSS当前支持的伪元素：

  • first-line：允许你对一个段落的首行内容应用特殊样式。
  • first-letter：允许你对一个元素内容的首字母应用样式。你可以选择常用的印刷效果，如首字母大写和下坠大写字母。
  • before：允许你在一个元素的内容之前插入生成的内容。
  • after：允许你在一个元素的内容之后插入生成的内容。

列表E对前面的例子进行扩充，使用首行和首字母伪元素对段落使用样式。段落的第一行全部以大写字母显示。首行由浏览器和它的宽度控制。因此，你可能希望插入自己的分行符或对文本进行相应格式化来控制首行显示。另外，段落的首字母为大字斜体字，并且带下坠大写字母显示效果。

 

 


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐
  • 搜狐网站诚聘Java、PHP和C++工程师
  • 北京: 千橡集团暨校内网诚聘软件研发工程师
  • JavaEye图灵杯第2届问答大赛开始了！8月4日至8月17日，奖品丰厚！




文章来源: http://remind.javaeye.com/blog/225293