html子代选择器的问题

liudachu 2019-12-22 10:34:06

html代码

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>下拉菜单</title>

	<link rel="stylesheet" href="1.css" type="text/css">

</head>

<body>

	<div class="nav">

	<ul>

	<li><a href="">首页</a>

		<ul>

			<li><a href="">最新更新</a></li>

			<li><a href="">下载排行</a></li>

		</ul>

	</li>

	<li><a href="">企业新闻</a>

		<ul>

			<li><a href="">企业介绍</a></li>

			<li><a href="">最新动态</a></li>

		</ul>

	</li>

    <li><a href="">产品信息</a>

		<ul>

			<li><a href="">最新产品</a></li>

			<li><a href="">产品列表</a></li>

		</ul>

	</li>

	<li><a href="">特价促销</a>	

		<ul>

			<li><a href="">促销</a></li>

			<li><a href="">最新推荐</a></li>

			<li><a href="">产品列表</a></li>

		</ul>

	</li>

	<li><a href="">联系我们</a>	

		<ul>

			<li><a href="">公司信息</a></li>

			<li><a href="">联系我们</a></li>

			<li><a href="">公司地图</a></li>

		</ul>

	</li>

	<li><a href="">新手论坛</a>	

		<ul>

			<li><a href="">你问我答</a></li>

			<li><a href="">网站大学堂</a></li>

			<li><a href="">论坛</a></li>

		</ul>

	</li>	

	</ul>

	</div>

</body>

</html>

css代码



*{

	margin:0;

	padding:0;

}

li{

	list-style:none;

	text-align:center;

	line-height:24px;

}

a{

	text-decoration:none;

	font-size:12px;

	display:block;

	color:#333333;

}

.nav{

	position:absolute;

	left:250px;

}

.nav>ul>li{

    border-left:1px #000 solid;

}

.nav ul li{

    width:120px;

    float:left;

    border-bottom:1px #fff solid;

    background:#ffd2d2;

    box-shadow: 5px 5px 2px #888;

}

.nav ul li ul{

	display:none;

}

.nav ul li a:hover{

	color:#fff;

	background-color:#BB0916;

}

.nav ul li:hover ul,#nav ul li:hover ul{

	display:block;

	width:120px;

	height:24px;

}

.nav ul li ul li{

	background-color:#FEE;

	width:120px;

}

.nav ul ul li a:hover{

	background:#F7F7B9;

	color:#666666;

}

这是下拉菜单其中
.nav>ul>li{
border-left:1px #000 solid;
}
加一个黑色的左边框特意给一级菜单，为什么又给了二代菜单，>不是子代选择器吗？

...全文

145 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

JiexC0la 2019-12-23

打赏
举报

引用 1 楼 JiexC0la 的回复：

你的二级菜单包含在一级菜单的li里边，这里的黑色边框是一级边框的，如果只想加一级菜单的边框，可以把样式加在一级标题的a标签上

就是你的一级菜单是a标签，不是li

JiexC0la 2019-12-23

打赏
举报

你的二级菜单包含在一级菜单的li里边，这里的黑色边框是一级边框的，如果只想加一级菜单的边框，可以把样式加在一级标题的a标签上

liudachu 2019-12-23

打赏
举报

好吧，谢谢了

引用 4 楼 JiexC0la 的回复:

引用 3 楼 Chef Liu 的回复：
[quote=引用 2 楼 JiexC0la 的回复:] [quote=引用 1 楼 JiexC0la 的回复：]你的二级菜单包含在一级菜单的li里边，这里的黑色边框是一级边框的，如果只想加一级菜单的边框，可以把样式加在一级标题的a标签上
就是你的一级菜单是a标签，不是li

我改成了.nav>ul>li a{ border-left:1px #000 solid; } 结果没有发生变化，

[/quote]你只是想要在第一个li的a标签加border，不是所有的a，建议你在一级导航的a标签加个class[/quote]