html学习(三)CSS选择器的使用

一、基本选择器

  基本选择器是用来指明“样式”将作用于网页中的那些元素。基本选择器分为四种：通用选择器、标签选择器、类选择器和id选择器。

1.通用选择器

  通用选择器是一个星号(*)，功能类似于通配符，用于匹配文档中所有的元素类型。通用选择器的语法格式如下：

* {
	margin:0px;
	padding:0px;
}

  通用选择器可以使页面中所有的元素都使用该规则。一般用于初始化，有些标签自带外边距、内边距，在页面布局时会带来不必要的麻烦，如上述代码，将页面所有的元素去除边距。

2.通用选择器

  标签选择器是使用HTML标签名作为一个CSS的选择器，用于对HTML中的某种标签来统一设置样式。

	div {
		border:1px solid #000;
	}

  上述代码中，div是标签选择器，通过该选择器将页面中所有的div块设置黑色实线边框。

3.类选择器

  标签选择器只能作用于同种类型的标签中，而实际在设计页面时，往往会遇到将不同的标签设为相同的样式，或相同标签采用不同的样式的情况，此时可以使用类选择器来实现。类选择器是指同一样式的元素定义为一类，在类名前有一个点(.)，其语法格式如下：

	.classname {
		border:1px solid #000;
	}
	
	<div class="classname">......</div>

  上述代码中，div是标签选择器，通过该选择器将页面中所有的div块设置黑色实线边框。

4.id选择器

  id选择器的定义与类选择器相似，区别在于使用井号(#)进行定义。在HTML文档中，元素的id要求是唯一的。通过id来识别页面中的元素。通过id选择器可以对元素单独的设置样式，其语法格式如下：

	#idname {
		border:1px solid #000;
	}
	
	<div id="idname">......</div>

  在一个文档中，由于id属性是唯一的，因此id选择器具有一定局限性，应尽量少用。

注：选择器之间也存在优先顺序，优先级从高到低分别是id选择器–>类选择器–>标签选择器–>通用选择器。

二、组合选择器

  除了基本的选择器外，CSS样式中还有组合选择器，其中包括多元素选择器、后代选择器、子元素选择器、相邻兄弟选择器和普通兄弟选择器等。

1.多元素选择器

  当多个元素拥有相同的特征时，可以通过多元素选择器的方式来统一定义样式，有效的避免样式的重复定义。多元素选择器允许依次定义多个选择器的样式，选择器之间使用逗号(,)隔开，其语法如下：

	p,div {
		font-size:14px;
	}

2,后代选择器

后代选择器用于选区某个元素的所有后代元素。他们之间用空格隔开。

	div p {
		font-size:14px;
	}

  将div标签中的p标签字体大小设置为14像素。

3.子选择器

  子选择器用于选择某个元素的直接子元素(间接子元素不适用)。子选择器元素之间使用大于号(>)隔开，语法如下：

	div>p {
		font-size:14px;
	}

4.相邻兄弟选择器

  相邻兄弟选择器用于选择紧跟在某个元素之后的兄弟元素。相邻兄弟选择器元素之间使用加号(+)隔开，语法如下：

	h3+p {
		font-size:14px;
	}

5.普通兄弟选择器

  普通兄弟选择器是指拥有相同父元素的元素，元素与元素之间不必直接紧随。选择器之间使用波浪号(~)隔开，语法如下：

	h3~p {
		font-size:14px;
	}

三、属性选择器

  属性选择器根据元素的属性来选取元素。属性选择器可分为存在选择器、相等选择器、包含选择器、连接字符选择器、前缀选择器、子串选择器和后缀选择器。如下表：

选择器类型	语法	示例	描述
存在选择器	[attribute]	p[id]	任何带id属性的p标签
相等选择器	[attribute=value]	p[name=“teaName”	name属性为teaName的p标签
包含选择器	[attribute~=value]	p[name~=“stu”]	name属性中包含“stu”单词，并与其它内容通过空格隔开的p标签
连字符选择器	[attribute|=value]	p[lang|=“zh”]	匹配属性等于zh或以zh-开头的所有元素
前缀选择器	[attribute^=value]	p[title^=“zh”]	选择title属性值以“zh”开头的所有元素
子串选择器	[attribute*=value]	p[title*=“ch”]	选择title属性值包含“ch”字符串的所有元素
后缀选择器	[attribute$=value]	p[title$=“th”]	选择title属性值以“th”结尾的所有元素