Question

我的结构/风格类似于下面的代码段。我试图定位不是脚本标记的第一个元素，而不知道它是什么类型的元素。（我继承了旧的代码库，部件不会由我更新。）

正如您所看到的，我尝试了header ~ :not(script):first-of-type但是选择了所有不是脚本标记的一般兄弟。

我也试过header ~ :not(script):first-child，但这并没有选择任何东西。有什么想法吗？

＆＃13;

header ~ :not(script):first-of-type{
  color: red;
}

＆＃13;

<body>
  <header>This is the header</header>
  <script>// This script tag may or may NOT be present</script>
  <section>These are the section tags, <strong>that may also be DIV tags</strong> (or some other wrapper) in some cases</section>
  <footer>This is the footer</footer>
</body>

＆＃13;

Answer 1

没有办法做一行CSS（我知道），但尝试使用相邻的选择器：）

header + *:not(script) { color: red; }
header + script + * { color: red; }

<body>
  <header>This is the header</header>
  <script>// This script tag may or may NOT be present</script>
  <section>These are the section tags, <strong>that may also be DIV tags</strong> (or some other wrapper) in some cases</section>
  <footer>This is the footer</footer>
</body>

Answer 2

感谢@Tyblitz指出我正确的方向。你的答案在多个脚本标签的情况下不起作用（我可以在这个问题中使这个案例更加明显。）但是以下规则似乎有效：

header + :not(script),
header ~ script + :not(script) { color: red; }

更新 - ^不起作用，因为它会在标题后的任何位置选择脚本标记。不幸的是我不得不接受这个（希望最多2个脚本标签可能跟随标题）：

header + :not(script),
header + script + :not(script),
header + script + script + :not(script) { color: red; }

我认为没有更好的方法，但任何改善这种丑陋的想法都是非常有必要的。

header + :not(script),
header + script + :not(script),
header + script + script + :not(script) { color: red; }

<body>
  <header>This is the header</header>
  <script>//Script tags may or may not be present</script>
  <script>//and there may be more than one</script>
  <section>These are the section tags, <strong>that may also be DIV tags</strong> (or some other wrapper) in some cases</section>
  <script>//Script tags may follow original target</script>
  <div>This is a div</div>
  <footer>This is the footer</footer>
</body>

如何只选择不是脚本标记的第一个通用兄弟？

2 个答案: