《CSS3秘籍》（第三版）-读书笔记

第3章 选择器：明确设置哪些样式

每个样式（或者规则）由两个主要部分组成：选择器是告诉浏览器要格式化什么内容；声明块则列出浏览器用来给选择器定义样式的格式化指令。

1、标签选择器：整体控制

标签选择器影响着该标签在网页上的每一个位置。

2、类选择器：精准控制

当你希望某一个或某几个元素的外观与网页上其他的相关标签有所区别时，可以使用类选择器。

类选择器还可以精确控制网页上的某个具体元素，而不管它有哪些标签。

甚至可以用类选择器为有着不同HTML标签的多个元素应用相同的格式。

命名类选择器时要牢记下列规则：

• 所有类选择器的名称都必须以一个圆点（.）开头；
• CSS只允许在类名称中使用字母、数字、连字符（-）和下划线（_）;
• 在圆点之后，名称始终必须以字母开头；
• 类名称区分大小写。

3、ID选择器：控制特殊的网页元素

ID样式以#开头

4、群组选择器

如果想让一系列网页元素共用相同格式化属性中的部分属性而不是全部属性，就可以创建一个带有共用格式化选项的群组选择器，并为每个元素分别创建具有特殊样式的规则。

为了使用多个选择器成为一个群，只需要创建一个用逗号分隔的选择器列表即可。

其实群组选择器中可以使用任何一种有效的选择器（或者不同类型选择器的组合）。

CSS还提供了一种超强的群组选择器——通用选择器。*号是选择每一个标签的通用选择器标志。

甚至可以用通用选择器作为派生选择器的一部分，因此可以将某一种样式应用给从特殊网页元素派生出来的所有标签。

5、派生选择器

HTML由嵌套标签组成：标签在标签里面，甚至又在更多的标签里面。这些标签之间的关系（即它们之间如何互相嵌套）就形成了一个族谱。

其中最重要的关系如下：

• 祖先标签：当HTML标签涵盖另一个标签时，HTML就成了该标签的祖先。
• 派生标签：处于一个或多个标签内部的标签就是派生标签。
• 父标签：父标签是离另一个标签最近的祖先。
• 子标签：直接被另一个标签包围的标签就是子标签。
• 同胞标签：同一个标签的子标签被称作同胞标签，就像兄弟姐妹一样。

派生选择器允许你用HTML族谱为处在某些其他标签或者样式内的标签设置不同的样式。

创建派生选择器时，根据族谱中要设置样式的部位，把那些选择器集中到一起，注意中间要用空格隔开。让职高级别的祖先在左侧，而你真正的目标标签则在最右侧。

6、伪类和伪元素

给连接定义样式：有4个伪类，标志着连接处于以下4种状态之一：

• a:link是指访问者还没有访问到、鼠标也尚未滑到过或单击过的所有链接。
• a:visited是指依据Web浏览器的历史记录，访问者之前已经单击过的链接。
• a:hover让你在访问者的鼠标滑过链接时改变该链接的展现效果。
• a:active让你决定当访问者单击时链接的展现效果。

给段落定义样式：CSS提供了两个伪元素：first-letter和first-line，它们能够使网页具有印刷界的那些设计效果。

• 伪元素:first-letter可以创建下落的首字母，让一个首字母从接下来的段落中蹦出来，并且使用更大或者更粗的字体格式。
• 伪元素:first-lin可以用一种不同的颜色定义段落的首行，吸引读者的眼球，使文字显得更加醒目和鲜艳。

为了从伪元素中国辨别出像:hover这样的伪类，CSS3的语法修该为::first-letter和::first-line。IE8不支持双冒号的语法。

其他几个伪类和伪元素选择器：

• :focus是在访问者执行某些动作时起作用，表明他的注意力在某个网页元素上（比如，通常是通过单击，或者跳格）。

:focus选择器最适用于给访问者提供反馈，比如通过改变文本框的背景色，表明他将要在什么位置输入（单行文本域、密码域，或者多行的<textarea>方框，这些都是:focus选择器的常见目标）。

:focus选择器只对处于焦点中的元素起作用。

• :before能在指定的元素前面添加内容。用这个选择器添加文本的技术术语叫“创造内容”，因为Web浏览器在运行中创造（产生）了它。
• :after在元素的后面添加创造内容。
• ::selection是针对访问者已经在网页上选中的项目。例如，当访问者单击并拖动鼠标经过文本，浏览器就会高亮显示该文本，访问者就可以复制这些文本。

该选择器只能设置color和background-color这两个属性。

这个选择器没有单冒号版本，因此必须使用双冒号。

7、属性选择器

属性选择器可以挑选带有特殊属性的标签。

CSS没有限制属性选择器只能使用标签名称，你也可以把它们和类结合起来。

如果要更具体一点，还可以选择那些不仅共用特定属性而且带有精确属性值的属性。

在处理表单时，给属性选择器添加一个值是非常有用的。

属性选择器不仅能帮你找出具有某个特殊属性值的标签，还能选择属性值以某个特殊值开始、结束或包含该特殊值的元素。

8、子选择器

子选择器可以让你指定要的是哪个父标签的哪个子标签。

子选择器使用尖括号（>）来表示两个元素之间的关系。

CSS3还提供了一些非常具体的伪类用于选择子元素：

• :first-child伪元素让你只选择和格式化该元素中的第一个子标签。
• :last-child作用于元素的最后一个子标签。
• nth-child(value) 让你可以将表格隔行设置不同的样式，每隔三个列表设置不同的样式，或者给其他子元素的任意组合设置不同的样式。其中value是用来确定要选择哪一个子元素，最容易使用的方法是使用一个关键字：odd或even。

CSS3还提供了一些作用于带有特殊类型的HTML标签的子元素的选择器：

• :first-of-type
• :last-of-type
• :nth-of-type

9、同胞选择器

相邻同胞选择器用加号（+）把一个元素和下一个元素连接起来。

还有一个同胞选择器被称作通用的同胞组合选择器。它只是一个波浪号（~），意思是“选择这个类型中的所有同胞标签”。

10、:not()选择器

       :not()选择器也被称作否定伪类，可以帮助你选择不是其他东西的某件东西。

它具有以下局限性：

• 用:not()选择器只能使用简单的选择器。换句话说，可以使用元素选择器、通用选择器、类选择器、ID选择器或者伪类。
• 不能使用派生选择器、伪类元素、群组选择器或组合。
• 一个选择器只能使用一次:not()选择器。

第4章 用样式继承节省时间

继承是指应用在一个标签上的那些CSS属性被传到其内嵌标签的过程。

继承并不只是适用于标签样式，它对任何类型的样式都有效，因此当你应用一个类（ID、派生）样式于某个标签时，该标签中的所有标签都将会从它那里继承属性。

继承也不是万能的，有许多CSS属性根本不会传递给派生标签。

• 一般来说，影响网页元素位置的属性，或者页边距、背景颜色和元素的边框线等，都不会被继承。
• 当有样式发生冲突时，更具体的样式会胜出。

第5章 用层叠管理样式

有一套基础的CSS机制，称作层叠，它支配着样式应该如何交互，以及发生冲突时哪些样式会得到优先权。

1、如果一个标签没有应用具体的样式，当继承来的CSS属性发生冲突时，离它最近的那个祖先标签就会胜出。

根据“最近的祖先样式胜出”规则可以推断出这样的结论：有一种样式将始终在CSS族谱中称王，即任何直接应用于指定标签的样式。

2、如果东哥样式应用于某一个元素，那么Web浏览器就和合并所有这些样式的属性，只要它们不发生冲突。

3、最具体样式中的属性会胜出，但是有时候并不清楚哪一种样式最具体，所幸CSS还提供了一个公式。它根据赋给样式选择器的值来确定样式的权重值。这个计算系统是这样进行的：

• 一个标签选择器值1分
• 一个类选择器值10分
• 一个ID选择器值100分
• 一个内建样式值1000分
• 伪元素（如::first-line）通常被当作标签选择器对待，值1分
• 伪类（如:link）这被当作类对待，值10分

这个数值越大，权重就越大。

派生选择器的权重值是上述所有选择器的综合。

继承来的属性没有任何权重值。因此，即使一个标签从一个带有很大权重的样式中继承了属性，那些属性也始终会被直接应用与标签的样式所忽略。

权重相同时最后一个样式胜出。

如果外部样式表和内部样式表中的规则发生冲突时，样式表在HTML文件中所处的位置就变得非常重要了。

4、CSS还提供了一种可以完全忽略权重值的方法。只要在任何需要保护的属性后面插入!important，就可以避免它被权重更大的属性覆盖。

注意，是对个别的属性应用!important，而不是对整个样式。最后，当两个都有!important的样式应用于相同的属性时，更具体样式的!important规则就会胜出。

单靠额外添加选择器来使一个样式属性“胜出”，这种做法将会导致所谓的“权重战争”，结果致使样式名称变得十分冗长，并且错综复杂。

当今几多Web设计师喜欢用类选择器代替ID选择器，原因之一：ID选择器的功能非常强大，因此，需要更大的权重值才能将它覆盖，这经常会导致权重战争。