Использование пользовательских CSS при отсутствии идентификатора div

Question

У меня сайт на Wordpress. Всякий раз, когда мне нужно сделать CSS, я go на Внешний вид> Пользовательский CSS. Чтобы найти элемент, на который я хочу нацелиться, я использую инструмент Inspect.

Однако в этом случае идентификатор элемента отсутствует. Поскольку это небольшое окно браузера для разрешения оплаты картой, я не могу найти идентификатор div с помощью Инспектора.

ИЗОБРАЖЕНИЯ

Не подходит для CSS

OK до CSS

Answer 1

Вы можете прочитать документацию CSS Selector . Существует множество способов выбора элемента без отдельного класса или идентификатора, в том числе с помощью атрибута , типа и даже комбинаторов (которые, вероятно, являются лучшим способом решить эту проблему, которую вы испытываете).

• Вы можете начать выбирать предка нужного вам элемента, такого как оболочка .woocommerce.
• Затем вы можете использовать Прямой дочерний комбинатор: > и выберите элемент .order_details.
• Теперь вы можете использовать Смежный родственный комбинатор: +, чтобы выбрать div что является его соседом .

(Обратите внимание, что здесь используется соседний братский комбинатор , а не General Sibling Combinator: ~, в противном случае он выберет все divs, который является более поздним братом .order_details.

Следующий селектор, вероятно, будет более чем достаточным, и, возможно, даже более конкретным c, чем это необходимо (вы может не нуждаться в >, но я поместил его туда для хорошей меры - при использовании комбинаторов для элементов без идентификатора или класса добавление еще одного слоя специфичности обычно не повредит)

.woocommerce > .order_details + div { /* Styles here*/ }

Если вы пытаетесь переопределить любой из встроенных стилей в этом div, вам нужно быть более внимательным к Specificity селектора. Вообще говоря, есть 4 уровня специфичности:

inline - ID - class - element

Селектор, который я дал вам выше, имеет специфичность 0021 (без встроенного, без идентификатора, 2 класса, 1 элемент). Однако после вашего комментария похоже, что вы пытаетесь перезаписать встроенный стиль, который га s гигантская специфичность 1000. Поэтому, если вы примените любой CSS, который еще не определен в строке, он должен легко вступить в силу. Если вы изменяете какой-либо из встроенных стилей сами, вам нужно использовать в общем, но не всегда, плохую практику: !important Исключение . Использование !important фактически добавит к вашей специфичности пятый порядок величины:

!important - inline - ID - class - element

Итак, если вы пытаетесь изменить встроенный цвет фона, используйте следующее:

.woocommerce > .order_details + div { background-color: #0095ee !important; }

Придаст вашему синему цвету фона поразительную 10021 специфику, которая выше, чем у встроенного серого 01000.

Будьте очень осторожны, чтобы не злоупотреблять !important - это инструмент, который должен быть зарезервированным для подобных ситуаций, и не только потому, что у вас есть несколько CSS правил, которые чуть более конкретны c.

Вот вам удобный CSS Специфичность список и удобный CSS калькулятор специфичности .