Можно ли изменить стиль таким образом, чтобы он применялся только к нумерованным спискам?

Question

Венедикт

css , wordpress

Можно ли изменить стиль таким образом, чтобы он применялся только к нумерованным спискам?

Доброй ночи всем! Я тщательно искал решение, но пока безуспешно (возможно, его просто нет). Проблема в следующем: у меня есть элегантный стиль для нумерованных списков, но он также применяется и к маркированным спискам, что приводит к неаккуратному внешнему виду. <br/><br/> Вот код стиля: <br/><br/> ol { <br/> list-style-type: none; <br/> counter-reset: num; <br/> margin: 0 0 0 60px; <br/> padding: 15px 0 5px 0; <br/> font-size: 18px; <br/> } <br/> ol li { <br/> position: relative; <br/> margin: 0; <br/> padding: 0 0 10px 0; <br/> } <br/> ol li:before { <br/> content: counter(num); <br/> counter-increment: num; <br/> display: inline-block; <br/> position: absolute; <br/> top: 0px; <br/> left: -60px; <br/> width: 50px; <br/> color: #ef6780; <br/> text-align: center; <br/> font-size: 26px; <br/> font-weight: bold; <br/> } <br/><br/> Вот как это выглядит в итоге: <br/><br/>

10 февраля 2025 г. 22:44

Ответы на вопрос 3

Похожие вопросы

Answer 1

Доброй ночи! Чтобы стиль применялся только к нумерованным спискам `<ol>`, нужно быть уверенным, что ваш CSS не затрагивает маркированные списки `<ul>`. Ваш текущий код уже применяет стиль только к `<ol>`, так что он не должен затрагивать `<ul>`. Возможно, вы просто не наблюдаете разницу при отображении.

Для улучшения и гарантии того, что стиль не будет применен к маркированным спискам, вы можете добавить специфические стили только для `ol` и `ol li`, как вы уже сделали. Однако, чтобы уточнить настройки, можно переопределить стиль для `<ul>`. Например:

```css
ul {
    margin: 0; /* Уберите или стилизуйте на ваше усмотрение */
    padding: 0; /* Уберите или стилизуйте на ваше усмотрение */
    list-style-type: disc; /* Или любую другую желаемую маркировку */
    font-size: 16px; /* Установите размер шрифта для маркированных списков */
}

ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 60px;
    padding: 15px 0 5px 0;
    font-size: 18px;
}

ol li {
    position: relative;
    margin: 0;
    padding: 0 0 10px 0;
}

ol li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: -60px;
    width: 50px;
    color: #ef6780;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}
```

Таким образом, ваш стиль для нумерованных списков не будет конфликтовать с другими стилями для маркированных списков. Если у вас все равно возникают проблемы с отображением, проверьте, что в вашем коде нет конфликтующих стилей, установленных где-либо еще (например, в других CSS-файлах или в тегах `<style>`).

Answer 2

Гугли css селекторы 
 ol > li:before

Answer 3

Спасибо, буду изучать!