Запрос выбора CSS только для родительского контента

Скажем, у меня есть следующее.

   <div class = "price">$64 used
    <span class = "originally">$160 new</span>
    <span class = "you-save">You save 60%</span>
   </div>

Я хочу выбрать только «использованные 64 доллара», а не остальные в дочерних промежутках. Как бы я сделал что-то подобное? Я попытался выбрать, как показано ниже, и ничего не работает.

article > .price
article > .price:not(span)
article > div:not(span)
article > div:not(.originally):not(.you-save)

Обновлено: Для уточнения..

const test = document.querySelector('section > div.price');
console.info(test.innerText);

64 доллара б/у 160 долларов новый Вы экономите 60%

Я хочу использовать только 64 доллара. Это вообще возможно? Я не делал сайт, я пытаюсь очистить его.

Вы оформляете article > .price одним способом, а затем перезаписываете этот стиль через article > .price span. Например. установите красный цвет на .price и верните черный цвет на .price span. Было бы полезно, если бы вы могли объяснить, каков ваш вариант использования, например, если вы пытаетесь использовать селектор CSS для селектора JQuery что-то или просто для стиля.

— 11.03.2019 20:37

div:not(span) не имеет смысла... выбирать элементы div, которые не являются диапазонами?

— 11.03.2019 20:38

html css

11.03.2019 20:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 3

div.price

выполнять работу. Для меня лучше просто использовать

.price.

11.03.2019 20:53

Просто внесите небольшое изменение:

<div class = "price">
  <span>$64 used</span>
  <span class = "originally">$160 new</span>
  <span class = "you-save">You save 60%</span>
</div>

CSS:

article > .price > span:not([class]) { color: red; }

11.03.2019 20:59

tag:not() работает не так. Вы можете исключить тег span из использования стиля для тегов span. Но вы не можете выбирать детей таким образом.

Просто примените стиль к div и перезапишите свойства дочерних элементов.

.price {
  color: blue;
}

span.originally {
  color: green;
}

span.you-save {
  color: red;
}

<article>
  <div class = "price">$64 used
    <span class = "originally">$160 new</span>
    <span class = "you-save">You save 60%</span>
   </div>
</article>

11.03.2019 21:02

Другие вопросы по теме

Рем медиазапросы

Javascript button.style.backgroundColor возвращает "" до тех пор, пока не будет нажата

Есть ли способ получить прямой доступ к фактическим координатам сетки автоматически размещенного элемента в сетке CSS?

Иметь div stetch внутри div и заполнить пустое пространство div

Добавление иконок в Yii2 Navbar

CSS не применяется при переполнении страницы

Как прочитать значение html-тегов innerHTML с помощью селектора css или xpath?

Добавить входное значение в диалоговые окна предупреждений

Как установить DIV в правой части браузера с процентным полем, чтобы он приближался к краю при изменении размера браузера?

Предупреждение Непредвиденная конкатенация строк литералов

Запрос выбора CSS только для родительского контента

Ответы 3

Другие вопросы по теме

Похожие вопросы