Css: как применить те же маркеры типа списка для подсписков html?
Мой HTML-код:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8">
<link rel = "stylesheet" type = "text/css" href = "general.css">
<link rel = "stylesheet" type = "text/css" href = "common/basicDataTypes/list.css">
</head>
<body>
<div class = "title"> title bar</div>
<p>option 1 -</p>
<ul class = "ul-ident">
<li>
<p>test1:</p>
<ul class = "ul-ident">
<li>
<p>subtest1</p>
</li>
<li>
<p>subtest2</p>
</li>
<li>
<p>subtest3</p>
</li>
<li>
<p>subtest4</p>
</li>
</ul>
</li>
<li>
<p>test2</p>
</li>
<li>
<p>test3</p>
</li>
<li>
<p>test4</p>
</li>
<li>
<p>test5</p>
</li>
</ul>
<p>option 2 - </p>
<ul class = "ul-ident">
<li>
<p>test1</p>
</li>
<li>
<p>test2</p>
</li>
</ul>
<hr>
</body>
</html>
Мои стили css:
.title {
text-align: center;
font-weight: bold;
border-style: solid;
.ul-ident {
padding-left: 25px;
}
hr {
width: 90%;
border: none;
height: 3px;
/* Set the hr color */
color: green; /* old IE */
background-color: green; /* Modern Browsers */
}
Мне нужно, чтобы все маркеры были в стиле диска, но для элементов основного списка были выбраны дисковые маркеры, а для элементов подсписка - круговые маркеры.
Я читал, что «Элементы списка будут отмечены маркерами (маленькими черными кружками) по умолчанию» (источник: w3schools)
ниже скриншот текущего результата:
Я пробую IE и хром, и оба дают тот же результат.
Мой вопрос: как сделать все пули в одном стиле списка?
Ответы 2
ul ul {
list-style-type: disc;
}<ul class = "ul-ident">
<li>
<p>test1:</p>
<ul class = "ul-ident">
<li>
<p>subtest1</p>
</li>
<li>
<p>subtest2</p>
</li>
<li>
<p>subtest3</p>
</li>
<li>
<p>subtest4</p>
</li>
</ul>
</li>
<li>
<p>test2</p>
</li>
<li>
<p>test3</p>
</li>
<li>
<p>test4</p>
</li>
<li>
<p>test5</p>
</li>
</ul>
<p>option 2 - </p>
<ul class = "ul-ident">
<li>
<p>test1</p>
</li>
<li>
<p>test2</p>
</li>
</ul>Давайте копнем немного глубже и зададимся вопросом, как узнать, к какому специфичность применить стили? Самый простой способ — использовать инструменты разработчика. Затем отметьте интересующие вас элементы. Затем вы увидите «таблицу стилей пользовательского агента» справа от изображения.
Прямо под ul ul вы увидите, что он перезаписывает ul, который содержит стиль, который вы ищете.
Обновление после комментария:
Вы можете использовать CSS наследовать, чтобы использовать стили, определенные от родительского элемента к дочернему элементу. Смотрите в этом примере, я добавил еще один уровень вложенности. Таким образом, первый уровень определяется как circle, 2-й уровень определяется как square, а все следующие уровни будут inherit причиной square, поскольку sqaure является определенным родителем..
ul {
list-style-type: circle;
}
ul ul {
list-style-type: square;
}
ul ul ul {
list-style-type: inherit;
}<ul>
<li>circle
<ul>
<li>square
<ul>
<li>inherit
<ul>
<li>inherit</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>Зачем мне устанавливать list-style-type: disk, если это значение по умолчанию? И почему вообще по моему исходнику браузер изменил самый видный из подсписков?
значение disc является лишь примером. Вы можете установить его, что хотите/нужно. Браузер отображает только то, что вы делаете. Если вы примените пример, который я опубликовал без классов, он, очевидно, изменит все выбранные вами элементы = ul ul в CSS является селектором
понятно. Но меня интересует общее понимание того, почему, хотя стиль по умолчанию для списка должен быть диском: 1. Я должен определить его явно 2. В этом подсписке браузер отображает разные стили
@C.Mar В каждом браузере есть определенная таблица стилей по умолчанию см. этот ответ для более подробной информации Если вам это не нравится, вы можете использовать CSS reset (вы найдете много, если вы погуглите), но если вы используете сброс CSS, обязательно добавьте нужные стили для каждого элемента вы только что удалили стиль по умолчанию с помощью сброса CSS! Это означает поля, отступы для тела, p, ul li и так далее...
Вы можете установить list-style-type: none; и использовать li:before и применить стиль для создания «точки».
.title {
text-align: center;
font-weight: bold;
border-style: solid;
}
.ul-ident {
padding-left: 25px;
list-style-type: none;
}
.ul-ident li {
position: relative;
}
.ul-ident li:before {
content: '';
position: absolute;
width: 7px;
height: 7px;
background: black;
top: 6.5px;
left: -11px;
border-radius: 50%;
}
hr {
width: 90%;
border: none;
height: 3px;
/* Set the hr color */
color: green;
/* old IE */
background-color: green;
/* Modern Browsers */
}<div class = "title"> title bar</div>
<p>option 1 -</p>
<ul class = "ul-ident">
<li>
<p>test1:</p>
<ul class = "ul-ident">
<li>
<p>subtest1</p>
</li>
<li>
<p>subtest2</p>
</li>
<li>
<p>subtest3</p>
</li>
<li>
<p>subtest4</p>
</li>
</ul>
</li>
<li>
<p>test2</p>
</li>
<li>
<p>test3</p>
</li>
<li>
<p>test4</p>
</li>
<li>
<p>test5</p>
</li>
</ul>
<p>option 2 - </p>
<ul class = "ul-ident">
<li>
<p>test1</p>
</li>
<li>
<p>test2</p>
</li>
</ul>
<hr>
Я хотел бы знать, как вы можете определить, что все подсписки будут иметь тот же стиль основного списка, а не обязательно стиль диска