类选择器 ID选择器 后代选择器 子元素选择器 交集选择器 并集选择器 相邻兄弟选择器 通用兄弟选择器

一、类选择器
.类选器名称{css样式代码;}

二、ID选择器。

ID选择器名称{css样式代码;}

三、后代选择器。
标签名称1(.类选器名称1)(#ID选择器名称1)空格标签名称2(.类选器名称2)(#ID选择器名称2)空格标签名称3(.类选器名称3)(#ID选择器名称3){css样式代码;}

四、子元素选择器
标签名称1(.类选器名称1)(#ID选择器名称1)>标签名称2(.类选器名称2)(#ID选择器名称2)>标签名称3(.类选器名称3)(#ID选择器名称3){css样式代码;}

子元素选择器和后代选择器的不同点

后代选择器使用空格作为连接符
子元素选择器使用>作为连接符

后代选择器会选中指定标签中所有特定的后代标签也就是会选中儿子孙子重孙子...只要是放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中所有特定的直接标签也就是只会选中特定的儿子标签

子元素选择器和后代选择器的相同点

后代选择器和子元素选择器都可以使用标签名称ID名称类名称来作为选择器
后代选择器和子元素选择器都可以通过自己的连接符号一直延续下去

五交集选择器
给所有选择器的选中的标签中,相交的那部分设置属性
选择器1选择器2{css样式代码;}
注意点
交集选择器之间没有任何连接符号

六并集选择器
给所有选择器选中的标签设置属性
选择器1,选择器2{css样式代码;}
注意点
并集选择器之间用逗号连接

七相邻兄弟选择器
给指定选择器后面紧跟的那个选择器选中的标签设置属性
选择器1+选择器2{css样式代码;}
注意点
1相邻兄弟选择器之间用+连接
2相邻兄弟选择器只能选中紧跟其后的那个标签不能选中被隔开的标签

八通用兄弟选择器
给指定选择器后面的所有选择器选中的所有标签设置属性
选择器1~选择器2{css样式代码;}
注意点
1通用兄弟选择器之间用~连接
2通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签,无论有没有被隔开都可以被选中.

你可能感兴趣的:(类选择器 ID选择器 后代选择器 子元素选择器 交集选择器 并集选择器 相邻兄弟选择器 通用兄弟选择器)