如何避免`<style>`标签被我的CSS选择器捕获？

html5 • • 问答

我正在使用 CSS 来设置一些现有文档的样式，并使用许多相邻的同级选择器（例如 item1 + item2）在元素之间应用间距等。但是，许多文档还在<style>页面顶部包含标签，或者散布在应用了自定义样式的各处。自定义样式本身很好，但不幸的是<style>标签本身干扰了我的 CSS 选择器。例如，如果我想将 amargin-top应用于除第一个元素之外的每个元素，我通常会使用* + *（又名“lobotomized owl”方法），这非常有效，直到有人在顶部放置了一个样式标签。现在样式标签被读取为第一个元素，因此页面上的每个元素都被选中。我事先不知道元素类型；它们可以是有效 HTML 代码（div、span、p、table 等）的任意组合，并且还需要考虑嵌套元素 t。我试图修复的关键选择器是以通配符 ( * + item)开头的相邻同级选择器。

使用类似的东西:not(style) + item是我的第一个想法，但是如果<style>页面中间的某个地方有任何标签，那么其中一个之后的任何元素也会被错误地设置样式。

有没有一种绝对可靠的方法可以完全使用 CSS 来做到这一点？我无法自己编辑 HTML 文件，但如果必须的话，可以在渲染它们之前使用 Javascript 对它们进行预处理。

编辑：奖金的问题，我该如何选择是页面中的第一个元素不是一个<style>标签？即，我现在如何body > *:first-child不选择<style>标签？

例如，我的 CSS 文件和目标 HTML：

div {
  background-color: yellow;
}

*+div {
  background-color: lime;
  margin-top: 1em;
}
<style>
  div {
    font-weight: bold;
  }
</style>

<div>Yellow</div>
<div>Green</div>
<div>Green</div>
<div>Green</div>
<div>Green</div>
以上是如何避免`&lt;style&gt;`标签被我的CSS选择器捕获？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容