CSS的扩展选择器

最新推荐文章于 2022-10-09 16:21:15 发布

N_nanshan

最新推荐文章于 2022-10-09 16:21:15 发布

阅读量185

点赞数

文章标签： html css web

本文链接：https://blog.csdn.net/N_nanshan/article/details/109511744

版权

CSS的扩展选择器

1、关联选择器

文字段

*设置div标签里面的p标签的样式，嵌套标签里面的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的扩展选择器</title>
		<style type="text/css">
			div p {
				background-color: #008000;
				color: #FFFF00;
			}
			
		</style>
	</head>
	<body>
		<div>
			<p>Css的扩展选择器，嵌套式</p>
		</div>
		<div>da'd'badbhdbhschscj</div>
	</body>
</html>

嵌套式方法

2、组合选择器
如果在一个html界面中，使得

和

标签内容格式显示的一致

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的组合选择器</title>
		<style>
			div ,p {
				background: orange;
				color: #008000;
			}
		</style>
	</head>
	<body>
		<div>CSS的组合选择器</div>
		<p>CSS的组合选择器</p>
	</body>
</html>

3、伪元素选择器
常见在界面中访问超链接时的不同状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<style>
			a:link{
				background-color: #FFFF00;
			}
			
			a:hover{
				background-color: #FF0000;
			}
			
			a:active{
				background-color: #008000;
			}
			a:visited{
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">访问百度</a>
	</body>
</html>

N_nanshan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的扩展选择器

CSS的扩展选择器1、关联选择器文字段*设置div标签里面的p标签的样式，嵌套标签里面的样式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS的扩展选择器</title> <style type="text/css"> div p { background-color: #008000; color:
复制链接

扫一扫