CSS中的伪类选择器、颜色、度量单位、文本字体及文本样式设置

1、伪类选择器

伪类选择器总汇

伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：

选择器	名称	说明	CSS版本
:root	根元素选择器	选择文档中的根元素	3
:first-child	子元素选择器	选择元素中第一个子元素	2
:last-child	子元素选择器	选择元素中最后一个子元素	3
:only-child	子元素选择器	选择元素中唯一子元素	3
:only-of-type	子元素选择器	选择指定类型的唯一子元素	3
:nth-child(n)	子元素选择器	选择指定 N 个子元素	3
:enabled	UI 选择器	选择启用状态的元素	3
:disabled	UI 选择器	选择禁用状态的元素	3
:checked	UI 选择器	选择被选中 input 勾选元素	3
:default	UI 选择器	选择默认元素	3
:valid	UI 选择器	验证有效选择 input 元素	3
:invalid	UI 选择器	验证无效选择 input 元素	3
:required	UI 选择器	有 required 属性选择元素	3
:optional	UI 选择器	无 required 属性选择元素	3
:link	动态选择器	未访问的超链接元素	1
:visited	动态选择器	已访问的超链接元素	1
:hover	动态选择器	悬停在超链接上的元素	2
:active	动态选择器	激活超链接上的元素	2
:foucs	动态选择器	获取焦点的元素	2
:not	其他选择器	否定选择的元素	3
:empty	其他选择器	选择没有任何内容的元素	3
:lang	其他选择器	选取包含 lang 属性的元素	2
:target	其他选择器	选取 URL 片段标识指向元素	3

结构性伪类选择器

结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。

根元素选择器

:root {
	border: 1px solid red;
}

解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。

子元素选择器

ul > li:first-child {
	color: red;
}

解释：选择第一个子元素。

ul > li:last-child {
	color: red;
}

解释：选择最后一个子元素。

ul > li:only-child {
	color: red;
}

解释：选择只有一个子元素的那个子元素。

div > p:only-of-type {
	color: red;
}

解释：选择只有一个指定类型的子元素的那个子元素。

:nth-child(n) 系列

ul > li:nth-child(2) {
	color: red;
}

解释：选择子元素的第二个元素。

ul > li:nth-last-child(2) {
	color: red;
}

解释：选择子元素倒数第二个元素。

div > p:nth-of-type(2) {
	color: red;
};

解释：选择特定子元素的第二个元素。

div > p:nth-last-of-type(2) {
	color: red;
};

解释：选择特定子元素的倒数第二个元素。

UI 伪类选择器

UI 伪类选择器是根据元素的状态匹配元素。

:enabled

:enabled {
	border: 1px solid red;
}

解释：选择启用状态的元素。

:disabled

:disabled {
	border: 1px solid red;
}

解释：选择禁用状态的元素。

:checked

:checked {
	display: none;
}

解释：选择勾选的 input 元素。

:default

:default {
	display: none;
}

解释：从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。

:valid 和:invalid

input:valid {
	border: 1px solid blue;
}
input:invalid {
	border: 1px solid green;
}

解释：输入验证合法与不合法显示时选择的元素。

:required 和:optional

input:required {
	border: 1px solid blue;
}
input:optional {
	border: 1px solid green;
}

解释：根据是否具有 required 属性选择元素。

动态伪类选择器

动态伪类选择器根据条件的改变匹配元素。

:link 和和 visited

a:link {
	color: red;
}
a:visited {
	color: orange;
}

解释：:link 表示未访问过的超链接，:visited 表示已访问过的超链接。

:hover

a:hover {
	color: blue;
}

解释：表示鼠标悬停在超链接上。

:active

a:active {
	color: green;
}

解释：表示鼠标按下激活超链接时。

:focus

input:focus {
	border: 1px solid red;
}

解释：表示获得焦点时。

其他伪类选择器

:not

a:not([href*="baidu"]) {
	color: red;
}

解释：否定选择器，反选。

:empty

:empty {
	display: none;
}

解释：匹配没有任何内容的元素。

:lang

:lang(en) {
	color: red;
}

解释：选择包含 lang 属性，属性值前缀为 en 的元素。和属性选择器匹配结果一致。

:target

:target {
	color: red;
}

解释：定位到锚点时，选择此元素。

::selection

::selection {
	color: red;
}

解释：这是一个伪元素选择器，当选择文字时触发选择。CSS3 版本下的选择器。

2、CSS 颜色设置

颜色表方案

颜色的表现形式主要有三种方式：颜色名称、十六进制代码和十进制代码。

p {
	color: red;
}

解释：这是将一个段落内的文字设置为红色，采用的是英文颜色名称。问题是，其他各种颜色我们将如何设置？在古老的 HTML4 时，颜色名称只有 16 种。

颜色名称	十六进制代码	十进制代码	含义
black	#000000	0,0,0	黑色
silver	#c0c0c0	192,192,192	银灰色
gray	#808080	128,128,128	灰色
white	#ffffff	255,255,255	白色
maroon	#800000	128,0,0	栗色
red	#ff0000	255,0,0	红色
purple	#800080	128,0,128	紫色
fuchsia	#ff00ff	255,0,255	紫红
green	#008000	0,128,0	绿色
lime	#00ff00	0,255,0	闪光绿
olive	#808000	128,128,0	橄榄色
yellow	#ffff00	255,255,0	黄色
navy	#000080	0,0,128	海军蓝
blue	#0000ff	0,0,255	蓝色
teal	#008080	0,128,128	水鸭色
aqua	#00ffff	0,255,255	浅绿色

当然，目前颜色名称远远不止这些，可以搜索更多的 HTML 颜色表或 CSS 颜色表查阅。这里提供一些页面如下： http://xh.5156edu.com/page/z1015m9220j18754.html http://finle.me/colors.html http://www.w3school.com.cn/tags/html_ref_colornames.asp 在上面的表格中，我们也罗列出对应的十六进制和十进制颜色表示方法。使用方法如下：

// 红色的十六进制方案
p {
	color: #ff0000;
}

十进制表示方法就比较多样化，有四种方案：

函数	说明	示例
rgb(r,g,b)	用 RGB 模型表示颜色	rgb(0,128,128)
rgba(r,g,b,a)	同上，a 表示透明度 0~1 之间	rgba(0,128,128,0.5)
hsl(h,s,l)	用 HSL 模型（色相、饱和度和透明度）来表示颜色	hsl(120,100%,30%)
hsla(h,s,l,a)	同上，a 表示透明度 0~1 之间	hsla(120,100%,30%,0.5)

p {
	color: rgb(112, 128, 114);
	color: rgba(0, 128, 128, 0.5);
	color: hsl(120, 100%, 30%);
	color: hsla(120, 100%, 30%, 0.5);
}

目前又有一个疑问，这些值从哪里获取。除了颜色表之外，想要微调自己的颜色值。我们可以使用 photoshop 等平面设计软件的调色板获取相应的值。

3、度量单位

在 CSS 长度设置中，我们经常需要使用到度量单位，即以什么样的单位设计我们的字体或边框长度。而在 CSS 中长度单位又分为绝对长度和相对长度。绝对长度指的是现实世界的度量单位，CSS 支持五种绝对长度单位。绝对长度单位：

单位标识符	说明
in	英寸
cm	厘米
mm	毫米
pt	磅
pc	pica

相对长度指的是依托其他类型的单位，也是五种。相对长度单位：

单位标识符	说明
em	与元素字号挂钩
ex	与元素字体的“x 高度”挂钩
rem	与根元素的字号挂钩
px	像素，与分辨率挂钩
%	相对另一值的百分比

一些常用的单位如下：

// em 相对单位
p {
	margin: 0;
	padding: 0;
	background: silver;
	font-size: 15px;
	height: 2em;
}

解释：em 是相对单位，与字号大小挂钩，会根据字体大小改变自己的大小，灵活性很高。

// px 相对单位，绝对特性
p {
	margin: 0;
	padding: 0;
	background: silver;
	font-size: 15px;
	height: 55px;
}

解释：虽然 px 也是相对单位，但由于和分辨率挂钩，导致他其实就变成一个绝对单位了，自然灵活性没有 em 高，但是使用难度较低，且大量的开发者习惯性使用它。

// % 百分比
p {
	margin: 0;
	padding: 0;
	background: silver;
	font-size: 200%;
	width: 50%;
}

解释：长度比较好理解，就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。

4、文本字体

字体设置总汇

属性名	说明	CSS版本
font-size	设置字体的大小	1
font-variant	设置英文字体是否转换为小型大写	1
font-style	设置字体是否倾斜	1
font-weight	设置字体是否加粗	1
font-family	设置 font 字体	1
font	设置字体样式复合写法	1 ~ 2
@font-face	设置 Web 字体	3

字体设置

我们可以通过 CSS 文本样式来修改字体的大小、样式以及形态。

font-size

p {
	font-size: 50px;
}

解释：设置文本的大小。属性值如下表：

值	说明
xx-small	设置字体大小，每个值从小到大的固定值
x-small
small
medium
large
x-large
xx-large
smaller	设置字体相对于父元素字体的大小
larger	设置字体相对于父元素字体的大小
数字+px	使用 CSS 像素长度设置字体大小
数字+%	使用相对于父元素字体的百分比大小

// 先设置父元素字体大小
body {
	font-size: 50px;
}
// 再设置相对小一些
p {
	font-size: smaller;
}

font-variant

p {
	font-variant: small-caps;
}

解释：设置字体是否以小型大写字母显示。

值	说明
normal	表示如果以小型大写状态，让它恢复小写状态
small-caps	让小写字母以小型大写字母显示

// 先让父元素设置小型大写
body {
	font-variant: small-caps;
}
// 让子元素设置恢复小写
p {
	font-size: 50px;
	font-variant: normal;
}

font-style

p {
	font-style: italic;
}

解释：设置字体是否倾斜。

值	说明
normal	表示让倾斜状态恢复到正常状态
italic	表示使用斜体
oblique	表示让文字倾斜，在没有斜体时使用

font-weight

p {
	font-weight: bold;
}

解释：设置字体是否加粗。

值	说明
normal	表示让加粗的字体恢复正常
bold	粗体
bolder	更粗的字体
lighter	轻细的字体
100 ~ 900 之间的数字	600 及之后是加粗，之前不加粗

在目前计算机和浏览器显示中，只有 bold 加粗，其他更粗更细，目前体现不出来。

font-family

p {
	font-family: 微软雅黑;
}

解释：使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几个后备字体。

// 备用字体
p {
	font-family: 楷体,微软雅黑,宋体;
}

font

p {
	font: 50px 楷体;
}

解释：字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写] 字体大小字体名称；

Web 字体

虽说可以通过备用字体来解决用户端字体缺失问题，但终究用户体验不好，且不一定备用字体所有用户都安装了。所以，现在 CSS 提供了 Web 字体，也就是服务器端字体。

// 服务器提供字体
@font-face {
	font-family: abc;
	src: url('BrushScriptStd.otf');
}
p {
	font-size: 50px;
	font-family: abc;
}

英文字体文件比较小，而中文则很大。所以，中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体，就不太建议了。

5、文本样式

文本设置总汇

属性名	说明	CSS版本
text-decoration	装饰文本出现各种划线	1
text-transform	将英文文本转换大小写	1
text-shadow	给文本添加阴影	3
text-align	设置文本对齐方式	1,3
white-space	排版中的空白处理方式	1
letter-spacing	设置字母之间的间距	1
word-spacing	设置单词之间的间距	1
line-height	设置行高	1
word-wrap	控制段词	3
text-indent	设置文本首行的缩进	1

文本样式

CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影。

text-decoration

p {
	text-decoration: underline;
}

解释：设置文本出现下划线。属性值如下表：

值	说明
none	让本身有划线装饰的文本取消掉
underline	让文本的底部出现一条下划线
overline	让文本的头部出现一条上划线
line-through	让文本的中部出现一条删除划线
blink	让文本进行闪烁，基本不支持了

// 让本来有下划线的超链接取消
a {
	text-decoration: none;
}

text-transform

p {
	text-transform: uppercase;
}

解释：设置英文文本转换为大小写。

值	说明
none	将已被转换大小写的值恢复到默认状态
capitalize	将英文单词首字母大写
uppercase	将英文转换为大写字母
lowercase	将英文转换为小写字母

text-shadow

p {
	text-shadow : 5px 5px 3px black;
}

解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。

文本控制

CSS 文本样式中还有一组对文本进行访问、形态进行控制的样式。

text-align

p {
	text-align: center;
}

解释：指定文本的对齐方式。

值	说明
left	靠左对齐，默认
right	靠右对齐
center	居中对齐
justify	内容两端对齐
start	让文本处于开始的边界
end	让文本处于结束的边界

start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 尚未支持。

white-space

p {
	white-space: nowrap;
}

解释：处理空白排版方式。

值	说明
normal	默认值，空白符被压缩，文本自动换行
nowrap	空白符被压缩，文本不换行
pre	空白符被保留，遇到换行符则换行
pre-line	空白符被压缩，文本会在排满或遇换行符换行
pre-wrap	空白符被保留，文本会在排满或遇换行符换行

letter-spacing

p {
	letter-spacing: 4px;
}

解释：设置文本之间的间距。

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”

word-spacing

p {
	word-spacing: 14px;
}

解释：设置英文单词之间的间距。

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”

line-height

p {
	line-height: 200%;
}

解释：设置段落行高。

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”
数值	比如：1,2,3
%	比如：200%

word-wrap

p {
	word-wrap: break-word;
}

解释：让过长的英文单词断开。

值	说明
normal	单词不断开
break-word	断开单词

text-indent

p {
	text-indent: 20px;
}

解释：设置文本首行的缩进。

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”