Question

我正在尝试使网页上的所有链接看起来都具有特定的外观。但是，它不适用于导航栏链接。我尝试使用a:not(.navbar)排除navbar，但是，此方法不起作用：该样式适用于所有链接，包括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

Answer 1

.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>

从CSS属性中排除类：not（）不起作用

1 个答案: