html - 为什么在以前的样式之后边距不适用于类选择器？

Question

为什么在以前的样式之后边距不适用于类选择器？

很抱歉有额外的代码，我不知道如何将引导程序插入代码段:)

.menu a {
  margin: 0px 6.5px}

.startAproject {
  margin-left: 100px;  /* This propertie doesn't work*/
  background-color: green; }   /* But this works well*/
  

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="menu">
  <ul class="nav nav-pills">

    <li class="nav-item">
      <a class="nav-link uppercase outline">Blog</a>
    </li>
    <li class="nav-item">
      <a class="nav-link uppercase outline">Work</a>
    </li>
    <li class="nav-item">
      <a class="nav-link uppercase outline startAproject">Start a project</a>
    </li>

标签： htmlcssclassmargin

Answer 1

.menu a {
  margin: 0px 6.5px
}

上面的代码覆盖了

.menu a {
  margin: 0px 6.5px
}
.startAproject {
  background : red ;
  margin-left: 100px !important; /* use !important t make it work */      
}

---

解决方案：使用!important

.menu a {
  margin: 0px 6.5px
}
.startAproject {
  background : red ;
  margin-left: 100px !important; /* use !important to make it work */      
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="menu">
  <ul class="nav nav-pills">

    <li class="nav-item">
      <a class="nav-link uppercase outline">Blog</a>
    </li>
    <li class="nav-item">
      <a class="nav-link uppercase outline">Work</a>
    </li>
    <li class="nav-item">
      <a class="nav-link uppercase outline startAproject">Start a project</a>
    </li>

---

这是对!important的参考