Блог

Главная - Вопросы по программированию - Почему селектор:not() не работает должным образом?

Почему селектор:not() не работает должным образом?

#css #sass #less

#css #sass #Меньше

Вопрос:

У меня небольшая проблема с :not() неправильной работой. Здесь стиль по-прежнему применяется, несмотря на :not(.no-dash) селектор:

HTML

 <div class="no-dash">
   <h2>Simple title</h2>
</div>

SCSS

 div:not(.no-dash) {
   h2 ,h3, h4, h5, h6 {
      margin-bottom: 36px;

      amp;::after {
         content: "";
         display: block;
         position: absolute;
         bottom: -10px;
         left: 0;
         width: 45px;
         height: 3px;
         background-color: $color_yellow;
       }
    }
}

Мой реальный код:

HTML

 <div class="row mt-5">
   <div class="no-dash col-12 table-responsive">
      <h3>Simplifiez-vous le quotidien :</h3>
      <table class="table table-bordered mt-4">
         <thead>
            <tr class="text-center">
               <td class="alert-danger" style="width:50%">
                  <h4><i class="fa fa-thumbs-down"></i> Un soucis ?</h4>
               </td>
               <td class="alert-info" style="width:50%">
                  <h4><i class="fa fa-thumbs-up"></i> Une solution</h4>
               </td>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Vous avez oublié vos clés ?</td>
               <td>Nous avons le double !</td>
            </tr>
            <tr>
               <td>Votre ampoule a grillé ?</td>
               <td>Nous devons bien en avoir une d'avance !</td>
            </tr>
            <tr>
               <td>La pile de votre souris est vide ?</td>
               <td>Nous devons bien en avoir une d'avance !</td>
            </tr>
            <tr>
               <td>Votre imprimante n'a plus d'encre ou est en panne ?</td>
               <td>Nous pouvons imprimer vos documents !</td>
            </tr>
            <tr>
               <td colspan="2">Etc., ...</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

SCSS

 :not(.no-dash) {
   h2, h3, h4, h5, h6 {
      amp;:not(.no-dash) {
         margin-bottom: 36px;

          amp;::after {
             content: "";
             display: block;
             position: absolute;
             bottom: -10px;
             left: 0;
             width: 45px;
             height: 3px;
             background-color: $color_yellow;
          }
      }

      amp;.text-center:not(.no-dash) {
         amp;::after {
            left: 50%;
            transform: translate(-50%);
         }
      }
    
      amp;.text-right:not(.no-dash) {
         amp;::after {
            left: auto;
            right: 0;
         }
      }
   }
}

Комментарии:

1. Это работает так, как ожидалось, проверьте это здесь .

2. Отсутствует закрытие } в первом примере?

3. Действительно, «johannchopin» работает, но почему не для моего. 🙁 Nop «anderssonola» все } присутствуют. Я опубликую свой реальный код.

Ответ №1:

:not() Селектор здесь не работает, потому что ваши h1 , h2 , h3 … вложены в несколько div , и не все из них имеют исключенный класс. Убедитесь сами:

 div:not(.no-dash) h2 {
  color: red;
}  
 <div>
    <div class="no-dash">
        <h2>Nested in multiple div</h2>
    </div>
</div>
    
<div class="no-dash">
    <h2>Nested in a single div</h2>
</div>

<div>
    <h2>With no class</h2>
</div>

Вы можете решить свою проблему, используя селектор дочернего комбинатора:

 div:not(.no-dash) > h2 {
  color: red;
}  
 <div>
    <div class="no-dash">
        <h2>Nested in multiple div</h2>
    </div>
</div>
    
<div class="no-dash">
    <h2>Nested in a single div</h2>
</div>

<div>
    <h2>With no class</h2>
</div>

Это будет работать только в том случае, если элементы, которые вы хотите исключить, являются прямыми дочерними div элементами того, к которому вы применяете исключенный класс.