css设计指南-笔记2

一.特殊的上下文选择符

---

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

1.子选择符 >

标签1 > 标签2
//标签2必须是标签1的子元素
//反过来，标签1必须是标签2的父元素而不是其他祖先元素

2.紧邻同胞选择符 +

标签1 + 标签2
//标签2必须紧跟其同胞标签1的后面
//标签2只代表同胞的第一个元素

3.一般同胞选择符 ~

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

如
	<h2>An H2 Heading</h2>
	<p>This is paragraph 1</p>
	<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
    <a href="#">Link</a>
//h2 ~ a {color: red;} 只影响Link链接，而不影响a link链接。

4.通用选择符 *

1、* {color: red;}		//匹配任何元素
2、p * {color: red;}	//p包含的所有元素
3、section * a {color: red;}	//任何是section孙子元素，而非子元素的a标签（非子选择符）
如
<section>
	<h2>An H2 Heading</h2>
	<p>This is paragraph 1</p>
	<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
    <a href="#">Link</a>
</section>
//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选中它

<a href="#more">more information<a>
<h2 id="more">this is the information you are looking for</h2>
#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			//在元素后面添加内容

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