css面试点-元素选择符与关系选择符

元素选择符：

通配选择符：选定所有对象。如 *{color:#f00;}

类型选择符：以文档语言对象类型作为选择符。如 p{font-size:13px;}

ID选择符：以唯一标识符id属性等于subtitle的E对象作为选择符，如 #subtitle{font-size:20px;}
注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法。

类选择符：以class属性包含myclass的E对象作为选择符。不同于ID选择符的唯一性，类选择符可以同时定义多个，如：

.a{color:#f00;}
.b{font-weight:700;}
给某个div元素定义.a和.b两个类

类选择符高级用法：多类选择符

.a.b{color:#f00;}
多类选择符使用方法

此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符，如：.a.b{}将会被视为：.b{}

关系选择符：

包含选择符：选择所有被E元素包含的F元素。与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

	
1
	
2
		

			
2.1
			
2.2
			
2.3
		
	
	
3

此例，如果使用 .demo li{color:#f00;} ，那么 1, 2, 2.1, 2.2, 2.3, 3 都将会变成红色；如果使用 .demo>li{color:#f00;}，那么只有 1, 2, 3 会变成红色，即只有子元素会被命中；

子选择符：选择所有作为E元素的子元素F。与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。

	

		列表项目1
		

			
项目列表1.1
			
项目列表1.2
		
	
	

		列表项目2
		

			
项目列表2.1
			
项目列表2.2
		
	
	
列表项目
	
列表项目

• 

相邻选择符：选择紧贴在E元素之后F元素。与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。

	
这是一个标题
	
这是一个文字段落
	
这是一个文字段落
	
这是一个标题
	
这是一个文字段落
	
这是一个标题
	
这是一个文字段落
	
这是一个文字段落



			

兄弟选择符：选择E元素后面的所有兄弟元素F。与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

	
这是一个标题
	
这是一个文字段落
	
这是一个文字段落
	
这是一个标题
	
这是一个文字段落
	
这是一个标题
	
这是一个文字段落
	
这是一个文字段落


	

css面试题之css选择符之属性选择符

css面试题之css选择符之伪类选择符

css面试题之css选择符之伪对象（伪元素）选择符