第三章：选择器：样式实现的标记
选择器的魔力在于，让你完全实现对网页样式的掌控。不同的选择器可以用在不同的情况下使用。总之把握的原则是：规范的编码，根据合理地使用选择器，比去背选择器的定义有价值的多。
标签选择器
最为常用的选择工具。它重新定义了浏览器对标签默认样式的解释，影响是全局性的。正是因为选择面太广，所以无法精确检选。
类选择器：精确控制
class选择器允许你像word程序一样控制精确选择范围——和标签无关——甚至可以指定页面上不存在的类。
- 在css中类选择器必须以
.开头，接下来必须是字母，后边可以由字母，-和_组成。className不包括. - 大小写敏感
ID选择器:特殊的页面元素
id选择器用法和class选择器差不多，主要不同点在于
- 一个页面只能存在一个id。开头用
#。 - id不是为选择器而生的，而是js脚本，后台等程序使用的标记。因此，页面设计时迫不得已使用id选择器的情况是很少的。
- 现在业界逐步摒弃把id作为选择器的用法，因为id拥有过高的权重，修改麻烦。更多原因在后面会提到。
id选择器有什么优势？
- 脚本化的css使用id可以说避免不了。
- 对于过于特殊的页面，比如下锚点，应用id不错。比如但这不是css。举例
<div id=tab></div>
...
<a href="index.html#tab">click me</a>
当点击a时，页面跳到tab上面。
群组选择器
结构群组选择器
简单的说，就是把一组各种各样的选择器用,隔开，统一应用样式。
你可以对群组使用选择器后，之后给某个群组元素再定义一套样式。这是一个很强大的工具。
通配符选择器
用*表示选中一切。
后代选择器
添加样式或者添加繁琐的class是很麻烦的事情。后代选择器提供了一种相对精确而有效的解决方案。——事实上，这是最有用的css选择器。
包括以下几个概念
- 祖先（Ancestor）
- 后代（descendent）
- 父级
- 子代
- 兄弟（sibling）
后代选择器
以下是实例
.xxx h1 strong{
color:red
}
后代选择器通常是越短越好。写多了权重就太高了。——避免无谓的权重，似乎是这本书时时渗透的观念之一。
一个常用的应用场景是，给一组页面模块加上class，然后对这个class的后代进行样式化操作。
注意以下不是后代选择器，后代选择器都是带空格的：
div.div1{...}//选取class为div1的div，下同。
div#div1{...}
子代选择器
伪（pseudo）类选择器和伪元素选择器
最常见的莫过于a标记的LVHA四大伪类。
分别代表正常，已访问，悬停，激活四种状态，在css书写顺序中，四者不可更改顺序。
接下来的选择器已经很少有人用了。
段落相关
整理一个段落有一些很方便选择器供选用，比如
p::first-line{
color: green;
}/*双冒号是CSS3书写方式，IE8不支持*/
p:first-letter{
font-size: 30px;
}/*单冒号是CSS2.1书写方式，h5也通用*/
你会看到：
无论窗口怎么变，首行，依然是首行。
其它伪类和伪元素
:focus
通常用在input输入框等表单元素。比如：
input:focus{
color: red;
}
:before
通常用在段落里边。结合content使用，content的内容加在段落最前。你可以像剧本一样给每段台词添加角色。
p:before{
content: "Hamlet:";
font-size:36px;
}/*支持IE8，也支持双冒号的写法*/
因为这是一个伪类，相应的标记在html文档中是找不到的。实际上添加进去的content是p段落的一部分。受其它伪类及p选择器样式的影响。
类似的还有:after
::selection
这又是另一个伪元素，它允许你在用鼠标拖动文本时呈现出自定义的颜色。
注意，伪元素选择器必须加双冒号。不兼容IE8及火狐，兼容火狐需要加私有前缀like this：
p::selection{
color:#ff0000;
}
p::-moz-selection{
color:#ff0000;
}
属性选择器
可以根据元素的属性（title，href,type等等）来选取需要的元素。比如
input[type="text"]{...}
img[title="logo"]{...}
a[href="http://www.xxx.com"]{...}
a[href^="http://"]{...}/*表示href以“http://”开头的元素*/
a[href$=".pdf"]{...}/*表示href以“.pdf开头的元素*/
子代选择器
:first-child、:last-child和:nth-child
选择第一个直接子代元素/最后一个直接子代元素/第n个子代元素:nth-child更加灵活，允许接受一个参数表达式，并根据计算结果返回合适的属性。这很适合做表格。
tr:nth-child(odd/even){...}
tr td:nth-child(3n+2){...}
child type 选择器
之前所说子代选择器的缺陷在于定位缺陷，而child-type选择器可以指定父元素的子元素
比如说:first-of-type指定父元素的第一个子元素（老大哥），last-of-type指定父元素的最后一个子元素（小弟弟），作为一般化可以用:nth-of-type()，括弧内指定需要的表达式。
为什么要用子代选择器？
从逻辑关系来分析，子代选择器的思想是基于结构实现的。使用它可以让你看上去更加专业，网页数据多时，也更好维护。另一方面需要注意的是，对一个标签使用了特定的css样式，会被子代所继承。所以要注意权重。
兄弟
允许你根据兄弟关系进行选择
div+p{...}
选择紧接在<div>元素之后的所有<p>元素。
:not()选择器
又名否定伪类选择器。简单示例如下：
p:not(.xxx){...}
使用否定选择器时注意有以下限制：
- 你只能使用简单选择器套用not——允许元素，通配符，class，id，伪类选择器。
- 不允许使用后代，群组，兄弟选择器
综合案例分析
作者建议养成一个习惯：在设计时，先写内联样式，完稿后再把样式剪切到外部样式中去。
以下是html骨架
<div><img src="images/banner.png" width="760" height="198" alt="CSS: The Missing Manual">
</div>
<h1>The Amazing World of CSS</h1>
<p>假文</p>
<p class="note"><strong>NOTE:</strong>假文 </p>
<h2>Who Knew CSS Had Such Power?</h2>
<p>假文</p>
<p class="note"><strong>NOTE:</strong>假文 </p>
<h3>Not Me!</h3>
<p>假文</p>
<h3>Me Neither!</h3>
<p>假文</p>
</body>
css
/*元素选择器*/
p{
color: #505050;
font-size: 1em;
font-family: "Helvetica Neue",arial,Helvetica,sans-serif;
margin-left: 100px;
}
/*群组选择器*/
h1,h2,h3{
color: #db8100;
font-family: Baskerville,"Palatino Linotype",Times,serif;
border-top:2px solid #86a100;
padding-top: 7px;
padding-left: 100px;
}
/*类选择器*/
.note{
color: #333;
border:2px dashed #db8110;
background-color: #fbf8a9;
margin-top: 25px;
margin-bottom: 35px;
padding: 20px;
}
/*后代选择器*/
.note strong{
color: #fc6512;
}
/*id选择器*/
#article{
background: #fdf8ab url(images/bg_pages.png) repeat-y center top;
padding: 0;
margin:0 auto;
width: 760px;
}
/*兄弟选择器*/
h1+p{
color: #f60;
font-size: 1.2em;
line-height: 140%;
margin-top: 20px;
}
效果：
分析：
- 页面的抬头是一张图片
- p元素没有做什么定宽右浮动，直接margin——left了事。
- 分割线通过h元素的上边界实现，因为h元素是行级标签，要实现与文本的对齐，直接一个padding-left了事。
-
.note的水平定位通过左右的margin解决。 - 本页面将背景加到body里面，通过一张和文本内容宽度一致的图来做渐变。因此页面有多长，就铺到多长。