当源 HTML 有多个嵌套的 <html> 标签时，如何在 CSS 中选择 <html> 标签？答案

【问题标题】：How to select <html> tag in CSS when the source HTML has multiple nested <html> tags?当源 HTML 有多个嵌套的 <html> 标签时，如何在 CSS 中选择 <html> 标签？
【发布时间】：2020-07-19 01:24:37
【问题描述】：

我正在为 Kaplan 网站测试制作黑暗模式，这样我就不会盲目地学习。

以下 HTML 代码代表了源代码的结构，id="stylish-23" 的标签是 chrome 扩展添加的，用于更改页面的 CSS 样式：

<html> // html 1
  <html> // html 2
    <html> // html 3
      <html> // html 4
        <div id="divQuestions"> </div> //actual tag I want to change
      </html> // html 4
    </html> // html 3
  </html> // html 2
  <style id="stylish-23" type="text/css">...</style>
</html> // html 1

我将div#divQuestions 放在样式标签的CSS 中，它似乎根本没有任何效果。由于扩展的性质和限制，我只能将 CSS 添加到样式标签，而 CSS 似乎无法选择 HTML 标签（或者至少当我这样做时，什么也没有发生）。我注意到在开发者控制台中将样式标签拖到 html #4 中会正确应用 CSS。

inspect 中相关元素的 CSS：

我在样式标签中的 CSS：

div#divQuestions {
  background: black;
}

感谢您的帮助！

【问题讨论】：

为什么有4个html标签？
@rayhatfield 不知道，我没有写这段代码。只是尽量不要杀死我的眼睛
您在 div 的结束标签上缺少 /：<div id="divQuestions"> <div>。可能是一个因素。
这是我发布问题时的拼写错误，抱歉。感谢您的关注
可能是另一个更具体的 css 选择器，它优先于你的选择器？你能在开发工具中检查它，看看你的规则是否被覆盖了吗？

标签： html css css-selectors stylus stylish

【解决方案1】：

#divQuestions 选择器对我有用，如果我修复了 div 的结束标签（或者即使我没有，事实证明）：

<html>
  <html>
    <html>
      <html>
        <div id="divQuestions"> </div>
      </html>
    </html>
  </html>
  <style id="stylish-23" type="text/css">
    #divQuestions {
      padding: 48px;
      background: aliceblue;
      border: 4px solid blue;
    }
  </style>
</html>

【讨论】：

抱歉，这是一个错字。不知道为什么它对我不起作用...

【解决方案2】：

nth-of-type 是一个匹配其“类型”的第 n 个元素的选择器。
所以，你可以这样做：

html:nth-of-type(1)
html:nth-of-type(2)
html:nth-of-type(3)
...

或者，您可以这样做，因为您说“多个嵌套标签”：

html
html > html
html > html > html
...

【讨论】：

我也试试这个；我已经尝试过 html html html div#Question 但这也没有用
很遗憾，这对我也不起作用，但感谢您的建议