为什么 margin 在以前的样式之后不能与 class 选择器一起使用？

Question

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

抱歉有额外代码，我不知道如何将 bootstrap 插入代码段 :)

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

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 */      
}

solution : use !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

Answer 2

它确实有效，但是由于特定规则，class 被 id 覆盖。

来自CSS-Tricks on specificity：

Why is that our first attempt at changing the color and font-weight failed? As we learned, it was because simply using the class name by itself had a lower specificity value and was trumped by the other selector which targeted the unordered list with the ID value. The important words in that sentence were class and ID. CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID.

.startAproject {
  margin-left: 100px;
}
  
 #startAproject {
   /*margin-left: 100px */
   
 }

<!-- 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" id="startAproject">Start a project</a>
    </li>

为什么 margin 在以前的样式之后不能与 class 选择器一起使用？

Why margin doesn't work with class selector after previous styles?

html

css

class

margin