CSS 3.0学习之选择器总结

时间  2019-11-10
标签 css 3.0 学习 选择器 总结 栏目 CSS 繁體版
原文   原文链接

1.元素选择器

E { … }  /*E表明HTML元素名*/ css

例如：html

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>元素选择器</title>
		<style type="text/css">
			div {
				background-color: grey;
				font: italic normal bold 24px normal 宋体;
			}
		</style>
	</head>
	<body>
		<div>元素选择器</div>
	</body>
</html>

效果：前端

2.属性选择器

属性选择器顾名思义就是根据元素的属性来为确认的元素定义样式。从广义的角度看，元素选择器是属性选择器的特例。属性选择器有以下几种语法css3

Ø  E { … }：为全部E元素定义样式。
Ø  E[attr] { … }：为具备attr属性的元素定义样式。
Ø  E[attr=value] { … }：为具备attr属性，且attr属性为value值的元素定义样式。
Ø  E[attr~=value] { … }：为具备attr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的元素定义样式。
Ø  E[attr|=value] { … }：为具备attr属性，且attr属性的值为以连字符分隔的系列值，其中第一个值为value的元素定义样式。
Ø  E[attr^=value] { … }：为具备attr属性，且attr属性的值为以value开头的字符串的元素定义样式。
Ø  E[attr$=value] { … }：为具备attr属性，且attr属性的值为以value结尾的字符串的元素定义样式。
Ø  E[attr*=value] { … }：为具备attr属性，且attr属性的值为包含value字符串的元素定义样式。测试

例如：ui

 

<!DOCYTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>属性选择器</title>
		<style type="text/css"></style>
		<style type="text/css">
			div{
				width: 300px;
				height: 30px;
				background-color: #eee;
				border: 1px solid black;
				padding: 10px;
			}

			div[id] {
				background-color: #aaa;
			}

			div[id*=bb] {
				background-color: #999;
			}

			div[id^=bb] {
				background-color: #555;
			}

			div[id$=bb] {
				background-color: #555;
				color: #fff;
			}

			div[id=bb] {
				background-color: #111;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div>没有任何属性的div</div>
		<div id="aabbcc">id属性包含bb字符串的div</div>
		<div id="bbccdd">id属性以bb开头的div</div>
		<div id="aabb">id属性以bb结尾的div</div>
		<div id="bb">id属性为bb的div</div>
	</body>
</html>

效果：spa

 

上面定义的5个属性选择器他们的优先级为依次升高。优先级高的选择器定义的样式会覆盖低优先级选择器定义的样式。code

3.ID选择器

Id选择器指定的样式会对具备指定id属性值的元素起做用，其语法格式为：orm

#idValue { … }视频

例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>id选择器</title>
		<style type="text/css">
			#xx{
				width: 300px;
				height: 30px;
				border: 2px dotted black;
				background-color: #ddd;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div id="xx">id属性值为xx的div</div>
	</body>
</html>

效果：

对指定元素起做用的id选择器

E#idValue { … } /*其中E为有效的HTML元素*/

例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>对指定元素起做用的id选择器</title>
		<style type="text/css">
			div{
				width: 300px;
				height: 30px;
				border: 1px solid red;
				background-color: #ddd;
				padding: 3px;
			}

			p#xx{
				border: 2px dotted black;
				background-color: #777;
			}
		</style>
	</head>
	<body>
		<div id="xx">id属性值为xx的div</div>
	</body>
</html>

效果：

PS：貌似该选择器没多大用处，html页面元素id值惟一。

4.Class选择器

语法格式：

[E].className { … } /*E可选，为有效的HTML元素*/

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>class选择器</title>
		<style type="text/css">
			.xx{
				width: 420px;
				height: 30px;
				background-color: #ddd;
			}
			div.xx{
				border: 2px dotted black;
				background-color: #888;
			}
		</style>
	</head>
	<body>
		<div class="xx">class属性为xx的div元素</div>
		<p class="xx">class属性为p的div元素</p>
	</body>
</html>

效果：

5.包含选择器

包含选择器用于指定目标选择器必须处于某个选择器对应元素的内部。其语法格式以下：

Selector1 Selector2{ … }

例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>包含选择器</title>
		<style type="text/css">
			div{
				width: 350px;
				height: 60px;
				border: 1px dotted black;
				background-color: #ddd;
			}
			div .a{
				border: 1px solid red;
				background-color: #888;
			}
		</style>
	</head>
	<body>
		<div><p class="a">处于div以内且class属性为a的p元素</p></div>
		<p class="a">没有处于div以内，但class属性为a的p元素</p>
	</body>
</html>

效果：

6.子选择器

子选择器用于指定目标选择器必须是某个选择器对应元素的子元素。其语法格式以下：

Selector1>Selector2 { … }

子选择器与包含选择器有点类似，它们的区别是：对于子选择器，要求目标选择器对应的元素必须是父选择器对应元素的直接子元素才行；而包含选择器只要求目标选择器对应的元素位于外部选择器对应元素的内部便可。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>子选择器</title>
		<style type="text/css">
			div p{
				width: 400px;
				height: 40px;
				border: 2px solid red;
				background-color: #eee;
			}
			div>p{
				border:2px dotted black;
				background-color: #888;
			}
		</style>
	</head>
	<body>
		<div><p class="a">class属性为a的p元素，为div的直接子元素</p></div>
		<div><section><p class="a">class属性为a的p元素，为处于div内部的元素</p></section></div>
	</body>
</html>

效果：

由例子可见，子选择器的优先级高于包含选择器。

7.CSS3.0新增的兄弟选择器

其语法格式以下：

Selector1 ~ Slector2 { … }

兄弟选择器定义Selector1选择器对应元素后面、全部能匹配Selector2选择器的元素的样式。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>css3新增的兄弟选择器</title>
		<style type="text/css">
			#yy ~ .xx{
				background-color: #888;
			}
		</style>
	</head>
	<body>
		<div>百度</div>
		<div class="xx">新浪微博</div>
		<div id="yy">腾讯视频</div>
		<div class="xx">天龙八部</div>
		<p class="xx">笑傲江湖</p>
	</body>
</html>

效果：

 

8.伪元素选择器

CSS提供以下几个伪元素选择器：

Ø  :first-letter：设置指定对象内的第一个字符的样式。

Ø  :first-line：设置指定对象内的第一行内容的样式。

Ø  :before：与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。

Ø  :after：与内容相关的属性结合使用，用于在指定对象内部的结尾插入内容。

:first-letter和:first-line选择器仅对块元素起做用。若是要对内联元素使用该属性，必须设定对象的height、width属性，或者设置position属性为absolute，或者设置display为block。

例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>伪元素选择器</title>
		<style type="text/css">
			p:first-letter{
				color: red;
				font-size: 20px;
			}
			section:first-line{
				font-size: 20px;
				font-weight: bold;
			}
			div:before{
				content:'我说：“';
			}
			div:after{
				content: "”";
			}
		</style>
	</head>
	<body>
		<p>we are 图样图森破</p>
		<section>我只喜欢你，<br/>懂</section>
		<div>今每天气怎么样？</div>
	</body>
</html>

效果：

9.CSS3.0新增的伪类选择器

Css3.0新增的伪类选择器主要分为以下3类：

Ø  结构性伪类选择器
Ø  UI元素状态伪类选择器
Ø  其余伪类选择器

9.1 结构性伪类选择器

结构性伪类选择器指的是根据HTML元素之间的结构关键进行筛选的伪类选择器。可分为以下几个：

Ø  Selector:root：匹配文档的根元素。在HTML文档中，根元素永远是<html>元素
Ø  Selector:first-child：定义Selector选择器对应元素的父元素的第一个子元素的样式。
Ø  Selector:last-child：定义Selector选择器对应元素的父元素的最后一个子元素的样式。
Ø  Selector:nth-child(n)：定义Selector选择器对应元素的父元素的第n个子元素的样式。
Ø  Selector:nth-last-child(n)：定义Selector选择器对应元素的父元素的倒数第n个子元素的样式。
Ø  Selector:only-child：定义Selector选择器对应元素的样式，Selector选择器对应的元素必须是其父元素的惟一子节点元素。
Ø  Selector:first-of-type：定义与Selector选择器对应元素同类型、同级的兄弟元素中的第一个元素的样式。
Ø  Selector:last-of-type：定义与Selector选择器对应元素同类型、同级的兄弟元素中的最后一个元素的样式。
Ø  Selector:nth-of-type(n)：定义与Selector选择器对应元素同类型、同级的兄弟元素中的第n个元素的样式。
Ø  Selector:nth-last-of-type(n)：定义与Selector选择器对应元素同类型、同级的兄弟元素中的倒数第n个元素的样式。
Ø  Selector:only-of-type：定义Selector选择器对应元素的样式，Selector选择器对应的元素必须是与它同类型、同级的兄弟元素中的惟一一个元素。
Ø  Selector:empty：定义Selector选择器对应元素的样式，要求Selector选择器对应元素为内部没有任何子元素（包括文本节点）的元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>结构性伪类选择器</title>
		<style type="text/css">
			:root{
				background-color: #ddd;
			}
			body{
				background-color: #888;
			}
			li:first-child{
				border: 1px solid red;
			}
			li:last-child{
				border: 1px dotted black;
			}
			li:nth-child(2){
				background-color: green;
			}
			li:nth-last-child(2){
				color: #fff;
			}
			span:only-child{
				font-size: 30px;
			}
			p:first-of-type{
				color: red;
			}
			p:last-of-type{
				color: blue;
			}
			p:nth-of-type(2){
				font-weight: bold;
			}
			p:nth-last-of-type(2){
				font-variant: small-caps;
			}
			span:only-of-type{
				font-size: 12px;
			}
			p:empty{
				width: 150px;
				height: 30px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>经过:root定义html背景色为<span style="width:50px;background-color: #ddd;height:30px;">#ddd</span></div>
		<ul>
			<li>童年呵，是梦中的真，是真中的梦，是回忆时含泪的微笑。</li>
			<li>童年呵，是梦中的真，是真中的梦，是回忆时含泪的微笑。</li>
			<li>童年呵，是梦中的真，是真中的梦，是回忆时含泪的微笑。</li>
			<li><span>童年呵</span>，<span>是梦中的真</span>，是真中的梦，是回忆时含泪的微笑。</li>
			<li><span>童年呵</span>，是梦中的真，是真中的梦，是回忆时含泪的微笑。</li>
		</ul>
		<div>
			<p>杜鹃花(azalea)</p>
			<p>杜鹃花(azale)</p>
			<p>杜鹃花(azalea)</p>
			<p><span>杜鹃花</span><span>(azalea)</span></p>
			<p><span>杜鹃花</span>(azalea)</p>
			<p></p>
		</div>
	</body>

</html>

效果：

 

PS：从以上代码能够看出:only-of-type选择器比:only-child选择器的优先级高，这里读者能够自行测试其余相似选择器的优先级。

对于带参数n的伪类选择器，它们的参数不止能够为n，还能够是odd、even或者xn+y。例如3n+1，则第1、4、7…节点将运用定义的样式。

9.2 UI元素状态伪类选择器

 

 

 

UI元素状态伪类选择器有以下几个：

Ø  Selector:link：定义未被访问前的元素的样式。（一般只能是超连接）

Ø  Selector:visited：定义已被访问过的元素的样式。（一般只能是超连接）
Ø  Selector:active：定义被用户激活状态的元素的样式。（在鼠标点击与释放之间的事件）
Ø  Selector:hover：定义处于鼠标悬停状态的元素的样式。
Ø  Selector:focus：定义已获得焦点的元素的样式。
Ø  Selector:enabled：定义处于可用状态的元素的样式。
Ø  Selector:disabled：定义处于不可用状态的元素的样式。
Ø  Selector:checked：定义处于选中状态的元素的样式。
Ø  Selector:default：定义页面打开时处于选中状态（即便当前没有被选中亦可）的元素的样式
Ø  Selector:read-only：定义处于只读状态的元素的样式。
Ø  Selector:read-write：定义处于读写状态的元素的样式。
Ø  Selector:disabled：定义处于不可用状态的元素的样式。
Ø  Selector::selection：定义元素中当前被选中的内容的样式。

在上面这类伪类选择器中，伪类选择器前面的Selector选择器能够省略。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" ontent="no-cache">
		<meta http-equiv="expires" content="0">
		<title>UI元素状态伪类选择器</title>
		<style type="text/css">
			a:link{
				color: red;
				text-decoration: none;
			}
			a:hover{
				color: grey;
				text-decoration: underline;
			}
			a:visited{
				color: black;
			}
			:disabled{
				font-size: 19px;
			}
			:enabled{
				font-weight: bold;
				font-size: 19px;
			}
			:checked{
				outline: red solid 1px;
			}
			:default{
				outline: red solid 3px;
			}
			:focus{
				text-decoration: underline;
			}
			:read-only{
				background-color: #eee;
			}
			:-moz-read-only{
				background-color: #eee;
			}
			:read-write{
				background-color: #8e8
			}
			:-moz-read-write{
				background-color: #8e8
			}
			button:active{
				background-color: blue;
			}
			::-moz-selection{
				color: red;
				background-color: blue;
			}
			
		</style>
	</head>
	<body>
		<ol>
			<li><a href="http://www.baidu.com/" target="_blank">百度一下</a></li>
			<li><button disabled>不可用按钮</button></li>
			<li><button>可用按钮</button></li>
			<li>男<input type="radio" value="male" name="sex"/>女<input type="radio" value="female" name="sex"/>未知<input type="radio" value="unknown" name="sex"/></li>
			<li>
				<input type="text" readonly value="只读文本">
				<input type="text" value="可读写文本">
			</li>
		</ol>
	</body>
</html>

效果：

 

9.3 其余伪类选择器

CSS3.0还新增了两个特殊的伪类选择器：

Ø  Selector:target：设置命名锚点目标元素的样式
Ø  Selector1:not(Selector2)：设置Selector1选择器对应元素的样式，但排除Selector2选择器对应的元素。
例如：

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>:target和:not伪类选择器</title>
		<style type="text/css">
			:target{
				background-color: #ff0;
			}
			div{
				width: 400px;
				height: 50px;
				margin-top: 10px;
				border: 1px solid black;
			}
			div:not(#ai){
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#chibang">隐形的翅膀</a></li>
			<li><a href="#fangxia">放下</a></li>
			<li><a href="#ai">爱一点</a></li>
			<li><a href="#zhaogu">照顾本身</a></li>
			<li><a href="#tong">爱与痛的边缘</a></li>
		</ul>
		<div id="chibang">
			我终于翱翔用心凝望不惧怕
		</div>
		<div id="fangxia">
			我爱你爱让我放下
		</div>
		<div id="ai">
			天上的月露出半支角
		</div>
		<div id="zhaogu">
			你的呼吸一高一低
		</div>
		<div id="tong">
			你吻过个人脸是千百遍
		</div>
	</body>
</html>

效果：

 

That's all，thanks for read！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程