Как добавить объявление nth-child(n), применяя встроенные стили к элементу (который, очевидно, содержит несколько элементов).Как добавить стиль nth-child() в встроенный стиль?
Например, предположим, что у меня есть div, который содержит три элемента p.
общих правил таблиц стилей будет идти, как это:
div p:nth-child(2) {
color: blue;
}
Но как я могу все еще цвет второго абзаца синего, применяя встроенный стиль к содержащему div?
Атрибут встроенного стиля относится только к элементу с атрибутом. Например, если у вас есть атрибут стиля на div, стили будут применяться только к этому div (унаследованные свойства и противоречивые стили, несмотря на это). Вы не можете настроить таргетинг на другой элемент, используя атрибут встроенного стиля для другого элемента.
Даже если вы применяете атрибут стиля к элементу p, вы не можете заставить встроенные стили применять условно на основе псевдокласса. См. Мой ответ на вопрос this question. Однако, если разметка динамически генерируется, вы можете контролировать, будет ли атрибут стиля печататься в первую очередь с использованием аналогичной логики, но это выходит за рамки вашего вопроса.
@Dawar Husain: Это не встроенные стили. Это внутренняя таблица стилей. Две совершенно разные вещи. – BoltClock
Прошу прощения, я думал, что вы говорите об атрибуте отображения –
Я думаю, @Abhimanyu просит ** встроенный _value _ ** атрибута отображения. Ваша интерпретация вопроса кажется странной. Поскольку он просит применить встроенные стили к содержанию div, а его фрагмент кода показывает встроенный стиль для дочернего элемента div (p) интерпретация TylerH представляется приемлемой –
Предполагая, что вы хотите применить декларацию nth-child(n) как встроенный стиль, так это то, что вы не можете редактировать файл CSS или не хотите; а вам нужно применить стиль непосредственно на странице, вы можете попробовать просто добавить <style> тег рядом с DIV в вопросе:
<style>
div.myContainer p:nth-child(2) {
color: blue;
}
</style>
<div class="myContainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
Я хотел бы отметить: это не идеальный способ структурирования кода. Стили и HTML/контент должны быть разделены для создания правильно отформатированной и семантической разметки.
Кроме того, если вам необходимо применить этот стиль в нескольких местах, он может стать беспорядочным и/или непоследовательным. Однако я понимаю, что иногда вам приходится делать исключения в зависимости от проекта.
Это больше не встроенный стиль ... но он выполняет эту задачу для отладки. –
li:nth-child(10n-2) {
background: red;
}
Это база для моего исходного кода!
@ j08691 Я не думаю, что это вопрос, который задает этот вопрос. – TylerH
Вы добавляете стиль inline в теги абзацев. Я не думаю, что вы можете настроить целевые дочерние селекторы со встроенными стилями – Huangism
@TylerH Это именно то, о чем спрашивает OP: как применить псевдокласс к элементу с javascript. И ответ - нет, это невозможно. – dfsq