Почему маржа не работает с селектором класса после предыдущих стилей? - PullRequest
Новая
       13

Почему маржа не работает с селектором класса после предыдущих стилей?

0 голосов
/ 01 мая 2018

Почему маржа не работает с селектором классов после предыдущих стилей?

Извините за дополнительный код, я не знаю, как вставить загрузчик в фрагмент:) 

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

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Это работает, однако класс переопределяется идентификатором из-за правил специфичности.

Из CSS-хитрости по специфичности :

Почему наша первая попытка изменить цвет и вес шрифта не удалась? Как мы узнали, это произошло потому, что простое использование имени класса имело более низкое значение специфичности и было побеждено другим селектором, который нацелился на неупорядоченный список со значением ID. Важными словами в этом предложении были класс и ID. CSS применяет совершенно разные веса специфичности к классам и идентификаторам. На самом деле идентификатор имеет бесконечно большее значение специфичности! То есть никакое количество классов само по себе не может перевесить 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>
0 голосов
/ 01 мая 2018 
.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>

Вот ссылка на ! Важный

...