Почему :: before CSS Selector не работает с элементами списка, когда элемент добавляется динамически? - PullRequest
Новая
       6

Почему :: before CSS Selector не работает с элементами списка, когда элемент добавляется динамически?

3 голосов
/ 13 февраля 2020

У меня есть следующий список: 

<ul id="objects-list">
   <li>Table</li>
   <li>Chair</li>
   <li>Window</li>
</ul>

Со следующим CSS (взято из https://www.w3schools.com/howto/howto_css_bullet_color.asp): 

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
}

Что меняет маркер списка по умолчанию на красный. Все работает нормально, но когда я добавляю новый элемент в список с помощью Javascript, используя 

var objectsList = document.getElementById("objects-list");
var listItem = document.createElement("LI");
listItem.innerHTML = "Pen";
objectsList.appendChild(listItem );

Это происходит в моем файле X HTML. Это не происходит в фрагменте стека.

Предмет правильно добавлен в список, но без маркера. Кроме того, когда я проверяю новый элемент в Инспекторе, он вообще не показывает элемент ":: before".

Может кто-нибудь объяснить, почему?

1 Ответ

6 голосов
/ 13 февраля 2020

Мне удалось воспроизвести вашу проблему, используя файл X HTML.

Проблема в том, что X HTML равен с учетом регистра , li! = LI. Измените код, добавив элемент для использования li: 

var listItem = document.createElement("li");
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^

Вот полный файл X HTML, демонстрирующий проблему. Если вы хотите проверить его локально, обязательно предоставьте файл с правильным Content-Type (с использованием расширения .xhtml и открытие его из файловой системы также работает, по крайней мере, в Chrome и его вариантах): 

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML CSS Problem</title>
<style>
ul {
    list-style: none;
}

ul li::before {
    content: "\2022";
    color: red;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
}
</style>
</head>
<body>
<ul id="objects-list">
   <li>Table</li>
   <li>Chair</li>
   <li>Window</li>
</ul>
<script>
var objectsList = document.getElementById("objects-list");
var listItem = document.createElement("LI");
listItem.innerHTML = "Pen";
objectsList.appendChild(listItem );
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...