CSS

CSS选择器

By timebusker on January 22, 2014

CSS 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。 如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

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

选择器分组

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。 逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。

  • 通配符选择器 CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
* {color:red;}
  • 声明分组 当为一个有多个样式的元素创建这样一个列表时会很麻烦。可以将声明分组在一起：
h1 {
    font: 28px Verdana; 
    color: white; 
    background: black;
}
  • 结合选择器和声明的分组 可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。

CSS 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

  • 结合元素选择器 p.important {color:red;}

  • CSS 多类选择器 在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

<p class="important warning">
This paragraph is a very important warning.
</p>

这两个词的顺序无关紧要，写成 warning important 也可以。

假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。

.important {font-weight:bold;}
.warning {font-style:italic;}
// 要引用这个属性时，元素需要同时标记.important.warning，否则引用失败
.important.warning {background:silver;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：

CSS ID 选择器详解

ID 选择器允许以一种独立于文档元素的方式来指定样式。ID 选择器前面有一个#号，也称为棋盘号或井号。

区分大小写、唯一性

CSS 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

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

CSS 后代选择器

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

  • 根据上下文选择元素 可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

如果您希望只对 h1 元素中的 em 元素应用样式：

h1 em {color:red;}
  • 语法解释 在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。 每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。

CSS 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

  • 选择子元素 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

如果您希望选择只作为 h1 元素子元素的 strong 元素:

h1 > strong {color:red;}

# 把第一个 h1 下面的strong元素变为红色，但是第二个 h1 中的 strong 不受影响：

CSS 相邻兄弟选择器

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

  • 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

#“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

CSS 伪类 (Pseudo-classes)

CSS 伪类用于向某些选择器添加特殊的效果。

:active：向被激活的元素添加样式。
:focus：向拥有键盘输入焦点的元素添加样式。
:hover：当鼠标悬浮在元素上方时，向元素添加样式。
:link：向未被访问的链接添加样式。
:visited：向已被访问的链接添加样式。
:first-child：向元素的第一个子元素添加样式。
:lang：向带有指定 lang 属性的元素添加样式。

CSS 伪元素 (Pseudo-elements)

CSS 伪元素用于向某些选择器设置特殊效果。

:first-letter：向文本的第一个字母添加特殊样式。
:first-line：向文本的首行添加特殊样式。
:before：在元素之前添加内容。
:after：在元素之后添加内容。

目录