基础选择器（子、父、全局选择器）

最新推荐文章于 2024-05-11 17:31:39 发布

艾特@##

最新推荐文章于 2024-05-11 17:31:39 发布

阅读量442

点赞数

文章标签： css

本文链接：https://blog.csdn.net/ziaozhangtongxue/article/details/107623818

版权

基础选择器
子、父选择器
并选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div,p{
				color: #DC143C;
			}
		</style>
		/* 并选择器只会给定义好的标签实现效果，哪怕只有一个标签是定义好的也都会有效果 */
	</head>
	<body>
		<div id="">
			并选择器
		</div>
		<p>并选择器</p>
		<div>
			<span>你好</span>
		</div>
	</body>
</html>

子选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 子选择器 */
			div p{
				color: chartreuse;
			}
		
		</style>
	</head>
	<body>
		<div id="">
			<p>子选择器</p>
		</div>
		<div id="">
			你好
		</div>
		<p>哈哈</p>
		<div>
			<span>hahaha</span>
		</div>
		<span>
			<p>欢迎</p>
		</span>
	</body>
</html>

全局选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				color: darkseagreen;	
			}
			/* 这个全局选择器可以让所有的标签都有效果，但是这个优先级最低。当有其他的选择器时全局选择器将失效 */
		</style>
	</head>
	<body>
		<div id="">
			所有数据都会有效果展示
		</div>
		<p>你好啊！</p>
		<span>haha</span>
	</body>
</html>

父选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 子选择器 */
			div > p{
				color: chartreuse;
			}
		
		</style>
	</head>
	<body>
		<div id="">
			<p>父选择器</p>
		</div>
		<div id="">
			你好
		</div>
		<p>哈哈</p>
		<div>
			<span>hahaha</span>
		</div>
		<span>
			<p>欢迎</p>
		</span>
	</body>
</html>

艾特@##

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础选择器（子、父、全局选择器）

基础选择器子、父选择器子选择器<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div,p{ color: #DC143C; } </style> /* 子选择器只会给定义好的标签实现效果，哪怕只有一个标签是定义好的也都会有效果 */ </head> <
复制链接

扫一扫