样式选择器总结

样式选择器总结

最近博主经过慎重考虑之后，决定往前端方向走，前端的可视化相比于后端的数据化让我感觉更加缤纷，所以博主最近开始了前端的学习。前端学习中，HTML，CSS，JavaScript都是必备知识。这篇文章主要是对最近学习的CSS中的样式选择器做一次总结，因为样式选择器内容较为多，容易混淆和忘记。

选择器的类型分为以下几种，简单选择器，复合选择器，属性选择器，关系选择器以及伪类选择器。

简单选择器

1 元素选择器

	元素选择器的对象主要是对指定的标签进行选择，标签例<p>,<div>,<span>等等。
	用法： p{属性}

2 ID选择器

 	ID选择器的对象主要是对特定的ID进行选择，因为ID是唯一标识的，所以我们的ID选择器也只能用在一个标签中。
	用法： #ID名{属性}

3 类选择器

	类选择器的对象主要是对指定的class进行选择，类选择器与ID选择器是相似的，类选择器可以作用在多个标签，而ID只可以作用在一个标签中，这就是二者的区别。
	用法： .类名{属性}

4 通配选择器

	通配选择器的对象主要是对全局的属性选择，就是它的作用域是分布在全局。
	用法： .*{属性}

复合选择器

复合选择器有以下两种

1.交集选择器

作用： 用于选中同时复合多个条件的的元素
语法：选择器1选择器2选择器3选择器n{} 
注意点：如果选择器中有元素选择器，必须以元素选择器开头。

2.并集选择器

作用：用于选中多个选择器对应的的元素
语法：选择器1，选择器2，选择器3，选择器n{}

关系选择器

关系选择器中有几类，分别对应的是父子关系，祖先后代关系，兄弟关系的选择器。

1. 子元素选择器

作用：选中指定父元素的子元素。
用法：父元素 >子元素

2.后代选择器

作用：选中指定祖先元素内的后代元素。
用法：祖先元素  后代元素 

3. 兄弟选择器

 作用：选择指定元素的下一个兄弟
 语法：前一个+后一个
 作用：选择指定元素下的所有兄弟
 语法：前一个~后一个

属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^属性值]选择以属性值开头的元素
[属性名$属性值]选择以属性值结尾的元素
[属性名*=属性值]选择含有属性值的所有元素。

伪类选择器

-伪类是用来描述元素的的特殊状态，比如第一个子元素，被点击的元素，鼠标移入的元素……
-伪类一般以：开头
：first-child 选中第一个子元素
：last-child 选中最后一个子元素
：nth-child() 选中第n个元素
	特殊值：
		n 第n个，n的范围是0到正无穷
		2n或even 表示选中偶数位的元素
		2n+1或odd 表示选中奇数位的元素
上述的伪类都是作用在子元素之中的
：first-of-type
：last-of-type
：nth-of-type
	这几个伪类的功能与上述的类似，不同点就是它们是在同类型的元素中进行选择
：not() 否定伪类
	将符合条件的元素从选择器中去除，即符合条件的元素不添加not后设定的样式。