引言

1. CSS的主要优点之一就是他能很容易地向所有同类型的元素应用一组样式。
2. 利用CSS能更容易地完成一些全局性的修改。

基本规则

每个规则都有两个基本部分：选择器（selector）和声明块（declaration block）。声明块由一个或多个声明组成（declaration），每个声明则是一个属性-值对（property-value）。每个样式表由一系列规则组成。

image-20200419082804503.png

元素选择器

文档的元素是最基本的选择器，HTML文档的选择器通常是HTML元素，如p、h3、em、a、html等。

声明和关键字

• 声明块包含一个或多个声明。
• 声明的格式为：属性+冒号(:)+值+分号(;)，见图2-1。
• 冒号和分号后面可以有0个或多个空格。
• 值是一个关键字或者一个关键字列表，关键字列表中使用空格分隔关键字。
• 声明中使用不正确的属性或者值，整个声明都会被忽略。
• 注意例外：font属性中使用斜线(/)分隔字体大小和行高的两个关键字，h2 { font: large/150% sans-serif; }

分组

选择器分组

将任意多个选择器用逗号分隔分组在一起，可以将样式同时应用于所有选择器。

CSS2引入通配符选择器（universal selector）*，可以与任何元素匹配。

声明分组

将任意多个声明放置在一个声明块中，可以同时将所有样式应用于选择器。

结合选择器和声明的分组

类选择器和ID选择器

类选择器

• 类选择器需要引用元素的class属性中的值，值区分大小写；
• 使用“.”标记类选择器，“.”前面可以限定特定元素，如 p.warning {font-weight: bold;}；
• 多类选择器：多个类选择器链接在一起使用，选择同时包含所有类名的元素（类名链接的顺序不限）。

ID选择器

• ID选择器需要引用元素的id属性中的值，值区分大小写；
• 使用“#”标记ID选择器，#warning {font-weight: bold;}；

类选择器还是ID选择器

• ID值具有唯一性；
• ID选择器不能结合使用。

属性选择器

简单属性选择

• 使用“[属性名称]”标记属性选择器；
• 多属性选择器：多个属性选择器链接在一起使用，选择同时包含所有属性名的元素（属性名链接的顺序不限）。
• 具体属性值选择：使用[属性名称=“XXXX”]选择属性值等于XXXX的所有元素；
• 部分属性值选择：使用[属性名称~=“XXXX”]选择属性值列表中包含XXXX属性值的元素；
• 部分属性值选择：使用[属性名称^=“XXXX”]选择属性值以XXXX开头的所有元素；
• 部分属性值选择：使用[属性名称$=“XXXX”]选择属性值以XXXX结尾的所有元素；
• 部分属性值选择：使用[属性名称*=“XXXX”]选择属性值包含XXXX子串的所有元素。
• 部分属性值选择：使用[属性名称|=“XXXX”]选择属性值等于或者以XXXX开头的所有元素。

使用文档结构

• 理解父子关系
• 后代选择器：空格( )，有顺序要求
• 子代选择器：大于号(>)，有顺序要求
• 相邻兄弟选择器：加号（+），有顺序要求

伪类和伪元素

伪类选择器

• 链接伪类：(:link)、(:visited)
• 动态伪类：(:focus)、(:hover)、(:active)；
• 伪类的顺序很重要，一般为link-visited-focus-hover-active
• 动态伪类的实际问题：效果可能跟预想不一致，需要验证；
• 选择第一个子元素：p:first-child，选择作为某元素第一个子元素的p元素；
• 根据语言选择：:lang(fr)选择所有法语元素
• 结合伪类：可以在同一个选择器中结合使用伪类，顺序并不重要。

伪元素选择器

• 设置首字母样式：(:first-letter)
• 设置第一行样式：(:first-line)
• 设置之前的样式：(:before)
• 设置之后的样式：(:after)

小结