子代选择器后代选择器 004

最新推荐文章于 2023-02-09 17:08:45 发布

陀陀吖

最新推荐文章于 2023-02-09 17:08:45 发布

阅读量129

点赞数

分类专栏： html与css

本文链接：https://blog.csdn.net/weixin_40422393/article/details/88809429

版权

html与css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>子代选择器后代选择器</title>
</head>
<style>
	/*子代选择器后代选择器*/
	ul  li a{    /*后代选择器，所有的后代都被选中 这里指一级菜单ul的所有li的所有a标签和二级菜单的li的a标签*/
		color: red;
	}
	ul > li a{   /*子代选择器 “子指的是亲儿子 这里指一级菜单的子级的a标签”*/
		color: green;
	}
	ul  li ul li  a{    /* 二级菜单的li的a标签*/
		color: pink;
	}

	/*交集x选择器和并集选择器*/
	div.red{   /*交集选择器，就是div标签下的类名为red的样式 特殊情况使用*/
		color: red;
	}
	/*div.current:{
	}*/
	div, span, p{     /* 并集选择器*/
		color: red;
	}
	/*伪类选择器*/
	a:hover{

	}
	a:active{

	}
	a:visited{

	}
	a:link{
	}

</style>
<body>
	<!-- 二级菜单 -->
	<ul>
		<li>
			<a href="">一级菜单</a>
			<ul>
				<li><a href="">二级菜单</a></li>
				<li><a href="">二级菜单</a></li>
				<li><a href="">二级菜单</a></li>
			</ul>
		</li>
	</ul>
	<!-- 快捷键生成：ul>li>ul>li>a+tab键  重点，其他的类似快捷键类推-->

	<!-- 交集选择器和并集选择器 -->
	<div class="red">111</div>
	<div>1111</div>
	<div>1111</div>
	<div>1111</div>
	<div>1111</div>
	<p class="red">222</p>
	<p>2222</p>
	<p>2222</p>

	<!-- 伪类选择器 : -->
	:link   未访问的链接
	:visited  已访问的链接
	:hover   鼠标移动到链接上去   常用
	:active   选定链接

</body>
</html>

陀陀吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子代选择器后代选择器 004

子代选择器后代选择器一级菜单二级菜单二级菜单二级菜单 <div class="red">111</div><div>1111</div><div>1111</div>&...
复制链接

扫一扫