CSS中的选择器的总结

1.基本选择器

基本选择器主要包含四种：

按优先级排列是：ID选择器，类选择器，标签选择器，通配符选择器。

 ID选择器：通过获取标签里面的ID属性设置对应的样式，设置的时候用（#+id的属性）

 

类选择器：通过获取标签里面的class属性去设置对应的样式，设置的时候用（.+class的属性）

 

标签选择器：根据标签名称设置对应的样式。

 

通配符选择器（通过*设置对应的样式）

 

2.包含选择器

包含选择器里有三种选择器：

 

1.子代选择器：获取某个标签的第一级子标签，然后根据需求设置不同的样式。

 

在上面那个列表中div标签算是爷爷，ul标签算是爸爸，li标签算是儿子 。在当前这个子代选择器中修饰的标签只有div的第一代子标签（包含列表1-7）

2.后代选择器：获取某个标签里所有的子标签。

 在这个后代选择器中，修饰的标签是所有子标签（包含列表1-10）

3.分组选择器：通过逗号可以分割多种选择器，然后给每个标签添加样式。可以同时设定多个标签

 3.属性选择器

 3.1选中某个标签中的某个值（用中括号）

比如在上示代码中·有·好几个div标签，可以在后面加一个中括号选中想要装饰的div标签的属性，然后就可以选中只有包含title属性值的div标签。

3.2确切的等于某个值

 3.3属性包含某个值

 装饰属性中包含字母e的标签（这里指“张三”和“李四”）

3.4属性中以xxx开始

 装饰属性中以字母e开头的标签（这里指“李四”）

3.5属性中以xxx结尾

 装饰属性中以字母rl结尾的标签（这里指“王五”）

3.6表示下一个标签

 装饰msg的下一个标签（这里指“段落”）

4.伪类选择器(定义元素的特殊状态)

伪类：同一个标签，在不同的状态下，有不同的样式

伪类通过冒号表示

最早的时候主要用来渲染a标签不同状态下的不同样式

超连接点击之前------:link

超链接被访问之后-----:visited

鼠标放在超链接上的时候（悬停）------:hover

超链接激活的时候（鼠标·点击标签但不松手的时候）-----:active

 a标签的四种状态的顺序是一定的。

a:link   a:visited    a:hover    a:active

5.伪元素选择器

:befor---css2中                     ：after---css2中

：:befor---css3中                  ：:after---css3中

代码如下：

 结果如下：

 

 注：使用before和after的时候一定要写上content属性。