html — Изменение цвета маркера в списке?
Задавать вопрос
спросил
Изменено 9 лет, 6 месяцев назад
Просмотрено 5к раз
У меня проблема с изменением цвета маркера в списке.
Итак, у меня есть список внутри тега в моем файле HTML:
Как видите, мой тег имеет
id="top-menu"
. И еще:
Здесь вы можете видеть, что я поместил тег
внутрь своей пули.
Вот мой файл CSS:
nav#top-menu { ширина: 100%; высота: 33 пикселя; цвет фона: #696969; маржа: 0; заполнение: 0; } #верхнее меню ул { дисплей: блок; тип стиля списка: нет; ширина: 600 пикселей; поле: 0 авто; заполнение: 0; } #верхнее меню уль ли { маржа: 0; заполнение: 0; }
Затем я добавляю это:
#top-menu ul li span { черный цвет; }
Проблема в том, что это ничего не меняет.
Другими словами, сейчас все маркеры в моем навигационном меню белые, но я хочу сделать «Продукты» черными.
Что я делаю не так?
Спасибо.
- HTML
- CSS
5
для стилизации пуль, которые вы можете попробовать сделать:
ul { list-style: none; } li:before { содержание:"\2022\00A0"; цвет синий; }
как насчет этого поста: Как установить цвета маркеров в html-списках UL/LI с помощью CSS без использования изображений или тегов span
выдержка:
li:before { содержание: "• "; красный цвет; }
в вашем случае
#top-menu ul li span:before { содержание: "• "; черный цвет; } #верхнее меню ul li:before { содержание: "• "; цвет: SomeOtherColor; }
Обновление: добавлена скрипка с красными точками и одной черной, чтобы вы могли легко переключать активную красная/черная демонстрационная скрипка Я использую класс для определения активного элемента
#top-menu ul li. active:before { content: "• "; черный цвет; } #top-menu ul li:before { content: "• "; красный цвет; }
0
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как изменить цвет маркеров с помощью CSS?
Улучшить статью
Сохранить статью
- Последнее обновление: 20 сен, 2021
Улучшить статью
Сохранить статью
Для представления списка данных в HTML, которые не имеют порядка/последовательности, но связаны друг с другом, используется неупорядоченный список. Ненумерованные списки создаются с помощью тега
- , а каждый элемент списка записывается с помощью тега
- . Элементы списка отмечены обычными маркерами.
Примечание: Мы не можем изменить цвет маркера ненумерованного списка по умолчанию, но мы можем воспользоваться помощью некоторых других тегов и селекторов.
Есть два способа изменить цвет маркера:
- Использование дополнительного тега разметки.
- Использование стиля Css ::before selector
Стиль по умолчанию: Давайте создадим список данных, используя неупорядоченный список.
HTML
<
UL
>
>
li
>
<
li
>For
li
>
<
li
>Geeks
li
>
ul
>
Output:
Plain List
CSS can be used to измените эти маркеры, чтобы сделать их более привлекательными и привлекающими внимание читателей. Давайте посмотрим, как мы можем изменить цвет маркеров, чтобы сделать их более понятными для читателей.
Добавление дополнительной разметки: После добавления дополнительной разметки вы можете использовать отдельные цвета для текста списка и маркеров. В приведенном ниже примере мы заключим текст списка в диапазон, а затем определим стиль для отображения результатов. Вы можете заключить любые теги HTML, такие как ,
и т. д., в соответствии с вашими потребностями.
HTML
<
html
>
<
Head
>
<
Стиль
>
LI {
LI {
: голубой:
;
/* Bullet Color */
}
li span {
цвет: зеленый;
/* Text Color */
}
style
>
head
>
<
корпус
>
<
ул
>
4
<
li
><
span
>Welcome to "GFG"
span
>
li
>
<
li
> <
SPAN
> Гики
SPAN
>
LI
>
<
LI
>
<
LI
>
. 0016span
>For
span
>
li
>
<
li
><
span
>Geeks
span
>
li
>
ul
>
body
>
HTML
>
Выход:
Список раскрашенных пуль119. CSS-стили. Затем добавьте соответствующий стиль для содержимого маркера, которое вы хотите. Вы можете редактировать стили в соответствии с дизайном и интервалом, которые вам нужны. Создайте свой собственный маркер с собственными отступами и цветовыми стилями. Нет необходимости добавлять дополнительную разметку по сравнению с предыдущим шагом. Старые браузеры не будут поддерживать «:before» и в этом случае могут ухудшить внешний вид вашего сайта.
HTML
<
html
>
<
head
>
<
title
>Ссылка для скачивания
title
>
<
style
>
34340015
li {
/* Стиль маркеров по умолчанию стерт */
0 9 0 0 1;
}
li::before {
/* Unicode for a bullet */
content: "\ 2022";
/* Стили для вдавливания* /
Цвет: Вайолет;
дисплей: встроенный блок;
ширина: 1 см;
поле слева: -1em;
}
li {
цвет: зеленый;
}
style
>
head
>
<
body
>
<
ul
>
<
li
><
span
>Welcome to "GFG"
span
>
li
>
<
li
><
span
>Geeks
span
>
li
>
<
li
><
span
>For
span
>
li
>
<
li
><
span
> Гики
SPAN
>
LI
>
UL
>