2.选择器

选择器分组，声明分组
类选择器可以结合使用，ID选择器不行，因为ID属性不允许有以空格分隔的词列表

img[alt]{}选择img包含alt属性的img元素
a[href="www.baidu.com"]{}
a[href="www.baidu.com"][title="w3c"]{}

ID选择器和指定id属性的选择器不是一回事

h1#page-title和h1[id="page-title"]有差别

p[class~="warning"]{}根据部分属性值选择元素，等价于p.warning
[foo^="bar"]选择foo属性值以“bar”开头的所有元素
[foo$="bar"]选择foo属性值以“bar”结尾的所有元素
[foo*="bar"]选择foo属性值中包含子串“bar”的所有元素
根据属性值中子串选择元素，foo是任何属性都可以
*[lang |= "en" ]{}选择lang属性等于en或者以en开头的所有元素

后代选择器

h1 em{}

子选择器(有些时候并不想选择任意的后代元素，而是希望缩小范围，只选择另一个元素的子元素)

h1 > strong{}

选择相邻兄弟元素

h1 + p{} 同父且相邻的兄弟

伪类和伪元素

链接伪类
:link 未访问过    静态 
:visited 访问过    静态 
:focus 表示当前拥有输入焦点的元素        动态
:hover 鼠标指针停留在元素上        动态
:active 被用户输入激活的元素        动态

伪类的顺序很重要
link-visited-focus-hover-active

:first-child 选择父元素的第一个子元素    静态 

p:first-letter{}设置块级元素首字母样式
p:first-line{}设置元素中第一个文本行
h2:before{content:"|"}在每个h2元素前加一个|
h2:after{content:"|"}在每个h2元素后加一个|