复合器选择器

最新推荐文章于 2020-07-27 22:12:42 发布

山山而川-T

最新推荐文章于 2020-07-27 22:12:42 发布

阅读量164

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/Valentine_T/article/details/107417671

版权

HTML+CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

后代选择器

		<style type="text/css">
			.nav a {
				color:red;
			}
		</style>
</head>
<body>
	<div class="nav">
		<a href="#">我是链接</a>
		<a href="#">我是链接</a>
		<a href="#">我是链接</a>
	</div>
	</body>

子代选择器

		<style type="text/css">
		/* 选择儿子*/
			div>strong {
				color:red;
			}
		</style>
</head>
<body>
	<div>
		<strong>儿子</strong>
	</div>
	<div>
		<p><strong>孙子</strong></p>
	</div>

交集选择器

	<style type="text/css">
			/* 交集 既是 又是 */
			p.red {
				color:red;
			}
		</style>
</head>
<body>
	<p class="red"></p>
	<p class="red"></p>
	<p class="red"></p>
	<div class="red"></div>

并集选择器

	<style type="text/css">
			/* p 和 span 都是红色 */
			p,span {
				color:red;
			}
		</style>
</head>
<body>
	<p>我和你</p>
	<span>我和你</span>
	<div>我和你</div>
	<a href="http://WW

链接伪类选择器

	<style type="text/css">
		/* 未访问过的连接 */		
		a:link {
			color: #333;
			/* 取消 下划线*/
			text-decoration: none;
		}
		/* 访问过的连接 */
		a:visited {
			color: orange
		}
		/* 鼠标经过的连接时候的状态 */
		a:hover {
			color: red;
		}
		/* 选定的连接状态 当我们点击连接到时候（按下鼠标不松开的时候） */
		a:active {
			color: green;
		}
		</style>
</head>
<body>
	<a href="http://WWW.xiaomi.com">小米手机</a>
</body>

五种选择器总结

选择器	作用	特征	使用情况	隔开符及用法
后代选择器	用来选择元素后代的	选择的是所有元素的后代	较多	符号是空格 .nav a
子代选择器	选择最近一级的元素	只选亲儿子	较少	符号是>.nav p
交集选择器	选择两个标签交集的部分	既是又是	较多少	没有符号 p.noe
并集选择器	选择某些样式相同的选择器	可以用于集体声明	较多	符号是逗号 .nav，.header
连接伪类选择器选择器	给链接更改状态		较多

山山而川-T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复合器选择器

后代选择器 <style type="text/css"> .nav a { color:red; } </style></head><body> <div class="nav"> <a href="#">我是链接</a> <a href="#">我是链接</a> <a href="#">我是链接</a> </div&gt
复制链接

扫一扫

专栏目录