CSS选择器

CSS 元素选择器

元素选择器又称为类型选择器（type selector）。

例：html {color:black;}h1 {color:blue;}h2 {color:silver;}CSS 元素选择器（类型选择器）也可以设置 XML 文档中元素的样式：案例：CSS设置XML中的文档样式
选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}


声明分组
我们可以将声明分组在一起：
h1 {font: 28px Verdana; color: white; background: black;}

注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。


通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

例如，下面的规则可以使文档中的每个元素都为红色： 
* {color:red;}
它能使文档中所有元素的 color 属性值指定为 red。

CSS 类选择器
在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。

为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。

<h1 class="important">This heading is very important.</h1><p class="important">This paragraph is very important.</p>

结合元素选择器
类选择器可以结合元素选择器来使用。
例如，您可能希望只有段落显示为红色文本：
p.important {color:red;}

CSS 多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。
例如：
<p class="important warning">This paragraph is a very important warning.</p>
词语无顺序关系。

那么多类的效果是什么样的呢？

看这个例子：亲自试一试

这个我是不会用它的，不好用，容易出现冲突。

CSS ID 选择器
ID 选择器前面有一个 # 号

请看下面的规则：
*#intro {font-weight:bold;}
与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：
#intro {font-weight:bold;}

与类不同，在一个 HTML 文档中，一个 ID 选择器只会使用一次。

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

请注意，类选择器和 ID  选择器可能是区分大小写的。这取决于文档的语言。

HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。


CSS 属性选择器
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。

简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

如果您希望把包含标题（title）的所有元素变为红色，可以写作：
[title] {color:red;}
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}

注：HTML 标签可以拥有属性。如标签 <a> href，标签 <table> 的 border，标签<img>的 alt等。
为 XML 文档使用属性选择器
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：
planet[moons] {color:red;}

根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
使用方法和 简单属性选择器 一样，也同样适用于XML。
属性与属性值必须完全匹配
如果属性值包含用空格分隔的值列表，匹配就可能出问题。

那么可以用下面的方法：
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}

部分值选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说，p.important 和 p["important"] 应用到 HTML 文档时是等价的。
但是 部分值选择器 能用于任何属性，而不只是 class，而类选择器就不能用于普通标签的 属性。

更高级的选择器模块：
子串匹配属性选择器
下表是对这些选择器的简单总结：
类型描述[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素
有点像数据库中的模糊查询。
提示：任何属性都可以使用这些选择器。

最后介绍：
特定属性选择类型
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
因此，以下示例中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p><p lang="en-us">Greetings!</p><p lang="en-au">G'day!</p><p lang="fr">Bonjour!</p><p lang="cy-en">Jrooana!</p>

这种属性选择器最常见的用途还是匹配语言值。
最后对 属性选择器 的用法做一个总结：
选择器描述[attribute]用于选取带有指定属性的元素。[attribute=value]用于选取带有指定属性和值的元素。[attribute~=value]用于选取属性值中包含指定词汇的元素。[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。[attribute^=value]匹配属性值以指定值开头的每个元素。[attribute$=value]匹配属性值以指定值结尾的每个元素。[attribute*=value]匹配属性值中包含指定值的每个元素。

CSS 后代选择器
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中。

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
因此，ul em 将会选择以下标记中的所有 em 元素：
<ul>  <li>List item 1    <ol>      <li>List item 1-1</li>      <li>List item 1-2</li>      <li>List item 1-3        <ol>          <li>List item 1-3-1</li>          <li>List item <em>1-3-2</em></li>          <li>List item 1-3-3</li>        </ol>      </li>      <li>List item 1-4</li>    </ol>  </li>  <li>List item 2</li>  <li>List item 3</li></ul>
CSS 子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1>

CSS 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}

实例;相邻兄弟选择器

但是，如果在 h1 标签与 其后的 p 标签中间添加一个 其他标签 如 h2呢，相邻兄弟选择器 将会失效。

更多的关于相邻兄弟选择器的语法，见W3cschool：相邻兄弟选择器


CSS 伪类 (Pseudo-classes)

锚伪类
链接的不同状态：

a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

伪类可以与 CSS 类配合使用：
a.red : visited {color: #FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过，那么它将显示为红色。

伪类
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
  属性描述CSS:active向被激活的元素添加样式。1:focus向拥有键盘输入焦点的元素添加样式。2:hover当鼠标悬浮在元素上方时，向元素添加样式。1:link向未被访问的链接添加样式。1:visited向已被访问的链接添加样式。1:first-child向元素的第一个子元素添加样式。2:lang向带有指定 lang 属性的元素添加样式。2

CSS 伪元素 (Pseudo-elements)
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
实例
p:first-line  {  color:#ff0000;  font-variant:small-caps;  }
亲自试一试
注释："first-line" 伪元素只能用于块级元素。

:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p:first-letter  {  color:#ff0000;  font-size:xx-large;  }
亲自试一试
注释："first-letter" 伪元素只能用于块级元素。
伪元素和 CSS 类
伪元素可以与 CSS 类配合使用：
p.article:first-letter  {  color: #FF0000;  }<p class="article">This is a paragraph in an article。</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。

也结合多个伪元素来使用：
p:first-letter  {  color:#ff0000;  font-size:xx-large;  }p:first-line  {  color:#0000ff;  font-variant:small-caps;  }
CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入一幅图片：
h1:before  {  content:url(logo.gif);  }
亲自试一试
CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
h1:after  {  content:url(logo.gif);  }
亲自试一试