CSS 子元素选择器

最新推荐文章于 2024-05-25 16:28:25 发布

舒眉

最新推荐文章于 2024-05-25 16:28:25 发布

阅读量2.9k

点赞数

分类专栏： CSS 文章标签： css 选择器

本文链接：https://blog.csdn.net/sunshine_0880/article/details/78071442

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS中子元素选择器比较有针对性，只能作为某元素子元素的元素。

语法：父元素 > 子元素 { 属性:属性值;}

需要注意的是，>的前后均有空格，且不能省略。

（类比京东页面的一部分）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.nav {
			background-color: rgba(111,111,111,1);
			width: 230px;
			height: 500px;
		}
		.nav > ul > li > a {  /*针对于a*/
			color: white;
			font-size: 14px;
			text-decoration: none; /*去掉链接下的下划线*/
		}
		.nav > ul > li > a:hover {
			color: red;
			font-size: 16px;   /*经过的时候字体变大，觉得好玩添了一下，可以去掉*/
		}
		.nav > ul > li > a:active {
			color: red;
		}
		.nav > ul > li {  /*针对于li*/
			color: white;
			margin-top:8px;  /*设置无序排列中的行间隔*/
			margin-left:-10px; /* 值可以为负的*/
		}
		/*去掉无序排列前的圆点*/
		.uo {
			/*margin: 0; padding :0； 恢复圆点*/
			list-style: none;  
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul class="uo">
			<li><a href="#">家用电器</a></li>
			<li><a href="#">手机</a> / <a href="#">运营商</a> / <a href="#">数码</a></li>
			<li><a href="#">电脑</a> / <a href="#">办公</a></li>
			<li><a href="#">家居</a> / <a href="#">家具</a> / <a href="#">家装</a> / <a href="#">厨具</a></li>
			<li><a href="#">男装</a> / <a href="#">女装</a> / <a href="#">童装</a> / <a href="#">内衣</a></li>
			<li><a href="#">美妆个护</a> / <a href="#">宠物</a></li>
			<li><a href="#">女鞋</a> / <a href="#">箱包</a> / <a href="#">钟表</a> / <a href="#">珠宝</a></li>
			<li><a href="#">男鞋</a> / <a href="#">运动</a> / <a href="#">户外</a></li>
			<li><a href="#">汽车</a> / <a href="#">汽车用品</a></li>
			<li><a href="#">母婴</a> / <a href="#">玩具乐器</a></li>
			<li><a href="#">食品</a> / <a href="#">酒类</a> / <a href="#">生鲜</a> / <a href="#">特产</a></li>
			<li><a href="#">礼品鲜花</a> / <a href="#">农资绿植</a></li>
			<li><a href="#">医药保健</a> / <a href="#">计生情趣</a></li>
			<li><a href="#">图书</a> / <a href="#">音像</a> / <a href="#">电子书</a></li>
			<li><a href="#">机票</a> / <a href="#">酒店</a> / <a href="#">旅游</a> / <a href="#">生活</a></li>
			<li><a href="#">理财</a> / <a href="#">众筹</a> / <a href="#">白条</a> / <a href="#">保险</a></li>
		</ul>
	</div>
</body>
</html>

结果如下：

舒眉

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS 子元素选择器

CSS中子元素选择器比较有针对性，只能作为某元素子元素的元素。语法：父元素 > 子元素 { 属性:属性值;}需要注意的是，>的前后均有空格，且不能省略。（类比京东页面的一部分） Document .nav { background-color: rgba(111,111,111,1); width: 230px; height: 500px;
复制链接

扫一扫