Как выбрать этот DIV на моем веб-сайте html?
Как вы можете видеть на изображении, как я могу выбрать выделенный элемент div в css? У меня есть div с w-grid-item-h в другом блоке страницы, поэтому я не могу использовать его напрямую для изменения css. Это вывод моей темы WordPress, поэтому я не могу присвоить ей желаемое имя класса!
Вы явно используете библиотеку пользовательского интерфейса, которая предоставляет некоторые классы CSS для стилизации своих компонентов. Чтобы вы могли внести какие-либо изменения вручную или выбрать определенные элементы в их шаблоне, вам необходимо указать пользовательские классы или другие идентификаторы для родительских элементов, содержащих этот div. Вопрос слишком общий и будет очень сложно дать конкретный ответ на его решение.
Ответы 3
Нам нужен весь документ, чтобы убедиться, что селектор уникален. Я бы начал с выбора по классу .w-grid-item-h. Это может выбрать div в каждой из ваших статей. Если вам нужен только первый, поднимитесь по дереву (возможно, пока не найдете родителя с подходящим идентификатором) и используйте :first-child, :first-of-type и т. д. Ваш атрибут data-id может быть полезен и здесь. . article[data-id=182] div Также, если у вас есть контроль над серверной частью, не упускайте из виду возможность создания подходящего атрибута id.
Если этот div настолько особенный, просто дайте ему идентификатор и используйте этот идентификатор в своем CSS.
<div class = "w-grid-item-h" id = "my-very-special-div"></div>
#my-very-special-div {
color: pink;
}
То есть, если у него есть прямой доступ к этим элементам DOM. Иногда они рендерятся во время выполнения генераторами шаблонов, и он не может изменить их в HTML.
Можно ли это решить с помощью дополнительного класса вместо id?
Проблема заключается не в том, какой тип селектора CSS он должен использовать, а в том, может ли он изменить HTML для начала. Если этот шаблон автоматически генерируется в DOM во время выполнения с использованием какой-либо среды пользовательского интерфейса (например, Vue / React / Angular), реализовать это может быть сложно. То, что вы видите в DOM, не всегда совпадает с шаблоном, который вы загружаете в браузер :)
А, я понимаю, что вы имеете в виду. Но я не знаю, насколько сложно манипулировать выходным HTML с помощью механизма шаблонов...
Учитывая, что именно мы генерируем HTML, очевидно!
Иногда не мы генерируем шаблон, а сторонние UI-библиотеки... И поскольку у меня недостаточно информации в вопросе, я не могу ничего предполагать...
найдите ближайшего родителя с идентификатором (который должен быть уникальным) и перейдите к целевому элементу
#us_grid_2 > .w-grid-list > article > .w-grid-item-h {
color: #f00;
}
вы можете использовать более простой подход и позволить браузеру самостоятельно искать всех потомков, если вы знаете, что не будет никаких других элементов, соответствующих той же иерархии
#us_grid_2 .w-grid-item-h {
color: #ff0;
}
если us_grid_2 генерируется автоматически, в следующий раз, когда он изменит макет в своем шаблоне, этот идентификатор может быть автоматически сгенерирован в другое имя, что может нарушить это правило CSS...
1- Попробуйте опубликовать код вместо изображения, 2- В вашем браузере вы можете увидеть ниже
selector, используемый для выделения div.