Question

为什么在上一个样式之后，margin不能用于类选择器？

很抱歉有额外的代码，我不知道如何将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 */      
}

解决方案：使用!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

它确实有效，但由于特殊性规则，该类被id覆盖。

来自CSS-Tricks on specificity：

为什么我们第一次尝试更改颜色和字体重量失败了？正如我们所了解的那样，这只是因为简单地使用类名本身具有较低的特异性值，并且被另一个选择器击败，该选择器使用ID值来定位无序列表。该句中的重要词语是类和ID。 CSS对类和ID应用了截然不同的特异性权重。事实上，ID具有无限的特异性价值！也就是说，任何类别的数量都不能超过ID。

＆＃13;

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

＆＃13;

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

＆＃13;

为什么margin在以前的样式之后不能用于类选择器？

2 个答案: