html - 在 CSS 中，如何获取 2nd degree parent 的颜色？

Question

我有这个 html 代码:

some text, blablabla
<ul>
  <li>hello</li>
  <li>hola</li>
</ul

我需要将列表中的点涂成更大的蓝色，但我还需要列表的文本保持原样(与“一些文本，blablabla”相同的字体、颜色和大小)。

所以我尝试使用这样的 span 标签，

some text, blablabla
<ul>
<li style="color: #00B0F0;font-size: 200%;"><span style="font-size: 100%;color:default;">hello</span></li>
<li style="color: #00B0F0;font-size: 200%;"><span style="font-size: 100%;color:default;">hola</span></li>
</ul>

但是，它不起作用，即列表中的文本与点(蓝色)的颜色相同。

所以，我必须想办法将列表前文本的颜色应用到列表的文本上(知道我不知道我要应用的文本属性，我只是应用特定的字体). 有什么想法吗？

谢谢

Answer 1

您可以只使用 css content 并根据您的要求显示元素符号列表。像这样:

ul {
  list-style: none;
}

ul li:before {
  content: "•";
  font-size: 30px;
  color: blue;
  padding-right: 5px;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
</ul>