css基本选择器及其用法

1，通配符选择器

<style type="text/css">
	* {
		属性1：属性值1;
		属性2：属性值2;
		……
	}  
</style>

通配符选择器主要是用来初始化一些标签的默认内外边距和一些特殊样式，如下划线的去除，li 圆点的去除等，来使网页的开发更规范。

2，标签选择器（元素选择器）

<style type="text/css">
	标签名 {
		属性1：属性值1;
		属性2：属性值2;
		……
	}  
</style>

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

3，id选择器

<style type="text/css">
	#id名 {
		属性1：属性值1;
		属性2：属性值2;
		……
	}  
</style>

id属性作为HTML元素的唯一标识，要求页面内不能有重复的id标识属性（有重复id属性可能也不会报错）。在实际应用中常与标签配合使用，标识修饰对应ID标识的某个div区块。

4，类选择器

<style type="text/css">
	.类名 {
		属性1：属性值1;
		属性2：属性值2;
		……
	}  
</style>

类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

5，并集选择器（组合选择器）

<style type="text/css">
	（可以是标签名，类名，id多个一起）用“,”分开 {
		属性1：属性值1;
		属性2：属性值2;
		……
	}  
</style>

多个标签设置同一样式

6，子代选择器

<style type="text/css">
	元素之间用>分开 {
		属性1：属性值1;
		属性2：属性值2;
		……
	}  
</style>

子代选择器只选择子代，并会不将子代中的其他符合要求的标签选择出来

7，后代选择器

<style type="text/css">
	元素之间用空格分隔 {
		属性1：属性值1;
		属性2：属性值2;
		……
	}  
</style>

后代选择器会选择所有符合要求的全部后代

8，兄弟选择器

<style type="text/css">
	元素之间用+分隔 {
		属性1：属性值1;
		属性2：属性值2;
		……
	}  
</style>

选择同级的标签

9，伪类选择器

1，动态伪类选择器

<style type="text/css">
	元素名：其他 {
		属性1：属性值1;
		属性2：属性值2;
		……
	}  
</style>

2，结构伪类选择器

元素名：first-child第一个元素。
元素名：last-child最后一个元素。
元素名：nth-child(n)某一个元素 想选择第几个，n就取值多少。
元素名：nth-child(-n+m)选中前m个元素 n起始值是0。
元素名：nth-of-type(n) 选中第n个元素。
元素名：nth-last-child(n)选中倒数第n个元素.

3，否定伪类选择器

元素名：not（n）除了某个元素，其它元素添加样式

4，伪元素选择器

元素名::before(等)

10，属性选择器

元素名称[属性名+“属性值”]\如：input[type=“text”]，
素名[属性名^=属性值开头的内容]选中以XXX开头的元素，
元素名[属性名 $ =属性值结尾的内容]选中以XXX结尾的元素
元素名[属性名* =属性值包含的内容]选中包含XXX的元素