Блог

Главная - Вопросы по программированию - CSS выбирает только первое вхождение класса

CSS выбирает только первое вхождение класса

#css #css-selectors

#css #css-селекторы

Вопрос:

Мне нужно добавить стиль к первому вхождению class ( .border ), но не к остальным.

HTML

 <div class="col">
  <div>
    <div class="border">
      <section>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

CSS

 .col{
  padding: 100px;
}
.col section{
  display: flex;
  justify-content: space-around;
  padding: 50px;
}

.col .border{
  border: solid;
}

https://jsfiddle.net/stemon/qw9ezu2h/2/

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

1. вы можете попробовать .col > div > .border{ border: solid; }

2. можете ли вы попробовать это?

Ответ №1:

Первый метод

используйте прямой дочерний (>) селектор в CSS.

 .col > div >.border{
  border: solid;
}
  

 .col{
  padding: 100px;
}
.col section{
  display: flex;
  justify-content: space-around;
  padding: 50px;
}

.col > div >.border{
  border: solid;
}  
 <div class="col">
  <div>
    <div class="border">
      <section>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Второй метод

просто используйте .col section .border{} get second и third occurenece класса border , чтобы отключить границу для них с помощью,

 .col .border{
  border: solid;
}
.col section .border{
  border:none;
}
  

 .col{
  padding: 100px;
}
.col section{
  display: flex;
  justify-content: space-around;
  padding: 50px;
}

.col .border{
  border: solid;
}
.col section .border{
  border:none;
}  
 <div class="col">
  <div>
    <div class="border">
      <section>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Ответ №2:

Вы должны сделать это:

 .col > div > .border{
    ... your code...
}

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

1. По-видимому, это было почти в то же время