当前位置: article > 正文

web前端学习（二十六）——CSS3组合选择符、伪类伪元素的相关设置_web选择符

作者：我家小花儿 | 2024-08-22 02:46:35

踩

web选择符

1.CSS组合选择符

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

1.1 后代选择器

后代选择器用于选取某元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中：


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>CSS简单学习</title>
		<style type="text/css">
			div p {
				background-color: red;
			}
		</style>
	</head>
	
	<body>
		<div>
			<p>段落1在div中。</p>
			<p>段落2div中。</p>
		</div>
		<p>段落3不在div中。</p>
		<p>段落4不在div中。</p>
	</body>
</html>

1.2 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> ：


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			div>p {
				background-color: #FF0000;
			}
		</style>
	</head>
	
	<body>
		<h1>网页的第一个标题</h1>
		<div>
			<h2>姓名：张三</h2>
			<p>性别：男</p>
		</div>
		<div>
			<span><p>联系电话：1234567890</p></span>
		</div>
		<p>张三是我的好朋友！！！</p>
	</body>
</html>

1.3 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素：


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			div+p {
				background-color: #FF0000;
			}
		</style>
	</head>
	
	<body>
		<h1>文章标题</h1>
		<div>
			<h2>div内部标题</h2>
			<p>div内部段落</p>
		</div>
		<p>div之后的第一个p元素</p>
		<p>div之后的第二个p元素</p>
	</body>
</html>

1.4 后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			div~p {
				background-color: #FF0000;
			}
		</style>
	</head>
	
	<body>
		<h1>文章标题</h1>
		<div>
			<p>段落1在div中。</p>
			<p>段落2div中。</p>
		</div>
		<p>段落3不在div中。</p>
		<p>段落4不在div中。</p>
	</body>
</html>

2.CSS伪类

CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

2.1 CSS :anchor 伪类


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>CSS简单学习</title>
		<style type="text/css">
			a:link {color: blue;}
			a:visited {color: purple;}
			a:hover {color: red;}
			a:active {color: green;}
		</style>
	</head>
	
	<body>
		<p><b><a href="https://www.runoob.com" target="_blank">这是一个链接</a></b></p>
		<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
		<p><b>注意：</b> a:active 必须在 a:hover 之后。
	</body>
</html>

2.2 CSS :first-child 伪类

可以使用 :first-child 伪类来选择父元素的第一个子元素。

2.2.1 匹配到第一个<p>元素


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			p:first-child {
				color: #0000FF;
			}
		</style>
	</head>
	
	<body>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
	</body>
</html>

2.2.2 匹配所有<p>元素中的第一个<i>元素


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			p>i:first-child {
				color: #0000FF;
			}
		</style>
	</head>
	
	<body>
		<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
		<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
	</body>
</html>

2.2.3 匹配所有作为第一个子元素的<p>元素中的所有<i>元素


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			p:first-child i {
				color: #0000FF;
			}
		</style>
	</head>
	
	<body>
		<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
		<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
	</body>
</html>

2.3 CSS :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则

在下面的例子中，:lang 类为属性值为 "no" 的q元素定义引号的类型：


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			q:lang(no) {
				quotes: "~" "~";
			}
		</style>
	</head>
	
	<body>
		<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
		<p>在这个例子中, :lang定义了q元素的值为lang =“no”</p>
		<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
	</body>
</html>

2.4 CSS :focus 伪类


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			input:focus {
				background-color: aqua;
			}
		</style>
	</head>
	
	<body>
		<form action="https://www.baidu.com">
			账号：<input type="text" name="user" /><br />
			密码：<input type="password" name="password" /><br />
			<input type="submit" name="..." value="登录" />
		</form>
	</body>
</html>

3.CSS伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

3.1 CSS :first-line、:first-letter 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。注意："first-line" 伪元素只能用于块级元素。

"first-letter" 伪元素用于向文本的首字母设置特殊样式。注意： "first-letter" 伪元素只能用于块级元素。


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			p::first-line {
				color: #FF0000;
				font-size: small;
			}
			p::first-letter {
				color: #0000FF;
				font-size: xx-large;
			}
		</style>
	</head>
	
	<body>
		<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
	</body>
</html>

3.2 CSS :before、:after 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

":after" 伪元素可以在元素的内容之后插入新内容。


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			h1::before {
				content: url(img/images/tx.jpg);
			}
			h2::after {
				content: url(img/images/tx.jpg);
			}
		</style>
	</head>
	
	<body>
		<h1>图片插入到了标题之前</h1>
		<h2>图片插入到了标题之后</h2>
	</body>
</html>

4.所有CSS伪类、伪元素

详情请参考菜鸟教程！！！

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not(p)	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/1014447