基本规则

每个规则都有两个基本部分：选择器（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)

2020-04-19 CSS权威指南第三版-第02章-选择器