css设计指南-笔记2

一.特殊的上下文选择符

---

上下文选择符以空格作为分隔符，分组选择符以逗号作为分隔符
上下文选择符选择的是所有符合条件的后代元素（包括直接后代和间接后代元素）

1.子选择符 >

标签1 > 标签2
//标签2必须是标签1的子元素
//反过来，标签1必须是标签2的父元素而不是其他祖先元素
2.紧邻同胞选择符 +

标签1 + 标签2
//标签2必须紧跟其同胞标签1的后面
//标签2只代表同胞的第一个元素
3.一般同胞选择符 ~

标签1 ~ 标签2
//标签2必须跟（不一定紧跟）在其同胞标签1后面
//标签2只代表同胞的所有满足条件的元素，不包括其他子元素

如

An H2 Heading

This is paragraph 1

Paragraph 2 has a link in it.

Link
//h2 ~ a {color: red;} 只影响Link链接，而不影响a link链接。

4.通用选择符 *

1、* {color: red;} //匹配任何元素
2、p * {color: red;} //p包含的所有元素
3、section * a {color: red;} //任何是section孙子元素，而非子元素的a标签（非子选择符）
如

An H2 Heading

This is paragraph 1

Paragraph 2 has a link in it.

Link

//2选中的是a link，而非p里面的其他直接文本节点。
//3选中的是a link元素，而非Link元素。

二.伪类

---

一个冒号表示伪类，两个冒号表示css3新增的伪元素

1、UI（用户界面）伪类

在HTML元素处于某个状态时，为该元素应用css样式

链接伪类

a:link {} //链接初始状态
a:visited {} //点击过的链接（用稍浅一些的颜色）
a:hover {} //悬停时的链接
a:active {} //链接正在被点击（鼠标在元素上按下，还没有释放）
//必须按照以上顺序使用
//巧记：“LoVe？HA！”
:focus伪类

e:focus //e代表任何元素

input:focus {border: 1px solid blue;}
//表单中的文本字段在用户单击时获得焦点，此时添加一个蓝色边框

:target伪类

e:target //用户点击指向页面中其他元素的链接，那个元素就是目标，用:target选中它

more information

this is the information you are looking for

#more:target {background: #eee;}
//单击链接，转向h2元素，为h2元素添加样式。

2、结构化伪类

根据标记的结构应用样式

e:first-child //一组同胞元素中的第一个元素
e:last-child //一组同胞元素中的最后一个元素
e:nth-child(n) //一组同胞元素中的第几个元素
e:nth-child(odd/even) //一组同胞元素中的奇数或偶数元素

三.伪元素

---

e::first-letter //元素的第一个字符（用于首字符放大效果）
e::first-line //元素的第一行（长度随浏览器窗口大小的变化而改变）
e::before //在元素前面添加内容
e::after //在元素后面添加内容

25

p::before {content: "age: ";}
p::after {content: " years.";}
//age: 25 year.(注意添加空格)