《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也通用*/

你会看到:

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

无论窗口怎么变,首行,依然是首行。

其它伪类和伪元素

:focus

通常用在input输入框等表单元素。比如:

input:focus{
color: red;
}

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

: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;
}

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

属性选择器


可以根据元素的属性(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;
}

效果:

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

分析:

  • 页面的抬头是一张图片
  • p元素没有做什么定宽右浮动,直接margin——left了事。
  • 分割线通过h元素的上边界实现,因为h元素是行级标签,要实现与文本的对齐,直接一个padding-left了事。
  • .note的水平定位通过左右的margin解决。
  • 本页面将背景加到body里面,通过一张和文本内容宽度一致的图来做渐变。因此页面有多长,就铺到多长。
上一篇:《Linux内核设计与分析》第六周读书笔记——第三章


下一篇:《Linux内核设计与实现》读书笔记 第三章 进程管理