级联样式单与css选择器（下）

级联样式单与css选择器（下）

1.伪元素选择器

css提供的伪类选择器有如下几个：

• :first-letter:该选择器对应的css样式对指定对象内的第一个字符起作用
• :first-line:该选择器对应的css样式对指定对象内的第一行内容起作用
• :before:该选择器与内容相关的属性结合使用，用于在指定对象的前端插入内容
• :after:该选择器与内容相关的属性结合使用，用于在指定对象的尾端插入内容

1.1 :first-letter伪元素选择器

:first-letter仅对块元素起作用（如:

等），如果想对行内元素（如：等元素）使用该属性，必须先设定对象的height、width属性，或者设定position属性为absolute，或者设定display属性为block。例：

	
		
		
		
	
	
		其实我是一个程序员
		
其实我是一个程序员
		
其实我是一个程序员
		
其实我是一个程序员
	

1.2 :first-line伪元素选择器

:first-line仅对块元素起作用（如:

等），如果想对行内元素（如：等元素）使用该属性，必须先设定对象的height、width属性，或者设定position属性为absolute，或者设定display属性为block。用法同:first-letter,不在举例说明。

1.3 :before伪元素选择器

:before和 :after两个伪元素选择器需要与内容相关属性：content属性相结合使用。
content属性：该属性值可以是字符串或者url等，该属性用于向指定元素之前或者之后插入内容
下面代码介绍 :before选择器和 content属性的组合使用，例：

	
		
		
		
	
	
		

			
before before before
			
before before before
			
before before before
		
	

1.4 :after伪元素选择器

:after选择器与 :before选择器的用法完全相同，只不过是 :after选择器将内容插到指定元素之后。不在举例说明。

2.CSS3新增的伪类选择器

2.1结构性伪类选择器

• 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选择器，而且必须是其父元素的唯一子节点的元素
  代码举例：

	
		
		
		
	
	
		

			

				
其实我是一个程序员
				
其实我是一个程序员
				
其实我是一个程序员
				
其实我是一个程序员
				
其实我是一个程序员
			
			

				
其实我是一个程序员
				
其实我是一个程序员
				
其实我是一个程序员
				
其实我是一个程序员
				
其实我是一个程序员
				
其实我是一个程序员
			
			其实我是一个程序员
		
	

• 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.2UI元素状态伪类选择器

• Selector:link：匹配Selector选择器且未被访问前的元素（通常只能是超链接）
• Selector:visited:匹配Selector选择器且已被访问过的元素（通常只能是超链接）
• Selector:active:匹配Selector选择器且处于被用户激活（在鼠标点击与释放之间的事件）状态的元素
• Selector:hover:匹配Selector选择器且处于鼠标悬停状态的元素
• Selector:focus:匹配Selector选择器且已经得到焦点的元素
• Selector:enabled:匹配Selector选择器且当前处于可用状态的元素
• Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素
• Selector:checked:匹配Selector选择器且当前处于选中状态的元素
  翻译：link:链接 visited:访问 active:积极地 hover:悬停 enabled:启用 disabled:已禁用的 checked:选中的
  代码举例如下：

	
		
		
		
	
	
		

			

				
其实我是一个程序员
				
109
			
			

				
其实我是一个程序员
				
108
			
			

				
其实我是一个程序员
				
108
			
		
		不可用的按钮
		
		可用的按钮
		
		男:
		女:
		未知:
	

2.3 :not伪类选择器

:not伪类选择器就是用两个选择器做减法，Selector1:not(Selector2)：匹配符合 Selector1选择器，但不符合 Selector2的元素，相当于用 Selector1减去 Selector2
代码举例如下：

	
		
		
		
	
	
		

			
其实我是一个程序员
			
其实我是一个程序员
			
其实我是一个程序员
			
其实我是一个程序员
			
其实我是一个程序员
		
	

3.在脚本中修改显示样式

如果需要在脚本中动态控制页面的显示效果，需要使用脚本动态设置CSS样式，步骤如下：

1. 获取到需要设置CSS样式的目标元素，可以使用getElementById()的方法
2. 修改目标元素的class样式，常用的方法有如下两种：
   > 修改行内CSS属性值：使用obj.style.属性名=属性值的js代码即可
   > 修改HTML元素的class属性值：使用obj.className=class的JS脚本即可
   例1：随机改变页面背景颜色

	
		
		
		
	
	其实我是一个程序员

例2：动态增加立体效果

	
		
		
		
		
	
	
		
		
有立体效果的层