当无法包含CSS /样式节时，如何内联：before元素？

Question

我正在尝试设置li元素的样式，并希望修改此CSS属性：

li:before {
    color: blue; 
}

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

这是我正在尝试做的，可行的，如果可以的话，如何做？

Answer 1

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

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

并且它将优先于链接的样式表或内部样式表。

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

Answer 2

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

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

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

例如：

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

[将为整个LI元素设置样式，而不仅仅是:before伪元素，并且由于:before元素没有标记，因此无法拥有自己的style=属性。

Answer 3

您可以添加：

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

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