CSS 选择器介绍

2016-05-20 language web css

简单介绍在 CSS 中如何选择对应的元素。

简介

最常见的就是元素选择器，也就是 DOM 中所使用的最原始元素。

html {color:black;}
h1 {color:blue;}

如果样式表中有很多样式的元素，那么可以使用分组选择器，每个选择器用逗号分隔。

h1, h2, p {color: green;}

还有一个比较特殊的通配符选择器，会直接匹配所有元素，例如 *{color: red} 会使每个元素都为红色。

类选择器

类选择器可以独立于文档元素存在，只要在元素中通过 class="XXX" 进行了标识，那么就可以通过类选择器修饰，当然，也可以在元素中指定多个类选择器，例如如下。

<html>
  <head>
    <style type="text/css">
      .important {font-weight:bold;}
      .warning {font-style:italic;}
      .important.warning {background:silver;}
    </style>
  </head>
  <body>
    <p class="important">This paragraph is very important.</p>
    <p class="warning">This is a warning.</p>
    <p class="warning important ">This paragraph is a very important warning.</p>
  </body>
</html>

其中元素中类的顺序没有关系，上述 important 类是粗体，warning 为斜体，而同时包含 important 和 warning 的所有元素添加一个红色背景。注意，除了这两个类之外，还可以有其它类，也是可以匹配的。

另外，通过 p.marked { } 为所有 class="marked" 的 p 元素指定一个样式。

ID 选择器

在元素中通过 id="XXX" 使用，样式表中则使用 # 标识。

<html>
  <head>
    <style type="text/css">
      #intro{font-weight:bold;}
    </style>
  </head>
  <body>
  <p id="intro">This is a paragraph of introduction.</p>
  </body>
</html>

虽然在使用方法上两者基本类似，但是有如下区别：

  • ID 只能使用一次，而且是仅一次，而类只要元素中存在，那么就会被渲染。
  • ID 无法使用列表，因为属性不允许以空格分割的词列表。

所以，通常来说，ID 具有特殊的含义，而且于无需直到具体元素，例如标识一个 important ID ，不需要关心其对应的是 p span h1 等等。

属性选择器

根据 HTML 的属性名称以及值进行匹配。

<html>
  <head>
    <style type="text/css">
    [title] { color:red; }
    </style>
  </head>
  <body>
    <h2 title="Hello world">Hello world</h2>
  </body>
</html>

如上，只匹配属性的 Key 为 title 的元素，另外，还可以针对属性 Key/Value 分别进行匹配，有如下几种方式。

选择器描述
[attribute]选取带有指定属性的元素。
[attribute=value]选取带有指定属性和值的元素。
[attribute~=value]选取属性值中包含指定词汇的元素。
[attribute|=value]选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。

另外，还可以使用元素+属性选择，例如。

<html>
  <head>
    <style type="text/css">
    h2[title] { color:red; }
    </style>
  </head>
  <body>
    <h2 title="Hello world">Hello world</h2>
  </body>
</html>

此时就只能选择 h2 元素下的属性。

后代/包含选择器

可以用来选择某元素后代的元素，例如只希望对 h1 元素中的 em 元素应用样式，那么可以写成 h1 em {color:red;} ，中间通过空格分开。

子元素选择器

通过大于号 > 分割，相比后代选择器，子元素选择器的范围更小，仅严格对某个元素的子元素生效。

<html>
  <head>
    <style type="text/css">
      h1 > strong {color:red;}
    </style>
  </head>
  <body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
  </body>
</html>

其中只有第一行的内容，在 <h1> 之后会紧跟着 <strong> ，也就是子元素，那么会变红；而第二行，因为中间隔着 <em> ，所以 <strong> 实际是孙子元素，也就不会被渲染为红色。

也可以将后代和子选择器结合，例如 table.company td > p 。

相邻兄弟选择器

用来选择紧接某一元素后的元素，且二者有相同父元素，通过加号 + 标识。

<html>
  <head>
    <style type="text/css">
      h1 + p {color:red;}
    </style>
  </head>

  <body>
    <h1>Heading</h1>
    <p>Paragraph A</p>
    <p>Paragraph B</p>
    <p>Paragraph C</p>
  </body>
</html>

如上，只有 Paragraph A 作为相邻兄弟元素，会变为红色。

符号解析

  • A,B 逗号，同时选择 A B 两个类。
  • A+B 加号，相邻兄弟选择器，选择紧接在另一个元素后的元素，二者有相同的父元素。
  • A~B 波浪号，前面有 A 元素的所有 B 标签，两种元素必须有相同的父元素，而且 B 元素不必紧随 A 出现。
  • A>B 大于号，这是 CSS3 特有选择器，会选择 A 元素的子元素中所有 B 元素，而 A B 是选择所有后代元素，而 A>B 只选择一代。