CSS学习笔记(三) CSS选择器

1.为文档添加样式的三种方法

行内样式（写在特定 HTML 标签的 style 属性里）
嵌入样式（嵌入的 CSS 样式是放在 HTML 文档的 head 元素中）
链接样式
在创建包含多个页面的网站时，需要把样式集中在一个单独的文件里，这个文件就叫 样式表。样式表其实就是一个扩展名为 .css 的文本文件。可以在任意多个 HTMl 页面中链接同一个样式表文件，每个页面中只需加入类似下面的一行代码即可：
<link href="styles.css" rel="stylesheet" type="text/css" />

除了以上三种为页面添加样式的方法，还有一种在样式表中链接其它样式表的方法，那就是应用 @import 指令。就像这样：@import url(css/styles2.css).
要注意的是， @import 指令必须出现在样式表中其他样式之前，否则 @import 引用的样式表不会被加载。

2.CSS规则命名惯例

CSS 规则由 选择符 和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成：属性和值。属性指出要影响元素哪方面的样式，值就是属性的一个新状态。

图片描述

对于这个基本的结构，有三种方法可以进行扩展：

多个声明包含在一条规则里
多个选择符组合在一起
多条规则应用给一条选择符

所有用于选择特定元素的选择符又分三种：

上下文选择符（基于祖先或同胞元素选择一个元素）
ID和类选择符（基于 id 和 class 属性的值选择的元素）
属性选择符（基于属性的有无和特征选择元素）

3.上下文选择符

格式：标签 1 标签 2 {声明}
示例：article p {font-weight:bold;}
说明：标签2就是我们想要选择目标，而且只有在标签 1 是是其祖先元素（不一定是父元素）的情况下才会被选中。

上下文选择符，严格来讲（也就是 CSS 规范里），叫后代组合式选择符（ descendant combinator selector），就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。

提示：请记住，上下文选择符以空格作为分隔符，而分组选择符则以逗号作为分隔符。

4.特殊的上下文选择符

4.1 子选择符 >

格式：标签 1 > 标签 2
示例：section > h2 {font-style:italic;}
说明：标签 2 必须是标签 1 的子元素，或者反过来说，标签 1 必须是标签 2 的父元素。与常规的上下文选择符不同，这个选择符中的标签 1 不能是标签 2 的父元素之外的其他祖先元素。

4.2 紧邻同胞选择符 +

格式：标签 1 + 标签 2
示例：h2 + p {font-variant:small-caps;}
说明：标签 2 必须紧跟在其同胞标签 1 的后面。

4.3 一般同胞选择符 ~

格式：标签 1 ~ 标签 2
示例：h2 ~ a {color:red;}
说明：标签 2 必须跟（不一定紧跟）在其同胞标签 1 后面。

4.4 通用选择符 *

格式：* {...}
示例：* {color:green;}
说明：上面示例会导致所有元素（的文本和边框）都变成绿色。
不过，一般在使用 * 选择符时，都会同时使用另一个选择符。
例如：p * {color:red;} // 这样只会把p包含的所有元素的文本变成红色。
还有一个非常有意思的用法，即用它构成非子选择符：
例如：section * a {font-size:1.3em;}
这样，任何是 section 孙子元素，而非子元素的 a 标签都会被选中。至于 a
的父元素是什么，没有关系。
总之，只有一个标签名的选择符会选中页面中所有相同标签的实例。而通过上下文
选择符，则可以指定标签必须具备相应的祖先或同胞。

5.ID 和类选择符

ID 和类为我们选择元素提供了另一套手段，利用它们可以不用考虑文档的层次结构。

注意：可以给 id 和 class 属性设定任何值，但不能以数字或特殊符号开头。

5.1 类属性

5.1.1 类选择符

格式：.类名
示例：.specialtext {font-style:italic;}

5.1.2 标签带类选择符

格式：标签名.类名
示例：p.specialtext {color:red;}

5.1.3 多类选择符

格式：.类名.类名
示例：.specialtext.featured {font-size:120%;}
说明：CSS选择符的两个类名之间没有空格，因为我们只想选择同时具有这两个类名的的那个元素。如果加了空格，那就变成了“祖先/后代”关系的上下文选择符了。

提示：不要像使用 ID 一样，每个类都指定一个不同的类名，然后再为每个类编写规则。如果你确实有这种随意使用类的习惯，那说明你可能想大多数对 CSS 充满激情的初学者一样，还不了解继承和上下文选择符的作用。 于是，你可能会给每个标签都重复写同样的样式（比如为页面中很多标签分别指定相同的字体）。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的 CSS 量。

5.2 ID属性

格式：#ID名 或 标签名#ID名
示例：#specialtext {CSS 样式声明 } 或 p#specialtext {CSS 样式声明 }

提示：ID还可以用于页内导航。 例如：<a href="#bio">Biography</a>，注意 href 属性值开头的 # ，它表示这个链接的目标在当前页面中，因而不会触发浏览器加载页面（如果没有 #，浏览器就会尝试加载 bio 目录下的默认页面了）。如果链接的 href 属性里只有一个 #，那么点击该链接会返回页面顶部。例如：<a href="#">Back to Top</a>，换句话说，要写一个“返回顶部”链接，根本不需要 ID 为 # 的目标元素。

注意：如果暂时不知道某个 href 应该放什么 URL，也可以用 # 作为占位符，但不能把该属性留空。 因为 href 属性值为空的链接的行为跟正常链接不一样。这样，团队中的其他人将来可以用中间层（比如 PHP）变量替换 #，以便动态接收来自数据库的 URL。

6.属性选择符

6.1 属性名选择符

格式：标签名[属性名]
示例：img[title] {border:2px solid blue;}

提示：一般来说，人们经常给 alt 和 title 属性设定相同的值。 alt 属性中的文本会在图片因故未能加载时显示，或者由屏幕阅读器朗读出来。而 title 属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。

6.2 属性值选择符

格式：[属性名="属性值"]
示例：img[title="red flower"] {border:4px solid green;}
说明：在 HTML5 中，属性值的引号可加可不加，在此为了清楚起见，建议添加。

7.伪类

伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是 selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。

伪类可以分为两种：

UI（ User Interface，用户界面）伪类会在 HTML 元素处于某个状态时（比如鼠标
指针位于链接上），为该元素应用 CSS 样式。
结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第
一个或最后一个），为相应元素应用 CSS 样式。

7.1 UI伪类

7.1.1 链接伪类

针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。

Link
Visited
Hover
Active

提示：由于这4个伪类的特指度相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期效果。方便记忆：LoVe? HA! 大写字母就是每个伪类的头一个字母。

提示：一个冒号（ : ）表示伪类，两个冒号（ :: ）表示 CSS3 新增的伪元素。

7.1.2 :focus伪类

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。
例如：input:focus {border:1px solid blue;}
上面一行代码会在光标位于 input 字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。

7.1.3 :target伪类

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（ target），可以
用:target 伪类选中它。
例如：对于这个链接：<a href="#more_info">More Information</a>
位于页面的其它地方、ID 为 more_info 的那个元素就是目标。
假设该元素为这样：<h2 id="more_info">This is the information you are looking for.</h2>
那么，CSS规则：#more_info:target {background:#eee}
会在用户单击链接转向 ID 为 more_info 的元素时，为该元素添加灰色背景。

维基百科在其引证中大量使用了:target 伪类。维基百科的引证链接就是正文里那些
不起眼的数字链接。引证本身则位于长长的页面的最下方。如果没有:target 应用的
突出显示，很难知道你点击的链接对应着一大堆引证中的哪一个。

7.2 结构化伪类

结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。

7.2.1 :first-child和:last-child

格式：
e:first-child
e:last-child
示例：ol.results li:first-child {color:blue;}

7.2.2 :nth-child

格式：e:nth-child(n)
示例：li:nth-child(3)
说明：e 表示元素名，n 表示一个数值（也可以使用 odd 或 even）

8.伪元素

顾名思义，伪元素就是你的文档中若有实无的元素。

8.1 ::first-letter伪元素

格式：e::first-letter
示例：p::first-letter {font-size:300%;}

提示：如果不用伪元素创建这个首字符放大效果，必须手工给该字母加上标签，
然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。

8.2 ::first-line伪元素

格式：e::first-line
示例：p::first-line {font-variant:small-caps;}
说明：选中文本段落（一般情况下是段落）的第一行。

8.3 ::before和::after伪元素

格式：
e::before
e::after
示例：
对标记：
<p class="age">25</p>
添加如下样式：
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
会得到如下结果：
Age: 25 years.

提示：如果标签中的内容是通过数据库查询生成的结果，那么用这种技巧再合适不过了。
因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明
性文字。

参考资料

CSS设计指南