Next element css: CSS element+element Selector

Leave a Comment / Css / By /

html. Каков синтаксис селектора в CSS для следующего элемента?

Задавать вопрос

спросил

Изменено 4 года, 4 месяца назад

Просмотрено 308 тысяч раз

Если у меня есть тег заголовка

название

 h2.hc-reform{
    плыть налево;
    размер шрифта: 30 пикселей;
    цвет:#0e73bb;
    вес шрифта: полужирный;
    поля: 10px 0px;
}

и после этого у меня есть абзац

здесь

.

Как я могу с помощью CSS гарантировать, что каждый тег

, следующий за h2.hc-reform , будет использовать: clear:both;

это будет:

 h2.hc-reform > p{
     ясно: оба;
}

почему-то не работает.

  • html
  • css
  • css-селекторы
  • братья и сестры

0

Это называется соседним родственным селектором и обозначается знаком плюс…

 h2.hc-reform + p {
  ясно: оба;
}

Примечание. Не поддерживается в IE6 и более ранних версиях.

7

Вы можете использовать родственный селектор ~ :

 h2.hc-reform ~ p{
     ясно: оба;
}

Выбирает все элементы p , которые идут после .hc-reform , а не только первый.

1

нет > — дочерний селектор.

тот, который вам нужен, это +

, поэтому попробуйте h2.hc-reform + p

поддержка браузера невелика

1

>

является дочерним селектором. Итак, если ваш HTML выглядит так:

 

    заглавие
    
здесь

… тогда это ваш билет.

Но если ваш HTML выглядит так:

 

    заглавие



здесь

Затем вам нужен соседний селектор:

 h2.hc-reform + p{
     ясно: оба;
}

1

Не совсем так. h2.hc-reform > p означает «любой p ровно на один уровень ниже h2.hc-reform ».

Вам нужно h2.hc-reform + p . Конечно, это может вызвать некоторые проблемы в старых версиях Internet Explorer; если вы хотите сделать страницу совместимой со старыми IE, вам придется либо вручную добавлять класс к абзацам, либо использовать JavaScript (например, в jQuery вы можете сделать что-то вроде $('h2.hc- реформа').next('p').addClass('первый абзац')

).

Дополнительная информация: http://www.w3.org/TR/CSS2/selector.html или http://css-tricks. com/child-and-sibling-selectors/

Селектор CSS — получить следующий элемент

спросил

Изменено 3 года, 10 месяцев назад

Просмотрено 429 раз

У меня есть следующий HTML:

 <дел>
    <дел>
        
Товар

        
Этот продукт

        
Категория

        
Тестовая категория

Я хотел бы выбрать текст Этот продукт и Тестовая категория . Любые предложения, как настроить таргетинг на следующий элемент после Product

и Category .

Спасибо!

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

1

Я не уверен, что вы имеете в виду под выбором. Но если вы хотите получить селектор для доступа к ним, это будет ответ:

 div.comp-top.col-sm-6 > div> div.col-6.comp-value{
   цвет фона: серый;
}

Или альтернативно:

div.comp-top.col-sm-6 > div > div:nth-child(2) , где (x) является элементом x в div.

Если вы хотите выбрать их обоих, вы можете использовать (четный) для выбора четного элемента в div.

 div.comp-top.col-sm-6 > div > div:nth-child(2){
   цвет синий;
}

div.comp-top.col-sm-6 > div > div:nth-child(4){
   цвет:зеленый;
}

/*div.comp-top.col-sm-6 > div > div:nth-child(even){
   цвет фона: серый;
} закомментированный код выше предназначен для получения четного элемента, ниже для выбора по классу comp-value */

div.comp-top.col-sm-6>
 
 div> div.col-6.comp-value{
   цвет фона: серый;
} 
 <дел>
    <дел>
        
Товар

        
Этот продукт

        
Категория

        
Тестовая категория