2008-06-06

细说CSS样式选择符（一）

注：此帖为转贴，原文地址：http://www.dudo.org/article.asp?id=193

英文原文：http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/
中文翻译：http://www.dudo.org/article.asp?id=193

当你学习CSS时，要学的第一个东西就是选择符（selector）。显然，选择符是CSS中最基础的部分，但是却很少有开发者能将他们物尽其用。当你使用type、ID、class等选择符来完成你的作品时，你可能还不知道除此之外还有很多很多关于它的东西要学。
熟练掌握CSS2.1中所有可用的选择符可以使我们的HTML文档更加简洁明了。可以使你最少量地使用class属性，尽量避免多余的div和span标签出现等。怎么样，听起来还不错吧？
那 么为什么并不是所有的选择符都被得到广泛地应用呢？其中一个很重要的原因就是包括Internet Exlorer 6.0在内的所有IE版本对CSS2.1支持的缺陷造成的。然而几乎所有的现代浏览器都在最大程度上支持CSS2.1中规定的选择符。在我们开始一切工作 之前我们必须意识到这些差别。
令人欣慰的是，在IE7.0对选择符的支持得到了很大程度的提高。得知这个消息后，在未来的设计中你就可以放心大胆地使用它们了，因此也有必要全面了解和掌握所有规定的选择符了（本文发表时IE7.0还在开发中 dudo注）。
由于CSS2.1中规定的选择符有很多，因此在一篇文章中想把他们解释的很清楚可能会需要很长很长的篇幅来写，所以我将从下面三个部分来分开讲解，以期这些知识简单易接受。

1、本文第一部分，讲解包括通配符、类型选择符、id、class在内的基本的选择符；
2、第二部分主要讲选择器（combinators）、联合选择符（grouping）、分组和属性选择符
3、第三部分主要讲解伪类和伪元素（pseudo-classes and pseudo-elements）
好，我们开始第一部分的讲解。

选择符基础
首先是一个最基本的知识点：CSS选择符是与文档树结构中元素匹配的一种模式。当模式中的匹配结果返回true时，CSS中声明的样式才会应用到相匹配的元素中去。以下面这个简单的CSS语句为例来说：
  1. p { color:#f00; }
选择符CSS语句中大括号“{”前面的部分。这里的选择符就是p，它将匹配文档中所有的p元素并把p元素内的文本设置为红色。这个例子很基础。

选择符概述
好，看过上面简单的例子之后，我们介绍一下其它一些选择符，现在开始已经慢慢地深入了。在开始介绍之前，还是选看一下CSS2.1所有选择符的结构吧。

CSS2.1选择符结构

  2. 选择符类型 模式 说明
  3. 通配选择符 * 匹配所有元素
  4. 类型选择符 E 匹配所有E元素
  5. 类（Class） .info 匹配所有属性class值等于info的元素
  6. ID #footer 匹配所有属性id值等于footer的元素
  7. 后代选择符 E F 匹配所有为E后代的F元素
  8. 子选择符 E > F 匹配所有为E子元素F
  9. 邻近选择符 E + F 匹配所有E的兄弟元素F
  10. 属性选择符 E[att] 匹配所有拥有att属性的E元素，与属性值无关
  11. 属性选择符 E[att=val] 匹配所有拥有att属性且值为val的E元素
  12. 属性选择符 E[att~=val] 匹配所有拥有att属性且val为属性值中一个完整单词的E元素
  13. 属性选择符 E[att|=val] 匹配拥有拥有att属性且val是其值的开始
  14. :first-child伪类 E:first-child 匹配所有处于其父元素中的第一个节点E元素
  15. 链接伪类 E:link 匹配所有未访问过的链接
  16. E:visited 匹配所有已经访问过的链接
  17. 动态伪类 E:active 匹配所有激活状态中的链接
  18. E:hover 匹配鼠标经过时的链接
  19. E:focus 匹配处于焦点状态的链接
  20. :language伪类 E:lang(c) 匹配所以语言为c的E元素
  21. :first-line伪类 E:first-line 匹配元素E中内容的第一行
  22. :first-letter伪类 E:first-letter 匹配E元素中的首字母
  23. :before 和 :after E:before 匹配在E元素前（后）插入的内容
  24. 伪类 E:after
下面我将在后面的两部分中更加详细地解释这些选择符，请继续往下看。上表中用到了一些术语，下面我简单解释一下：
后代：
在文档树结构中一个元素的子元素，子元素的子元素，直到这个元素的最底层为止。
祖先：
在文档树结构中一个元素的父元素，父元素的父元素，甚至更上一层的元素
子元素
是指在文档树结构中一个元素的直接后代，他们之间再也没有任何其他元素出现
父元素
是指在文档树结构中一个元素的直接祖先，他们之间再也没有其他任何元素出现
兄弟元素
是指和当前元素拥有同一父元素的元素

简单选择符 和 混合选择符
选择符中有两个基本的类型：简单选择符和混合选择符。
简单选择符由一个类型选择符或者通配符加上零个或者多个属性选择符，ID选择符，伪类选择符构成。下面的语句就是一个简单选择符的例子：
  1. p.info { background:#ff0 }
混合选择符由两个或者多个简单选择符通过连接符组成。下面是一个非常简单的混合选择符。
  1. div p { font-weight:bold; }
上面这条规则将会应用到所有div内的元素p上
选择符有时可能会使用伪类。在混合选择符中，伪类只能出现在最后一个简单选择符后面。

通配选择符
通配选择符用一个星号“*”来表示，它匹配文档中的所有元素。在样式表中一般很少见，但是它有时候会配合class和ID选择符一起使用。如果简单选择符中不仅仅含有通配选择符，那么“*”可以省略不写。
.myclass就等同于 *.myclass
#myid 等同于 *#myid
通配选择符的一个广泛应用就是用来把所有元素的margin和padding值设为0：
  1. * { margin:0; padding:0; }
这就是有时所说的全局空白重设

类型选择符
类型选择符匹配所有指定的元素。下面这个示例将匹配文档中所有段落元素p，并设定字段大小为2em：
  1. p {font-size:2em;}
类选择符
类选择符用点号“.”来表示，根元素的class属性值来指定元素。下面这个示例将把所有属性class为info的p元素背景设为红色：
  1. .info { background:#f00; }
你可以给一个元素设定多个类名，不过每个类名中间要用空格隔开。类选择符就可以指向拥有多个类名的元素了。下面的例子中将来定义类名既有info又有error的p元素：
  1. p.info.error { color:#900; font-weight:bold; }
注意：多类选择符IE6.0以前的版本并不支持，IE7支持。

元素类型可以不用写。下面这条语句也同样会应用到所有class为info的p元素中去：
  1. .info { background:#ff0; }
ID选择符
ID选择符用“#”来表示，根据元素的id属性值来匹配元素。下面这个规则将应用到id为info的元素中去，而不管他的类型是什么：
  1. #info { background:#ff0; }
如果同时也指定了元素类型，那么规则将只有应用到指定的类型上：
  1. p#info { background:#ff0; }
有一点一定要记住，ID选择符优先级高于class类选择符，并且在同一文档中id必须唯一。因此，ID选择符制定的样式最终只会应用到文档中的一个元素上。

待续。。。

以上就是第一部分的内容。在第二部分中，我们将学习选择、混合选择符、分组和属性选择符，在第三部分中我们将详细了解伪类和伪元素。
标签：

没有评论:

发表评论

订阅： 博文评论 (Atom)