как выбрать класс, который является дочерним элементом многих элементов

0 
<div class="rightsidebox">
    <div class="item-info-list">
        <p>Model: AIDCU</p>
        <div class="product-details">
            <p></p>
            <div class="price-box"> <span class="regular-price" id="product-price-1617-related">
      <span class="price">$8.99</span></span>
            </div>
            <p></p>
        </div>
    </div>

Я хочу сделать стиль для цены и сделать зеленый цвет только в том случае, если он находится в правом поле div, и я хочу использовать css, я не могу изменить структуру, потому что это тема, и она не должна противоречить другим ценам в другие темы

Я могу использовать div.rightsidebox>div.item-info-list

но я не могу идти дальше из-за абзаца там, как я могу его решить? У меня слабость в использовании ">" и нескольких классов друг в друге

  • 0
    .rightsidebox .price {цвет: зеленый; } EDIT: использование оператора> - Выбор элемента> element> используется для выбора элементов с определенным родителем. Примечание. Элементы, которые не являются непосредственно дочерними по отношению к указанному родительскому элементу, не выбраны. Больше информации
  • 0
    это не будет работать
Показать ещё 2 комментария
Теги:

5 ответов

0
Лучший ответ
.rightsidebox .price { color: green !important; } // important to override other styles

EDIT: Использование> - selectorr

Селектор элементов>> используется для выбора элементов с определенным родителем. Примечание. Элементы, которые не являются непосредственно дочерними элементами указанного родителя, не выбраны. Больше информации

Поделиться
  • 1
    Спасибо, что были точны и быстро :)
2

Я считаю, что это то, что вы ищете:

div.rightsidebox>div.item-info-list>div.product-details {
    background:#ff0000;
}

JSFiddle: http://jsfiddle.net/RF5e7/

Поделиться
  • 0
    это цвет: # ff0000; и да, он работает в jsfiddle, но не работает для меня, кажется, где-то конфликт
1

Если вы просто хотите выбрать price и сделать ее зеленой, если она содержится в правом поле:

.rightsidebox .price {
     color: green !important;
}
Поделиться
  • 0
    да, это сработало, спасибо тебе и болван Я не знаю, кто из вас ответил мне первым
  • 0
    Doodle ответил на одну минуту раньше, так что, кстати, спасибо! +1
Показать ещё 1 комментарий
0 
.rightsidebox .item-info-list p {
  /* code */
}

Это приведет к элементу абзаца внутри классов, определенных там внутри таблицы стилей (выше курса).

Вам не нужно использовать div.rightsidebox который требуется, только если у вас есть имена классов для нескольких элементов. В противном случае только .rightsidebox в порядке.

Подробнее о дочерних селекторах CSS вы можете узнать здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Поделиться
0 
div.rightsidebox>div.item-info-list .price{
    color: green;
}

Пример JSFiddle.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню