前端学习笔记--css复合选择器

最新推荐文章于 2024-07-25 10:45:42 发布

悟昂知鸥

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量321

点赞数

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

本文链接：https://blog.csdn.net/weixin_44032824/article/details/109313160

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端学习笔记--cs复合选择器

CSS复合选择器
选择器具体实例

CSS复合选择器

前端学习10月27日总结。复合选择器具体内容如下：

选择器	作用	特征	用法
后代选择器	用来选择后代元素	可以是子孙后代	符号是空格，.nav a
子代选择器	选择最近一级元素	只选儿子	符号是大于，.nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	符号是逗号，.nav , .header
链接伪类选择器	选择不同状态的链接	跟链接相关	实际开发常用的是a{}和a：hover
：focus选择器	选择获得光标的表单	跟表单相关	style中的写法是input：focus{}

选择器具体实例

:focus伪类选择器

：focus伪类选择器用于选取获得焦点的表单元素。
下面展示一些 内联代码片。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input:focus{
				background-color: pink;
				}
		</style>
	</head>
	<body>
		<input type="text" >
	</body>
</html>

链接伪类选择器

style样式中的a将网站链接的子颜色变成灰色，去掉下划线。当鼠标点击链接并且鼠标未弹起时，a：hover将字体变为天蓝色，并显示下划线。
下面展示一些 内联代码片。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a {
				color: gray;
				text-decoration: none;
				}
				a:hover{
					color: skyblue;
					text-decoration: underline;
					}
		</style>
	</head>
	<body>
		<a href="#">网站链接</a>
	</body>
</html>

并集选择器

下面展示一些 内联代码片。
将div、p和li标签的颜色统一修改为pink（粉色）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div,p,.pig li{
				color: pink;
				}
		</style>
	</head>
	<body>
		<div>熊大</div>
		<p>熊二</p>
		<span>光头强</span>
		<ul class="pig">
			<li>小猪佩奇</li>
		</ul>
	</body>
</html>

子元素选择器

下面展示一些 内联代码片。
儿子标签a被修改为红色，孙子标签不受影响。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.nav>a{
				color: red;
				}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#">我是儿子</a>
			<p>
				<a href="#">我是孙子</a>
			</p>
		</div>
	</body>
</html>

后代选择器

下面展示一些 内联代码片。
nav—>li—>a的颜色设置为yellow。

// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.nav li a{
				color: yellow;
				}
		</style>
	</head>
	<body>
			<ol>
				<li>1</li>
				<li>2</li>
				<li>
					<a href="#">网站</a>
				</li>
			</ol>
		<ul>
			<li>1</li>
			<a href="#">2</a>
		</ul>
		<ul class="nav">
			<li>去</li>
			<li><a href="#">不</a></li>
		</ul>
	</body>
</html>

悟昂知鸥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记--css复合选择器

前端学习笔记--cs复合选择器CSS复合选择器选择器具体实例:focus伪类选择器链接伪类选择器并集选择器子元素选择器后代选择器CSS复合选择器前端学习10月27日总结。复合选择器具体内容如下：选择器作用特征用法后代选择器用来选择后代元素可以是子孙后代符号是空格，.nav a子代选择器选择最近一级元素只选儿子符号是大于，.nav>p并集选择器选择某些相同样式的元素可以用于集体声明符号是逗号，.nav , .header链接伪类选择器选
复制链接

扫一扫

专栏目录