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: "• "; красный цвет; }
active:before { content: "• "; черный цвет; }
#top-menu ul li:before { content: "• "; красный цвет; }
0
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как изменить цвет маркеров с помощью CSS?
Улучшить статью
Сохранить статью
- Последнее обновление: 20 сен, 2021
Улучшить статью
Сохранить статью
Для представления списка данных в HTML, которые не имеют порядка/последовательности, но связаны друг с другом, используется неупорядоченный список.
Ненумерованные списки создаются с помощью тега
- , а каждый элемент списка записывается с помощью тега
- . Элементы списка отмечены обычными маркерами.
Примечание: Мы не можем изменить цвет маркера ненумерованного списка по умолчанию, но мы можем воспользоваться помощью некоторых других тегов и селекторов.
Есть два способа изменить цвет маркера:
- Использование дополнительного тега разметки.
- Использование стиля Css ::before selector
Стиль по умолчанию: Давайте создадим список данных, используя неупорядоченный список.
HTML
<UL>>li><li>Forli><li>Geeksli>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>. 0016 span>Forspan>li><li><span>Geeksspan>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>Geeksspan>li><li><span>Forspan>li><li><span> ГикиSPAN>LI>UL>.
Давайте посмотрим, как мы можем изменить цвет маркеров, чтобы сделать их более понятными для читателей.
0016 
Создайте свой собственный маркер с собственными отступами и цветовыми стилями. Нет необходимости добавлять дополнительную разметку по сравнению с предыдущим шагом. Старые браузеры не будут поддерживать «:before» и в этом случае могут ухудшить внешний вид вашего сайта.