Python学习 Day19 特殊选择器_python后代选择器-CSDN博客

本文链接：https://blog.csdn.net/ShengXIABai/article/details/113798414

本文详细介绍了CSS中的关系选择器、属性选择器、伪类选择器，并通过实例展示了它们在网页样式的具体应用，包括后代选择器、子代选择器、属性选择器在表单元素上的应用，以及伪类选择器在超链接状态控制上的用法。此外，还提供了一个实现百度导航栏样式的例子，涉及到列表、浮动和定位等知识点。

摘要由CSDN通过智能技术生成

特殊选择器

（一）关系选择器

（1）后代选择器

关系选择器：后代选择器
只要是这个选择器的后代，样式都会发生变化
div下面的所有h1标签样式都会发生改变

（2）子代选择器

只改变子标签的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 关系选择器： 后代选择器
			只要是这个选择器的后代，样式都会发生变化
			 div下面的所有h1标签样式都会发生改变
			 */
			/*div h1{
				color: red;
			}*/
			/*
			 关系选择器：子代选择器
			 只改变子标签的样式
			 */
			div>h1{
				color: yellow;
			}
			span>h1{
				color: blueviolet;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<span>
			 	<h1>这是标题</h1>
			 	<h1>这是标题</h1>
			 	<h1>这是标题</h1>
		 		 <h1>这是标题</h1>
			 	<h1>这是标题</h1>
			 </span>
		</div>
	</body>
</html>

在这里插入图片描述

（二）属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/*属性选择器*/
		input[type="password"]{
			background-color: royalblue;
		}
		input[type="text"][value="nana1"]{
			background: yellowgreen;	
		}
			
		</style>
	</head>
	<body>
		<form>
			用户名：<input type="text" value="nana1" />
			用户名2：<input type="text" value="nana2" />
			密&emsp;码：<input type="password" value="123456" />
			<input type="submit" value="登录" />
		</form>
	</body>
</html>

在这里插入图片描述

（三）伪类选择器

向某些选择器添加效果
一般伪类选择器都用在超链接上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/*设置静止状态*/
		a:link{
			color: yellow;
		}
		/*设置鼠标悬浮状态*/
		a:hover{
			color: green;
		}
		/*设置触发状态*/
		a:active{
			color: blueviolet;
		}
		/*设置完成状态*/
		a:visited{
			color: darkcyan;
		}
			
		</style>
	</head>
	<body>
		<a href="index.html">超链接</a>
	</body>
</html>

（四）百度导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style-type: none;/*将无需列表的图标取消*/
			}
			li{
				float: left;/*向左浮动*/
				margin-left: 20px;/*设置间隔20px*/
				
			}
			a{
				text-decoration: none;/*去掉下划线*/
				font-size: 13px;/*字号*/
				color: black;/*字体颜色*/
			}
			a:hover{
				color: blue;
			}
			div{
				/*定位*/
				position: absolute;/*绝对定位*/
				right: 200px;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>
					<a href="aaa">新闻</a>
				</li>
				<li>
					<a href="aaa">hao123</a>
				</li>
				<li>
					<a href="aaa">地图</a>
				</li>
				<li>
					<a href="aaa">视频</a>
				</li>
			</ul>
		</div>
	</body>
</html>