CSS中的选择器(符号解释)

一、空格 (后代)

• 写法

.class1 .class2{
  ...
}

• 作用

选择class1作用的容器内部的所有含有class2的元素

• 示例

	
第一行
 	
第二行
 	

     	
第三行
 	

外面的行

效果是：第一行和第三行是红色背景

大于号> (子代)

• 写法

.class1 > .class2{
  ...
}

• 作用

选择父元素为class1，子元素为class2的元素

• 示例

	
第一行
 	
第二行
	

   		
第三行
	

外面的行

• 效果：仅第一行和第二行背景为红色

三、加号 + (紧邻兄弟)

• 写法

.class1 + .class2{
  ...
}

• 作用

选择class1元素紧邻的class2兄弟元素

• 示例

	
第一行
 	
第二行
	

   		
第三行
	

外面的行1
外面的行2

• 效果：只有外面的行1显示为红色

四、波浪号 ~ (兄弟)

• 写法

.class1 ~ .class2{
  ...
}

• 作用

选择class1元素之后所有的class2兄弟元素

• 示例

	
第一行
 	
第二行
	

   		
第三行
	

外面的行1

   
外面的行2

外面的行3

• 效果：有外面的行1和外面的行3显示为红色

五、无符号 (主要用于标签联合)

• 写法

 标签div/p.class2{
  ...
}

• 作用

标签元素中，相当于”并且“关系，选择所有class2对应的标签；

• 示例

	
第一行
 	
第二行
 	

     	
第三行
 	

外面的行

效果是：只有第一行和外面的行红色背景

六、逗号（普通分格符, 选择多种元素）

• 写法

 .class1 , .class2{
  ...
}

• 作用

相当于声明两个同值的类选择器，class1和class2的效果一样，无父子兄弟关系

• 示例

	
第一行
 	
第二行
 	

     	
第三行
 	

外面的行

效果是：只有第一行和外面的行红色背景