Question

我很好奇我为什么在ul选择器上使用“列表样式：无”但我在适用于ul的类选择器上使用代码时却无法运行代码。

我尝试将“ list-style：none”应用于.navigation，这是ul类，但是它不起作用。要点仍然存在。

<nav>

  <ul class=“navigation”>
    <li><a href=“#”>About</a></li>
    <li><a href=“#”>Pricing</a></li>
    <li><a href=“#”>Contact</a></li>
  </ul>

  <div class=“button”>
    <a class=“btn-main” href=“#”>Sign up</a>
    <a class=“btn-hot” href=“#”>Get a quote</a>
  </div>  

</nav>

* {
  margin: 0;
  padding: 0;
}

$color-primary: #f9ed69; //yellow color

nav {
  margin: 30px;
  background-color: $color-primary;
}

.navigation {
  list-style: none;
}

我希望.navigation选择器的工作方式与ul选择器相同。

Answer 1

您的引号类型错误

.navigation {
  list-style: none;
}

<ul class=“navigation”>
  <!--wrong quotes-->
  <li><a href=“#”>About</a></li>
  <li><a href=“#”>Pricing</a></li>
  <li><a href=“#”>Contact</a></li>
</ul>

<ul class="navigation">
  <li><a href=“#”>About</a></li>
  <li><a href=“#”>Pricing</a></li>
  <li><a href=“#”>Contact</a></li>
</ul>

Answer 2

您在类名周围的引号使事情变得混乱。尝试使用类似“或'not”的内容重写它们

Answer 3

您使用了错误的引号- class =“导航” 纠正一个- class =“导航”

Answer 4

当您的类库中有一个navigation类作为其预定义类的一部分时，这类问题经常发生。

在继续操作之前，请将引号更改为“”，然后重试。如果这样做不起作用，请确保将样式表导入库之后。例如，如果您有引导程序，请先导入引导程序，然后在底部导入样式表文件。

您可以尝试使用：

nav > .navigation{
list-style-type: none;
}

有时候，使用类来样式化元素并不总是必须的，但这取决于您个人要做的事情。样式属性是全局属性，通常会与您可能使用的CSS UI库冲突。因此，在您的情况下，我将亲自使用：

nav > ul{
list-style: none;
}

Answer 5

它正在处理我为测试您的代码而创建的代码段。确保没有更多的样式应用于全局ul。这会使您的类选择器由于优先级顺序而失败。

__func__

* {
  margin: 0;
  padding: 0;
}

$color-primary: #f9ed69; //yellow color

nav {
  margin: 30px;
  background-color: $color-primary;
}

.navigation {
  list-style: none;
}

ul选择器有效，但不适用于ul的类

5 个答案: