014_CSS伪类选择器

最新推荐文章于 2024-09-10 18:52:07 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-09-10 18:52:07 发布

阅读量229

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109063672

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1. 伪类选择器是通过单冒号(:)和特定的具有某种含义的单词来确定所选元素。

2. 所谓伪类选择器, 是相对于"类选择器"来说的。伪类选择器类似于添加类, 所以可以是多个。

3. 伪类的语法:

selector : pseudo-class {
    property: value;
}

4. 锚伪类

4.1. 在支持CSS的浏览器中, 链接的不同状态可以使用不同的方式显示, 这些状态包括: 活动状态(按下鼠标, 可以一直按下鼠标), 已被访问状态, 未被访问状态和鼠标悬停状态。

/* 未访问的链接 */
a:link {
    color: #FF0000;
}	
/* 已访问的链接 */	
a:visited {
    color: #00FF00;
}	
/* 鼠标移动到链接上 */
a:hover {
    color: #FF00FF;
}	
/* 选定的链接 */
a:active {
    color: #0000FF;
}

4.2. 在CSS定义中, a:hover必须被置于a:link和a:visited之后, 才是有效的。

4.3. 在CSS定义中, a:active必须被置于a:hover之后, 才是有效的。

4.4. 伪类名称对大小写不敏感。

4.5. 例子

4.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>锚伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			a:link {
				color: #FF0000;
			}
			a:visited {
				color: #00FF00;
			}
			a:hover {
				color: #FF00FF;
			}
			a:active {
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<p><b><a href="http://www.baidu.com" target="_blank">这是一个链接。</a></b></p>
		<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
		<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
	</body>
</html>

4.5.2. 效果图

5. :first-child伪类

5.1. :first-child伪类来选择做为某元素的第一个子元素(必须是第一个子元素)的元素。

5.2. 这个特定伪类很容易遭到误解, 所以有必要举例来说明。考虑以下标记:

<div>
	<p>These are the necessary steps:</p>
	<ul>
		<li>Intert Key</li>
		<li>Turn key <em>clockwise</em></li>
		<li>Push accelerator</li>
	</ul>
	<p>Do <i>not</i> push the brake at the same time as the accelerator.</p>
</div>

5.2.1. 在上面的例子中, 作为第一个元素的元素包括第一个p、第一个li和em和i元素。

5.2.2. 给定以下规则:

p:first-child {
    font-weight: bold;
}
li:first-child {
    text-transform: uppercase;
}

5.2.3. 第一个规则将作为某元素第一个子元素的所有p元素设置为粗体。第二个规则将作为某个元素(在html中, 这肯定是ol或ul元素)第一个子元素的所有li元素变成大写。

5.3. 最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。

5.4. 必须声明, 这样:first-child才能在IE中生效。

5.5. 例子

5.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>first-child伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p:first-child {
				font-weight: bold;
			}
			li:first-child {
				text-transform: uppercase;
			}
		</style>
	</head>
	<body>
		<div>
			<p>These are the necessary steps:</p>
			<ul>
				<li>Intert Key</li>
				<li>Turn key <em>clockwise</em></li>
				<li>Push accelerator</li>
			</ul>
			<p>Do <i>not</i> push the brake at the same time as the accelerator.</p>
		</div>
	</body>
</html>

5.5.2. 效果图

6. :last-child伪类

6.1. :last-child选择器匹配属于其父元素的最后一个子元素(必须是最后一个子元素)的元素。

6.2. 例子

6.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>last-child伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p:last-child {
				font-weight: bold;
			}
			li:last-child {
				text-transform: uppercase;
			}
		</style>
	</head>
	<body>
		<div>
			<p>These are the necessary steps:</p>
			<ul>
				<li>Intert Key</li>
				<li>Turn key <em>clockwise</em></li>
				<li>Push accelerator</li>
			</ul>
			<p>Do <i>not</i> push the brake at the same time as the accelerator.</p>
		</div>
	</body>
</html>

6.2.2. 效果图

7. :nth-child(n)伪类

7.1. :nth-child(n)选择器匹配属于其父元素的第n个子元素(必须是第n个子元素)的元素, 不论元素的类型。

7.2. n可以是数字、关键词或公式。

7.3. odd和even是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是: 1)。

7.4. 例子

7.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>nth-child伪元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p:nth-child(odd) {
				background: #ff0000;
			}
			p:nth-child(even) {
				background: #0000ff;
			}
		</style>
	</head>
	<body>
		<p>第一个段落。</p>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
		<p>第四个段落。</p>
		<p>第五个段落。</p>
	</body>
</html>

7.4.2. 效果图

8. :nth-last-child(n)伪类

8.1. :nth-last-child(n)选择器匹配属于其父元素的第n个子元素(必须是第n个子元素)的元素, 不论元素的类型, 从最后一个子元素开始计数。

8.2. 例子

8.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>nth-last-child伪元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p:nth-last-child(5) {
				background: #0000ff;
			}
		</style>
	</head>
	<body>
		<p>第一个段落。</p>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
		<p>第四个段落。</p>
		<p>第五个段落。</p>
	</body>
</html>

8.2.2. 效果图

9. :nth-of-type(n)伪类

9.1. :nth-of-type(n)选择属于父元素的特定类型的第n个子元素(按照类型匹配, 不一定是父元素的第n个元素, 可能大于等于n)的元素。

9.2. 例子

9.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>nth-of-type伪元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p:nth-child(2) {
				color: #ffff00;
			}
			p:nth-of-type(2) {
				background: #ff0000;
			}
		</style>
	</head>
	<!-- 
		p:nth-child(2)属于其父元素的第二个子元素的每个p。
		p:nth-of-type(2)属于其父元素的第二个p元素(按照类型p匹配, 不一定是父元素的第二个元素)的每个p。 
	-->
	<body>
		<p>第一个段落。</p>
		<!-- <p>第二个段落。</p> -->
		<b>第二个段落, 但是p给换成了b。</b>
		<p>第三个段落。</p>
		<p>第四个段落。</p>
		<p>第五个段落。</p>
	</body>
</html>

9.2.2. 效果图

10. nth-last-of-type(n)伪类

10.1. nth-last-of-type(n)选择属于父元素的特定类型的第n个子元素(按照类型匹配, 不一定是父元素的第n个元素, 可能大于等于n)的元素, 从最后一个子元素开始计数。

10.2. 例子

10.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>nth-last-of-type伪元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p:nth-last-of-type(2) {
				background: #ff0000;
			}
		</style>
	</head>
	<body>
		<p>第一个段落。</p>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
		<b>第四个段落, 但是p给换成了b。</b>
		<p>第五个段落。</p>
	</body>
</html>

10.2.2. 效果图

11. :first-of-type伪类

11.1. :first-of-type选择属于其父元素的特定类型的首个子元素(按照类型匹配, 不一定是父元素的第一个元素)的元素。

11.2. 例子

11.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>first-of-type伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p:first-child {
				color: #ffff00;
			}
			p:first-of-type {
				background: #ff0000;
			}
		</style>
	</head>
	<body>
		<!-- <p>第一个段落。</p> -->
		<b>第一个段落, 但是p给换成了b。</b>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
		<p>第四个段落。</p>
		<p>第五个段落。</p>
	</body>
</html>

11.2.2. 效果图

12. :last-of-type伪类

12.1. :last-of-type选择属于其父元素的特定类型的最后一个子元素(按照类型匹配, 不一定是父元素的第最后一个元素)的元素。

12.2. 例子

12.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>last-of-type伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p:last-child {
				color: #ffff00;
			}
			p:last-of-type {
				background: #ff0000;
			}
		</style>
	</head>
	<body>
		<p>第一个段落。</p>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
		<p>第四个段落。</p>
		<b>第五个段落, 但是p给换成了b。</b>
	</body>
</html>

12.2.2. 效果图

13. :only-child伪类

13.1. only-child选择属于其父元素的唯一子元素的元素(父元素只能有一个元素)。

14. :only-of-type伪类

14.1. only-of-type选择属于其父元素的特定类型的唯一子元素的元素(父元素可以有多个元素, 但是该类型只能有一个)。

14.2. 例子

14.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>only-child和only-of-type伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p:only-child {
				color: #ffff00;
			}
			p:only-of-type {
				background: #ff0000;
			}
		</style>
	</head>
	<body>
		body只有一个p元素, p:only-child和p:only-of-type都起作用。
		<!-- body有一个p元素和一个div元素, p:only-child不起作用, 而p:only-of-type起作用。 -->
		<p>第一个段落。</p>
		<!-- <div>第一个div</div> -->
	</body>
</html>

14.2.2. 效果图

15. :lang(en)伪类

15.1. :lang(en)伪类使你有能力为不同的语言定义特殊的规则。

15.2. 例子

15.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>:lang 伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			/*quotes属性设置嵌套引用(embedded quotation)的引号类型。*/
			q:lang(zh) {
			   quotes: '"' '"';
			}
			q:lang(en) {
			  quotes: '"' '"' "'" "'";
			}
		</style>
	</head>
	<body>
		<p>文字开始<q lang="zh">段落中的引用的文字</q>文字结束</p>
		<p><q lang="en">This is a <q lang="en">big</q> quote</q></p>
	</body>
</html>

15.2.2. 效果图

16. :focus伪类

16.1. :focus选择器用于选取获得焦点的元素。

16.2. 例子

16.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>focus伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			input:focus {
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<p>在文本框中点击, 您会看到黄色的背景:</p>

		<form>
			First name: <input type="text" name="firstname" /><br>
			Last name: <input type="text" name="lastname" />
		</form>
	</body>
</html>

16.2.2. 效果图

17. :root伪类

17.1. :root选择器匹配文档根元素。

17.2. 在html中, 根元素始终是html元素。

18. :empty伪类

18.1. :empty选择器匹配没有子元素(包括文本节点, 也就是说该元素既没有子元素也不能包含文本)的元素。

18.2. 例子

18.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>root和empty伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			:root {
				color: #ff00ff;
			}
			p {
				width: 300px;
				height: 30px;
			}
			p:empty {
				background-color: #ff0000;
			}
		</style>
	</head>
	<body>
		<p>第一个段落。</p>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
		<p></p>
	</body>
</html>

18.2.2. 效果图

19. :not伪类

19.1. :not(selector)选择器匹配非指定元素/选择器的元素。

19.2. 例子

19.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>not伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p {
				color: #ff0000;
			}
			:not(.myP) {
				color: #ff00ff;
			}
		</style>
	</head>
	<body>
		<p class="myP">第一个段落。</p>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
		<p class="myP">第四个段落。</p>
	</body>
</html>

19.2.2. 效果图

20. :target伪类

20.1. :target选择器可用于选取当前活动的目标元素。

20.2. URL带有后面跟有锚名称, 指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

20.3. 例子

20.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>target伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			#news1, #news2 {
				width: 300px;
				height: 200px;
			}
			:target {
				border: 2px solid #D4D4D4;
				background-color: #e5eecc;
			}
		</style>
	</head>
	<body>
		<h1>点击下面的链接, :target选择器会突出显示当前活动的html锚。</h1>
		<p><a href = "#news1">跳转至内容 1</a></p>
		<p><a href = "#news2">跳转至内容 2</a></p>
		<p id = "news1"><b>内容 1...</b></p>
		<p id = "news2"><b>内容 2...</b></p>
		<p><b>注释: </b>Internet Explorer 8以及更早的版本不支持:target选择器。</p>
	</body>
</html>

20.3.2. 效果图

21. enabled和disabled伪类

21.1. :enabled选择器匹配每个已启用的元素(大多用在表单元素上)。

21.2. :disabled选择器匹配每个被禁用的元素(大多用在表单元素上)。

21.3. 例子

21.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>enabled和disabled伪类</title>
		<meta charset="utf-8" />

		<style type="text/css">
			input[type="text"]:enabled {
				background-color: #ffff00;
			}
			input[type="text"]:disabled {
				background-color: #ff0000;
			}
		</style>
	</head>
	<body>
		<form>
			First name: <input type="text" value="zhang" /><br>
			Last name: <input type="text" value="san" /><br>
			Country: <input type="text" disabled="disabled" value="China" /><br>
		</form>
	</body>
</html>

21.3.2. 效果图