css设计指南中有意思的部分

1 一般同胞选择符

标签1～标签2
标签2必须跟（不一定紧跟）在其同胞标签1后面；

---

2 通用选择符

2.1

p *{color:green;}

p标签里所包含的所有子标签会变色，而p标签里包含的内容不会；

2.2 非子选择符

section * a{color:green;}

任何section的孙子元素a会被选中，而非section的子元素a；

---

3 伪类

伪类分为UI伪类和结构化伪类

3.1 UI伪类

3.1.1 链接伪类（LoVe，HA）

a:link{};    /*链接就在那儿等着用户点击*/
a:visited{}; /*用户之前已经点击过的链接*/
a:hover{};   /*鼠标指针正悬停在该链接上*/
a:active{};  /*链接正在被点击*/

3.1.2 ：focus伪类

获取焦点时的伪类

3.1.3 :target伪类 **

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

<style>
    #more_info:target {background:#eee;}
</style>
<a href="#more_info">More INformation</a>
<h2 id="more_info">This is the information you are looking for.</h2>

3.2 结构化伪类

3.2.1 :first-child和:last-child

3.2.2 :nth-child(n) n表示一个数值，也可以使用odd和even

---

4 伪元素

4.1 ::first-letter

选择段落首字符；

4.2 ::first-line

选择文本段落的第一行；

4.3 ::before和::after

可以在特定元素前面或者后面添加特殊内容，注意：搜索引擎不会取得伪元素的信息，故不要将重要元素通过伪元素添加

---

5 box-sizing

box-sizing 有三个属性：content-box（default），border-box，padding-box；

content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内，其实就是怪异模式了~

未完续待