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:在元素之后添加内容。