#html #css #responsive-design #styles #html-lists
Вопрос:
У меня есть вложенный список, упомянутый ниже. Я хочу раскрасить его сертификацию «first li» и графический дизайн в другой цвет, а следующий список ISO и брошюру-в другой цвет, а внутренний список ISO-в другой цвет. Как это можно было сделать?
lt;ulgt; lt;ligt;Certification lt;ulgt; lt;ligt;ISO lt;ulgt; lt;ligt;lt;label class="checkbox"gt;lt;input type="checkbox" value="17" name="category[]"gt; CElt;/labelgt;lt;/ligt; lt;ligt;lt;label class="checkbox"gt;lt;input type="checkbox" value="18" name="category[]"gt; FSSAIlt;/labelgt;lt;/ligt; lt;ligt;lt;label class="checkbox"gt;lt;input type="checkbox" value="19" name="category[]"gt; Trademarklt;/labelgt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;/ulgt; lt;/ligt; lt;li class="category-name"gt;Graphics Designing lt;ulgt; lt;ligt; Brochure lt;/ligt; lt;/ulgt; lt;/ligt; lt;/ulgt; Ответ №1:
В CSS есть несколько способов сделать это.
Этот способ просто использует вложенную структуру, чтобы выбрать, какие списки какие раскрашивать.
Он начинается с окрашивания каждого li, который является прямым потомком ul, в синий цвет.
Затем он становится более конкретным, окрашивая каждого ли, который является ребенком ул, который является ребенком (не внуком) ли.
Затем он становится еще более конкретным, опускаясь на другой слой и окрашивая эти элементы в зеленый цвет.
Вы, конечно, можете вызвать некоторые из классов, которые у вас уже есть, чтобы сделать свой выбор. Это вопрос выбора и зависит от вашего конкретного варианта использования. Этот фрагмент является общим для раскрашивания любого набора вложенных неупорядоченных списков.
ulgt;li { color: blue; } ulgt;ligt;ulgt;li { color: magenta; } ulgt;ligt;ulgt;ligt;ulgt;li { color: green; } lt;ulgt; lt;ligt;Certification lt;ulgt; lt;ligt;ISO lt;ulgt; lt;ligt;lt;label class="checkbox"gt;lt;input type="checkbox" value="17" name="category[]"gt; CElt;/labelgt;lt;/ligt; lt;ligt;lt;label class="checkbox"gt;lt;input type="checkbox" value="18" name="category[]"gt; FSSAIlt;/labelgt;lt;/ligt; lt;ligt;lt;label class="checkbox"gt;lt;input type="checkbox" value="19" name="category[]"gt; Trademarklt;/labelgt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;/ulgt; lt;/ligt; lt;li class="category-name"gt;Graphics Designing lt;ulgt; lt;ligt; Brochure lt;/ligt; lt;/ulgt; lt;/ligt; lt;/ulgt;