CSS исключая детей из стиля - PullRequest
Новая
       13

CSS исключая детей из стиля

0 голосов
/ 22 февраля 2019 

ol li{
color: blue;
}
ol ol li {
color:black;
}
ol ol {
	list-style: upper-alpha;
<ol>
  <b><li>Topic 1</li></b>
    <ol>
      <li> Sub Topic 1</li>
      <li> Sub Topic 2</li>
      <li> Sub Topic 3</li>
    </ol>
    <b><li>Topic 2</li></b>
    <b><li>Topic 3</li></b>
    <ol>
      <li>Sub Topic 1</li>
      <li>Sub Topic 2</li>
      <li>Sub Topic 3</li>
    </ol>
</ol>

Простой вопрос, я надеюсь.Первый уровень <ol> всегда является заголовком.Попытка стилизовать 

ol li {
font-size:larger;
}

без изменения ол ли ли или других детей.

Огромное спасибо!

Редактировать:

Структура HTML 

<ol>
<b><li>Topic</li></b>
<ol>
<li> Sub Topic 1 </li>
<li> Sub Topic 2 </li>
</ol>
<b><li>Topic 2</li></b>
</ol>

Цель состоит в том, чтобы устранить необходимость в жирных тегах.

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Немного неясно, что вы спрашиваете: «Первый уровень ol - это всегда заголовок» - Вы действительно имеете в виду заголовок типа <h1>, <<code>h2> и т. Д., Или вы имеете в виду, чтоВы хотите применить специальный стиль к первому <li> внутри каждого <ol> тега?

В последнем случае вы можете использовать селектор :first-child, например 

ol > li:first-child {
  font-size:larger;
}

Если вы хотите применить специальный стиль к любому первому дочернему элементу каждого тега <ol>, вы можете использовать общий селектор * в сочетании с :first-child 

ol > *:first-child {
  font-size:larger;
}

(хотя я сомневаюсь, что все, кроме li как прямого потомка ol, будет действительным HTML)

Добавление после редактирования вопроса:

Поскольку ваш ol будет находиться внутри какого-то другого элемента, вы можете использовать следующий селектор, чтобы определить только direct ("первый уровень") дочерних элементов ol.(Я применил класс к родительскому элементу и использовал его в селекторе) 

.parent>ol>li {
  font-weight: bold;
}
<div class="parent">
  <ol>
    <li>Topic</li>
    <ol>
      <li> Sub Topic 1 </li>
      <li> Sub Topic 2 </li>
    </ol>
    <li>Topic 2</li>
  </ol>
</div>
0 голосов
/ 22 февраля 2019

Если он всегда находится внутри определенного контейнера (например, .container), вы можете сделать это: 

.container > ol > li {
font-size:larger;
}

Здесь он будет применяться только к непосредственному дочернему элементу и только к прямому дочернему элементу этого,

...