《CSS3实战》读书笔记 第三章：选择器：样式实现的标记

第三章：选择器：样式实现的标记

选择器的魔力在于，让你完全实现对网页样式的掌控。不同的选择器可以用在不同的情况下使用。总之把握的原则是：规范的编码，根据合理地使用选择器，比去背选择器的定义有价值的多。

---

标签选择器

---

最为常用的选择工具。它重新定义了浏览器对标签默认样式的解释，影响是全局性的。正是因为选择面太广，所以无法精确检选。

类选择器：精确控制

---

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里面，通过一张和文本内容宽度一致的图来做渐变。因此页面有多长，就铺到多长。