前端工作半年了,算上大学也接触了CSS很久,但是学得还是太过零零散散。CSS3已经面世很久了,但是对于基础的CSS2仍然还有不少漏洞,因此决定好好读一下《CSS权威指南》,以弥补前端页面样式方面的不足,为实现更好的设计打下基础。


规则结构

例如:

h1 {color:red;bacgroud: yellow}

其中包括了左侧的选择器,大括号内为声明块,用分将每个声明分开,而声明中冒号左侧为属性,右侧为值。

选择器的分类

元素选择器

div {color: red}

通配选择器

* {color: red}

类选择器

.warning {color: red}

ID选择器

#warning {color: red}

可以将不同选择器结合在一起

p#warning.warning {color: red}

属性选择器

简单属性选择:

h1[class] {color: red}

根据属性的值选择:

h1[class="1"] {color: red}

当属性值为多个时,选择器也可以用空格分隔选择

h1[class="class1 class2"] {color: red}
  • [foo^=”bar”] 选择foo属性以”bar”开头的所有元素
  • [foo$=”bar”] 选择foo属性以”bar”结尾的所有元素
  • [foo*=”bar”] 选择foo属性值中包含子串”bar”的所有元素

不同浏览器对于子串选择器的支持不同

特殊属性选择器 [att|=”val”] 可以用于任何属性及其值,选择att属性等于var或者以val-开头的所有元素,常用语匹配语言值。

后代选择器

html p {color: red}

子元素选择器

body > p {color: red}

相邻兄弟选择器

h1 + p {color: red}

伪类选择器和伪元素选择器

伪类选择器

伪类名 描述
:link 作为一个超链接(拥有href属性)并指向一个人未访问地址的所有锚。注意,有些浏览器可能会不振如果缺的解释为指向任何超链接,包括已访问和未访问的
:visited 已访问的所有锚
:focus 拥有输入焦点的元素
:hover 鼠标指针停留在元素时的选择器
:active 被用户输入激活的元素,例如被点击的超链接或者按钮等

伪类的顺序很重要,这一点最初可能不太明显。通常的建议是”link-visited-hover-active”,不过现在已经改为”link-visited-focus-hover-active”

伪类名 描述
:first-child 作为第一个子元素的选择器,应用在被第一个元素上,而不是应用在包含诸多元素的父元素上
:lang() 根据语言选择,例如法语:lang(fr)

伪类可以结合使用,例如:

a:link:hover {color: red;}
a:visited:hover {color: marron;}

要当心,不要把互斥的伪类结合在一起,例如:

a:link:visited
伪类名 描述
:first-letter 设置块级元素首字母的样式
:first-line 设置第一行的样式

这两种选择器的属性并不是所有属性,而是有限制的,具体可以上查询

设置之前和之后的样式

伪类名 描述
:before 插入生成的内容在被选择的元素之前,并设置内容
:after 与before类似,只是在元素之后

声明和关键字

关键字必然是属性的值的关键字组中的一个,如果这个关键字不是属性的值的关键字组中的任何一个,那么这条声明将被忽略。

声明的值可能是一个,也可能是多个。当值为多个时,一般都用空格隔开。例如:

h1 {border: 1px solid black}

这些值的顺序是可以调换的,当然有建议的值顺序,方便阅读和开源。

唯一列外的就是font属性,font属性只有一种情况可以使用斜线(/)来分个两个特定的关键字。例如:

h2 {font: large/150% sans-serif;}

斜线分割了用来设置元素的字体大小和行高的两个关键字。只有在这里才允许font声明中出现斜线。font允许的其他所有关键字都用空格分隔。

分组

选择器分组

可以将不同选择器应用相同的样式。例如:

h1, p{color: red}

可以让h1和p元素的颜色都变成红色

声明分组

将不同的声明应用到同一个选择器上。例如

h1 {
    font: 18px;
    color: purple;
}

除了最后一行的分号可以省略之外,其他的分号均不能省略。最后一个分号虽然省略仍然生效。但比较好的建议是写分号以保持规范性。

结合选择器和声明的分组

将两种分组结合起来,可以提高样式的表达能力。将声明分组中的每一个声明应用到选择器分组中的每一个选择器上。例如:

h1, p {
    color: red;
    font: 18px;
}

总结

选择器对于编写CSS来说至关重要,关乎代码风格,关乎响应速度,关乎阅读难度,关乎渲染性能等等。现在也有不少的CSS代码风格,例如BEM等等,日后会深度学习并进行理解。