css - 当无法包含 CSS/样式部分时，如何内联 :before 元素？

Question

我正在寻找一个 li 元素的样式，并想修改这个 CSS 属性：

li:before {
    color: blue; 
}

但是，我仅限于使用 html、内联、样式。我无权访问我正在处理的文档部分。

我正在尝试做的事情是否可行，如果可以，如何做？

score 7 · Accepted Answer

您可以使用以下 HTML 内联插入新样式表：

<style>
  li:before { color: red; }
</style>

这是这样做的唯一方法的原因是它:before是一个伪元素，这意味着它实际上并没有成为 DOM 的一部分。不幸的是，这意味着无法inline按照要求对其进行样式设置。

举个例子：

<li style="color: red;">text</li>

将为整个LI元素设置样式，而不仅仅是它的:before伪元素，并且因为该:before元素没有标记，所以它不能拥有自己的style=属性。

score 2 · Accepted Answer

在 CSS 中，内联样式优先于链接的 CSS 文件，因此您可以对 li 元素执行以下操作：-

<li style="color: red;">This is a list item</li>

它优先于链接样式表或内部样式表。

如果您想使用更复杂的选择器，那么不幸的是您不走运。

score 1 · Accepted Answer

你可以加：

<style scoped>
    li:before {
        color: red;
    }
</style>

任何地方作为元素的直接子<body>元素，它将应用于整个页面，同时也是有效的 HTML5。

3 回答 3