gpt4 book ai didi

html - 从 CSS 属性 :not() doesn't work 中排除类

转载 作者:太空宇宙 更新时间:2023-11-03 22:23:06 24 4
gpt4 key购买 nike

我试图让网页上的所有链接都以特定的方式显示。但是,它不适用于导航栏链接。我尝试使用 a:not(.navbar) 排除导航栏,但是,它不起作用:该样式适用于所有链接,包括导航栏中的 Link 1:

html:

<body>
<div class=".navbar">
<a href="#">Link 1</a>
</div>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</body>

CSS:

body a:not(.navbar)  {
font-size: 100%;
color: black;
text-decoration: none !important;
border-bottom: 6px solid red;
}


body a:not(.navbar):hover {
border-bottom: none;
background-color: #80b3ff;
color: white;
text-decoration: none !important;
}

codepen

最佳答案

.navbar 类应用于导航栏的容器 DIV(而不是链接),因此您的选择器需要

div:not(.navbar) a { ... }

div:not(.navbar) a:hover

但是您需要一个容器 div 来容纳其他链接(没有类)才能正常工作,我在下面的代码片段中插入了它。你在 HTML 中的类属性中有一点错误:它是 class="navbar" - 没有点。

div:not(.navbar) a {
font-size: 100%;
color: black;
text-decoration: none !important;
border-bottom: 6px solid red;
}

div:not(.navbar) a:hover {
border-bottom: none;
background-color: #80b3ff;
color: white;
text-decoration: none !important;
}
<body>
<div class="navbar">
<a href="#">Link 1</a>
</div>
<div>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</body>

关于html - 从 CSS 属性 :not() doesn't work 中排除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52690923/

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