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

Question

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

li:before {
    color: blue; 
}

但是,我仅限于使用html,内联,样式.我无法访问我正在处理的文档部分.

我正在尝试做什么,可行的,如果是这样,怎么样？

Answer 1

您可以使用以下HTML插入新的样式表:

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

这是唯一的方法,这:before是一个伪元素,这意味着它实际上不会成为DOM的一部分.不幸的是,这意味着无法inline按照要求设置样式.

举个例子:

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

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

Answer 2

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

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

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

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