gpt4 book ai didi

css - 为什么省略这个 "li"CSS 选择器会影响应用的样式?

转载 作者:太空宇宙 更新时间:2023-11-04 15:11:53 24 4
gpt4 key购买 nike

代码是这样的,

<style type="text/css">
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid;
position:relative;}


li, li a {color:#000; text-decoration:none;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid;
border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
#nav li ul.first {left:-1px; top:100%;}
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }
</style>
</head>

<body>
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li><a href="#">Menu 1</a></li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>


</body>

"li, li a" 部分的第三个元素上,如果我删除 "li" 选择器,只留下 "li a",发生的事情是,当我悬停在我的第一级列表项时,第二级列表项出现,但文本没有出现,我不知道是背景影响,还是文本影响,因为我可以找出影响我的二级列表的因素!

哦,顺便说一句,第一级列表项下名为“Menu 1”的第一个菜单是可见的,我认为这是因为“li a”选择器,但至于我删除的部分,我不知道它是如何工作的,有人可以告诉我是什么导致了这个问题,当我删除它时?

最佳答案

您仅将 a 标记应用于“菜单 1”的第一个子项。并且您通过以下代码将文本颜色设置为白色 (#FFF):

#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }

这就是为什么文本不可见的原因,因为背景也是白色的。但是当您将鼠标悬停在 li 上时,文本是可见的,因为您通过执行以下操作将背景颜色更改为黑色。

li,li a {color:#000; text-decoration:none;} //assigning text color of li as black 

如果您从上面的代码中删除 li,那么 li 元素内的文本颜色将保持白色,正如您在上面的代码中提到的那样。

关于css - 为什么省略这个 "li"CSS 选择器会影响应用的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15277592/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com