CSS3-使用CSS选择器

CSS3-使用CSS选择器

<!-- 选择所有元素 -->
<!-- * -->
<style type = "text/css">
	*{
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 根据类型选择元素 -->
<!-- <元素类型> -->
<style type = "text/css">
	a,th{							
		border: thin black solid;
		padding: 4px;
	}
</style>


<!--根据类选择元素 -->
<!-- .<类名> 或 <元素类型>.类名 -->
<style type = "text/css">
	.class2 span.class1{
		border: thin black solid;
		padding: 4px;
	}
</style>
<!-- 选择多个类  span.class1.class2 -->


<!-- 使用ID选择元素 -->
<!-- #<ID值> -->
<style type = "text/css">
	#id{
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 根据属性选择元素 -->
<!-- [属性]  或 <元素类型>[属性] -->
<style type = "text/css">
	[href]{
		border: thin black solid;
		padding: 4px;
	}
</style>
<!-- 可为属性限定条件:					css版本		 -->
<!--	[属性]								2        -->
<!--	[属性="a"]	属性值为a				2        -->
<!--	[属性^="a"]	属性值以a开头			3        -->
<!--	[属性$="a"] 属性值以a结尾			3        -->
<!--	[属性*="a"]	属性值含有a				3        -->
<!--	[属性~="a"]	属性值其一个为a元素		2        -->
<!--	[属性|="a"]	属性为连字符分割,其一a	2        -->


<!-- 并集选择器 -->
<style type = "text/css">
	a , [lang|="en"]{
		border: thin black solid;
		padding: 4px;
	}
</style>



<!-- 后代选择器 -->
<!-- 选择所有后代 -->
<style type = "text/css">
	p span{
		border: thin black solid;
		padding: 4px;
	}
</style>

<style type = "text/css">
	#id td{
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 选择子元素 -->
<!-- 选择直接子代 -->
<style type = "text/css">
	body > * > span , tr > th{
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 选择兄弟元素 -->
<!-- 选择紧跟在其后的元素 -->
<style type = "text/css">
	p + a{
		border: thin black solid;
		padding: 4px;
	}
</style>

<!-- 选择指定元素之后的元素 -->
<style type = "text/css">
	p ~ a {
		border: thin black solid;
		padding: 4px;
	}
</style>


<!-- 使用伪元素选择器 -->

<!-- 使用　::first-line 选择器,选择文本块的首行 -->
<style type = "text/css">
	::first-line {
		background: grey;
		color: white;
	}
</style>

<style type = "text/css">
	p::first-line{
		border: thin black solid;
		padding: 4px;
	}
</style>

<!-- 使用 ::first-letter 选择器 -->
<style type = "text/css">
	::first-letter{
		border: thin black solid;
		padding: 4px;
	}
</style>


<!--使用 :before 和 :after 选择器 -->
<!-- :before 在选中元素的内容之前插入内容 -->
<!-- :after 在选中元素的内容之后插入内容 -->
<style type = "text/css">
	a:before{
		content: "插入的内容";
	}
	a:after {
		content: "插入的内容";
	}
</style>


<!-- 使用CSS计数器 -->
<!-- :before 和 :after 经常和CSS计数器一起使用 -->
<style type = "text/css">
	body {
		counter-reset: countername;
	}
	p:before {
		content: counter(countername)".";
		counter-increment: countername;
	}
</style>
<!-- counter-reset: 为计数器设置名称和初始值; -->
<!-- 例如: counter-reset: countername1 1 countername2 2; -->
<!-- 使用counter(countername)使用计数器; -->
<!-- 可改变数值格式: counter(countername, lower-alpha); -->
<!-- counter-increment: 设置计数器增量; -->
<!-- 例如 counter-increment: countername 2; -->