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.

提示：如果标签中的内容是通过数据库查询生成的结果，那么用这种技巧再合适不过了。

因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明

性文字。

ps：原文链接http://segmentfault.com/a/1190000002426514