《CSS权威指南》双鱼书详解——第二章选择器

一、基本规则

CSS的核心特性就是能向文档中的一组元素类型应用某些规则。

二、规则结构

选择器+声明块。 h1{ color:red;background:yellow;} ，声明块由一个或多个声明组成。

三、元素选择器

文档的元素就是最基本的选择器，故叫元素选择器。

如果一个属性的值可以取多个关键字，关键字通常由空格分隔。

四、选择器分组

h1,h2,h3{CSS规则}

通配选择器 *{通配选择器}

对声明分组时，一定要在各个声明的最后使用分号。

类选择器和ID选择器   p.class{}  p#id{}

多类选择器：通常把两个类选择器连接在一起，仅可以选择同时包含这些类名的元素，类名的顺序不限。  class="urgent warning"; ID选择器不允许有以空格分隔的词列表。

属类选择器

h1[class]{color:silver;} 这种格式要求必须与属性值完全匹配。

子串匹配属性选择器  ^开头  $结尾  *包含

[foo^="bar"] 选择foo属性值以“bar”开头的所有元素。

[foo$="bar"]选择foo属性值以“bar”结尾的所有元素。

[foo*="bar"]选择foo属性值包含子串“bar”的所有元素。

[att|="val"] 选择att属性值等于val或者以val开头的所有元素。

使用文档结构

理解父子关系。

后台选择器   h1 em{color:gray;}

选择子元素 p>em{ }

相邻兄弟选择器  h1+p{  }

伪类和伪元素

1》链接伪类：：link； ：visited

2》动态伪类： ：focus 当前拥有焦点的元素  ：hover  鼠标指针停留的那个元素  ：active 鼠标点击的时候

选择第一个子元素  p：first-child {}

选择最后一子元素 p：last-child{}

选择第一行 p:first-line{}

所有的伪元素都必须放在出现该伪元素的选择器的最后面。

设置之前和之后的元素的样式

p:before{}  p:after{}