《CSS 设计指南》笔记（Ⅰ）

在图书馆借了这本书，讲的非常好，条理清晰，深入浅出，真的有一种和作者交流的感觉，解决了自己很多困惑，于是决定针对一些平时并不常用但是感觉会用到的知识点做一些笔记，加深印象。

一、

　　块级元素盒子会扩展到与父元素同宽，如<p><h1><ol><li>。

　　行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧，如<a><img><em><strong>。

二、不常用选择符

　　1. 特殊上下文选择符

　　　　（1）子选择符，标签1 > 标签2，标签2是标签1的子元素，标签1只能是标签2的父元素，不能是其他祖先元素

section > h2 {font-style:italic;}

　　　　（2）紧邻同胞选择符，标签1 + 标签2，标签2必须紧跟标签1

　　　　（3）一般同胞选择符，标签1 ~ 标签2，与上面相似，但不限制紧跟

　　2. 属性选择符

　　　　（1）属性名选择符

img[title] {border:2px solid blue;}

　　　　（2）属性值选择符

img[title="red flower"] {border:2px solid blue;}

　　3. 伪类

　　　　（1）:focus伪类

input:focus {border:1px solid blue;}

　　　　（2）:target伪类，如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target选中它。

<a href="#more_info">More Information</a>

<h2 id="more_info">This is the information......</h2>

#more_info:target ｛background:#eee;}

　　　　在用户单击id为more_info的元素时，为该元素添加浅灰色背景。（例子：维基百科引证中使用该伪类，否则太多引证不好分辨）

　　　　（3）结构化伪类，:first-child，:last-child，:nth-child应用于一组同胞元素中的第一个、最后一个或者某个（些）元素

ol li:first-child {color:blue;}

ol li:last-child {color:red;}

li:nth-child(3)

li:nth-child(odd)

li:nth-child(even)

　　4. 伪元素

　　　　（1）::first-letter，::first-line

p::first-letter {font-size: 300%;}

p::first-line {color: green;}

巴特西