当源HTML有多个嵌套<html>>标签时,如何在CSS中选择<html标签?

How to select <html> tag in CSS when the source HTML has multiple nested <html> tags?

提问人:Conanap 提问时间:7/19/2020 最后编辑:Conanap 更新时间:7/19/2020 访问量:189

问:

我正在努力为 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

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

有问题的元素的 CSS 来自 inspect:The element in question's CSS from inspect

我的 CSS 在样式标签中:

div#divQuestions {
  background: black;
}

感谢您的帮助!

html css-selectors stylus stylish

评论

2赞 ray 7/19/2020
为什么有 4 个 html 标签?
0赞 Conanap 7/19/2020
@rayhatfield不知道,我没有写这段代码。只是尝试不要杀死我的眼睛
1赞 ray 7/19/2020
div 的关闭标记上缺少一个:.可能是一个因素。/<div id="divQuestions"> <div>
0赞 Conanap 7/19/2020
对不起,这是我发布问题的错别字。谢谢你的捕捉
0赞 ray 7/19/2020
可能是另一个更具体的 css 选择器,它优先于你的选择器?你能在开发工具中检查它,看看你的规则是否被覆盖了吗?

答:

0赞 anova01 7/19/2020 #1

nth-of-type是与其“type”的第 n 个元素匹配的选择器。
因此,您可以这样做:

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

或者,你可以这样做,因为你说了“多个嵌套标签”:

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

评论

0赞 Conanap 7/19/2020
我也试一试;我试过 html html html div#Question,但也没有用
0赞 Conanap 7/19/2020
不幸的是,这对我也不起作用,但感谢您的建议
1赞 ray 7/19/2020 #2

#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>

评论

0赞 Conanap 7/19/2020
抱歉,这是一个错别字。不知道为什么它对我不起作用......