Css3选择器

来自CloudWiki
跳转至： 导航， 搜索

伪类和伪元素

css3选择器重点在于能够区分伪类和伪元素，

伪元素：：两个冒号，伪类一个： 伪元素个数较少，出去伪元素都是伪类。 伪类就是假的类，伪元素就是假的元素， 伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。 而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。

源代码

<div class="list">
		
		<div class="box">box</div>
		<p>这是box前的段落标签</p>
		<div class="con">con</div>
		<p>这是段落标签1</p>
		<div class="conMain">conMain</div>
		<div class="boxCon">boxCon</div>
		<p>这是段落标签2</p>
		<header>这是头部标签</header>
		<p>这是段落标签3</p>
		<div class="main">
			<p>您好</p>
			<p> </p>
			<span>span</span>
			<span>span</span>
		</div>

		禁用<input type="text" disabled><br>
		可用<input type="text"><br>

		<a href="#news1">新闻1</a>
		<a href="#news2">新闻2</a>
		<div id="news1">新闻1新闻1新闻1新闻1新闻1</div>
		<div id="news2">新闻2新闻2新闻2新闻2新闻2新闻2</div>
	</div>

兄弟选择器

.box~p： .box所有的p都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻) 

.box~p{
			background-color: green;
		}

属性选择器

E[attribute^=value] 用于选取带有以指定值开头的属性值的元素

E[attribute$=value] 用于选取属性值以指定值结尾的元素

E[attribute*=value] 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词 

div[class^=c]{
			font-size: 40px;
			color:red;
		}
		div[class$=on]{
			border:5px solid pink;
		}
		div[class*=o]{
			background-color: #000;
		}


伪类选择器

root 选择文档的根元素，HTML 里，永远是<html>元素
last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素
nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素
nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
only-child 向元素添加样式，且该元素是它的父元素的唯一子元素
first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元 素
last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个 元素
nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
nth-last-oftype(n)向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
only-of-type 向元素添加样式，且该元素是同级同类型元素中唯一的元素
empty 向没有子元素（包括文本内容）的元素添加样式
:root{
			background-color: pink;
		}

     .list div:last-child{
			background-color: red;
		}

     .list div:nth-child(2n){
			border:4px solid blue;
      }

     .list p:only-child{
			color:red;
		}
		.list p:first-of-type{
			color:green;
		}
		.list span:only-of-type{
			font-size: 100px;
		}
		.list :empty{
			width: 100px;
			height:100px;
			border:2px solid red;
		}


伪元素选择器

enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
not(selector) 向不是 selector 元素的元素添加样式
target 向正在访问的锚点目标元素添加样式
.list :enabled{
			border:1px solid red;
		}
		.list :disabled{
			border:1px solid green;
		}
		:target{
			border:10px solid blue;
		}

源代码

<!DOCTYPE html>
<html>
<head>
	<title>css3选择器</title>
	<meta charset="utf-8">
	<style>
		.box~p{
			background-color: green;
		}
		/*div[class^=c]{
			font-size: 40px;
			color:red;
		}
		div[class$=on]{
			border:5px solid pink;
		}
		div[class*=o]{
			background-color: #000;
		}*/
		:root{
			background-color: pink;
		}
		.list div:last-child{
			background-color: red;
		}
		.list div:nth-child(2n){
			border:4px solid blue;
		}
		.list p:only-child{
			color:red;
		}
		.list p:first-of-type{
			color:green;
		}
		.list span:only-of-type{
			font-size: 100px;
		}
		.list :empty{
			width: 100px;
			height:100px;
			border:2px solid red;
		}*/
		.list :enabled{
			border:1px solid red;
		}
		.list :disabled{
			border:1px solid green;
		}
		:target{
			border:10px solid blue;
		}
	</style>
</head>
<body>
	<div class="list">
		
		<div class="box">box</div>
		<p>这是box前的段落标签</p>
		<div class="con">con</div>
		<p>这是段落标签1</p>
		<div class="conMain">conMain</div>
		<div class="boxCon">boxCon</div>
		<p>这是段落标签2</p>
		<header>这是头部标签</header>
		<p>这是段落标签3</p>
		<div class="main">
			<p>您好</p>
			<p> </p>
			<span>span</span>
			<span>span</span>
		</div>

		禁用<input type="text" disabled><br>
		可用<input type="text"><br>

		<a href="#news1">新闻1</a>
		<a href="#news2">新闻2</a>
		<div id="news1">新闻1新闻1新闻1新闻1新闻1</div>
		<div id="news2">新闻2新闻2新闻2新闻2新闻2新闻2</div>
	</div>

兄弟选择器
.box~p： .box所有的p都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻)

属性选择器：
	E[attribute^=value] 用于选取带有以指定值开头的属性值的元素
	E[attribute$=value] 用于选取属性值以指定值结尾的元素
	E[attribute*=value] 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词

伪类选择器
	:root 选择文档的根元素，HTML 里，永远是<html>元素
	:last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素
	:nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素
	:nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
	:only-child 向元素添加样式，且该元素是它的父元素的唯一子元素
	:first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元 素
	:last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个 元素
	:nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
	:nth-last-oftype(n)向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
	:only-of-type 向元素添加样式，且该元素是同级同类型元素中唯一的元素
	:empty 向没有子元素（包括文本内容）的元素添加样式

伪元素选择器
	:enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
	:disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
	:not(selector) 向不是 selector 元素的元素添加样式
	:target 向正在访问的锚点目标元素添加样式
<!-- 

	css3选择器重点在于能够区分伪类和伪元素，
	伪元素：：两个冒号，伪类一个：  
	伪元素个数较少，出去伪元素都是伪类。
	伪类就是假的类，伪元素就是假的元素，
	伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。 而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
 -->


</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Css3选择器&oldid=15068”