CSS中伪元素、伪类选择器和字体、文本相关属性

CSS中伪元素、伪类选择器

伪元素选择器

伪元素选择器只能针对CSS中已有的伪元素起作用。
CSS提供的伪元素选择器有如下几个：

• :first-letter:对指定对象的第一个字符起作用。
• :first-line:对指定对象的第一行内容起作用。
• :before:与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
• :after:与内容相关的属性结合使用，用于在指定对象内部的尾端增加内容。

下面代码示范用法：

   
   
   


	ABC
ZXC
	
其实我是一个程序员，
你是一个设计师，

	然而我们都是打工的，
老板还是一个。
	

		
才能活得精彩，
		
才能创造价值。
	

所示效果如下：

其中关于div中的before和after处理运用到了内容相关的属性：content，content该属性的值可以是字符串，用于向指定元素之前或之后插入内容。此外，content还可使用url(url)格式的值，这种格式的值可用于插入图像。如：

伪类选择器

伪类选择器主要用于对已有选择器做进一步的限制，对已有选择器能匹配的元素进一步的过滤。伪类选择器主要分为如下三类：

• 结构性伪类选择器
• UI元素状态伪类选择器
• 其他伪类选择器

1.结构性伪类选择器
结构性伪类选择器指的是根据HTML元素之间的结构关键进行筛选的伪类选择器。结构性伪类选择器主要有以下几个：

• Selector:root：匹配文档的根元素。在HTML中根元素永远是元素。
• Selector:first-child：匹配符合Selector选择器，而且必须是其父元素的第一个子节点的元素。
• Selector:last-child：匹配符合Selector选择器，而且必须是其父元素的最后一个子节点的元素。
• Selector:nth-child(n)：匹配符合Selector选择器，而且必须是其父元素的第n个子节点的元素。
• Selector:nth-last-child(n)：匹配符合Selector选择器，而且必须是其父元素的倒数第n个子节点的元素。
• Selector:only-child：匹配符合Selector选择器，而且必须是其父元素的唯一子节点的元素。

下面代码示范用法：

   
   
   


	

		
一名数学家
		
一名化学家
		
一名科学家
		
一名物理学家
		
一名哲学家
	
	

		
他是一名数学家
		
他是一名化学家
		
他是一名科学家
		
他是一名物理学家
		
他是一名哲学家
		
他是一名哲学家
	

效果如下：

此外，对于:nth-child和:nth-last-child两个伪类选择器，它们的功能还支持如下用法。

• Selector:nth-child(odd/even)：匹配符合Selector选择器，而且必须是其父元素的第奇数/偶数个子节点的元素。
• Selector:nth-last-child(odd/even)：匹配符合Selector选择器，而且必须是其父元素的倒数第奇数/偶数个子节点的元素。
• Selector:nth-child(xn+y)：匹配符合Selector选择器，而且必须是其父元素的第xn+y个子节点的元素。
• Selector:nth-last-child(xn+y)：匹配符合Selector选择器，而且必须是其父元素的倒数第xn+y个子节点的元素。

2.UI元素状态伪类选择器
UI元素状态选择器主要用于根据UI元素的状态进行筛选。UI元素状态选择器主要有如下几个：

• Selector:link：匹配 Selector选择器且未被访问前的元素（通常只能是超链接）。
• Selector:visited：匹配 Selector选择器且已被访问过的元素（通常只能是超链接）。
• Selector:active：匹配 Selector选择器且处于被用户激活（在鼠标点击与释放之间的事件）状态的元素。
• Selector:hover：匹配 Selector选择器且处于鼠标悬停状态的元素。
• Selector:focus：匹配 Selector选择器且已得到焦点的元素。
• Selector:enabled：匹配 Selector选择器且当前处于可用状态的元素。
• Selector:diabled：匹配 Selector选择器且当前处于不可用状态的元素。
• Selector:read-only：匹配 Selector选择器且处于只读状态的元素。
• Selector:read-write：匹配 Selector选择器且处于读写状态的元素。
• Selector:required：匹配 Selector选择器且具有必填要求的元素。
• Selector:optional：匹配 Selector选择器且无必填要求的元素。

下面代码示范用法：

   
   
   


	

		

			
疯狂Java讲义
109
		
		

			
轻量级Java实战
108
		
		

			
疯狂C++讲义
108
		
	
	不可用的按钮
	
	可用的按钮
	
	男：
	女：
	未知：

效果如下：

3.其他伪类选择器
: target伪类选择器
Selector:target：匹配符合Seletor选择器且必须是命名锚点目标的元素。
:not伪类选择器
Selector1:not(Selector2)：匹配符合Seletor1选择器，但不符合Selector2选择器的元素，相当于用Selector1减去Selector2。
下面代码示范用法：

   
   
   

	
	

		
他是一名数学家
		
他是一名化学家
		
他是一名科学家
		
他是一名物理学家
		
他是一名哲学家
		
他是一名哲学家
	

效果如下：

从运行结果来看，浏览器为除了id为z的所有元素都设置了字体颜色、粗体字效果。

在脚本中修改显示样式

如果需要在脚本中动态控制页面的显示效果，使用脚本动态设置CSS样式也非常简单，按如下步骤可动态修改目标元素的CSS样式。

1. 获取到需要设置CSS样式的目标元素，如可用getElementById()的方法。
2. 修改目标元素的CSS样式。常用的方式有两种。
   (1)修改行内CSS属性值：使用如“obj.style.属性名=属性值”的JavaScript代码即可。
   (2)修改HTML元素的class属性值：使用如“obj.className=class选择器”的JavaScript代码即可。

随机改变页面的背景色
随机改变页面的背景色，只要生产一个随机的6位数，并将该值赋给body元素中的backgroundColor CSS属性即可。
下面代码示范用法：

运行效果是单击页面会随机改变页面的背景色。

动态增加立体效果

立体效果原来是通过为其增加4个边框实现的，其中左、上边框颜色稍浅，下、右颜色稍深。
下面代码示范用法：

   
   
	
	


	
	
有立体效果的层

效果如下：

单击页面上的“增加立体效果”按钮，页面会出现如图所示的效果。

字体与文本相关属性

字体相关属性

CSS为控制文本的字体提供了大量属性，主要用于控制文本的字体、颜色、修饰等外观。字体相关属性如下：

• font：这是个复合属性，通常不建议使用该属性。
• color：该属性用于控制字体颜色。
• font-family：设置文字的字体。
• font-size：设置文字的大小。
• font-stretch：用于改变文字横向的拉伸。
• font-style：设置文字的风格，是否采用斜体等。
• font-weight：设置文字是否加粗，该属性的值表示加粗的程度。
• text-decoration：用于控制文字是否有修饰线。
• font-variant：用于设置文字的大写字母的格式。
• text-transform：用于设置文字的大小写。
• line-height：该属性用于设置字体的行高。
• letter-spacing：用于设置字符之间的间隔。
• word-spacing：用于设置单词之间的间隔。
• text-shadow：用于设置文字是否有阴影效果，可添加多个阴影。

代码示范如下：

   
   


	color:#888888:
	测试文字

	color:red:
	测试文字

	测试文字

	测试文字

	测试文字

	测试文字

	测试文字

	测试文字

	测试文字

	测试文字

	测试文字

	hello

	hello

	hello

	测试文字

	hello world

	hello world

	hello world

	hello world

效果如下：

CSS3支持的颜色表示方法

CSS3中常用的几种颜色表示方法如下：

• 用颜色名表示，如white（白色）、red（红色）等。这种方式简单易用，但能表示的颜色数量有限。
• 用十六进制的颜色值表示，这就是典型的三原色混合原理，例如#123456，其中前两位表示红光的值，中间两位表示绿光的值，后两位表示蓝光的值。
• 用rgb(r,g,b)函数表示，也是运用三原色混合原理。顺序也是红绿蓝的值。
• 用rgba(r,g,b,a)函数表示，还是运用三原色混合原理。只是多了一个a参数，用于指定该颜色的透明度，a参数可以是0~1之间的任意数。

文本相关属性

文本相关属性用于控制整个段、整个元素内文本的显示效果。相关属性如下：

• text-indent：用于设置段落文本的缩进，默认值为0。被另一个元素断开的元素不能应用本属性。
• text-overflow：用于控制溢出文本的处理方法。该属性支持两个属性值，clip和ellipsis。
• vertical-align：用于设置目标元素里内容的垂直对齐方式。
• text-align：用于设置目标元素中文本的水平对齐方式。
• direction：用于设置文本流入的方向，合法值有ltr（从左向右）和rtl（从右向左）。
• white-space：用于设置目标元素对文本内容中空白的处理方式。
• word-break：用于设置目标元素中文本内容的换行方式。
• word-wrap：用于设置目标元素中文本内容的换行方式。

其中text-overflow属性的代码示例如下：

   
   
   


	
测试文字测试文字测试文字测试文字测试文字测试文字
	
测试文字测试文字测试文字测试文字测试文字测试文字

效果如下：

主要介绍CSS中字体和文本相关属性，通过这些属性可以控制字体颜色、字体大小、字体样式、字体阴影、文本对齐方式、文本缩进、文本溢出显示方式等。