gpt4 book ai didi

CSS: "p div.myclass"是一个有效的选择器吗?

转载 作者:行者123 更新时间:2023-11-28 15:55:11 25 4
gpt4 key购买 nike

p div.myclass 是有效的 CSS 选择器吗?我想选择 div.myclass 但只有当它是 p 的后代时。

<body>
<div class="myclass">Do not select</div>
<p>
<any>...
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
</any>
</p>
</div> <!-- added this after question was answered -->
</body>

最佳答案

这是一个有效的选择器,是的;但是一个div不是 p 的有效子项元素。因此 CSS 是有效的,但您要应用该选择器的 HTML 是无效的。

顺便说一句,除了嵌套的divp 内,你还有一个未关闭的 div包装 p ,其后是 </body>标签。因此,您的 HTML 是双重无效的,因为标签必须以与打开标签相反的顺序关闭。

附录,正如评论中提出的(我本来不打算添加这个,而是计划专注于 CSS 的语法),浏览器(当然是 Chromium 24/Ubuntu 12.10)“拯救”你的 HTML它构建了 DOM,所以你从这里开始:

<p>
<any>...
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
</any>
</p>

对于看起来像这样的 DOM(同样,在 Chromium 24/Ubuntu 12.10 中):

<p>
<any>...</any>
</p>
<div class="myclass">Select this element to set background &amp; border
<any>Other stuff may be here</any>
</div>
<p></p>

JS Fiddle demo .

因此,如果您遇到的问题以及您提出问题的原因是 CSS isn't selecting/styling an element ,原因很简单,因为您使用了无效的 HTML,并且浏览器在构建(有效的)DOM 时更改了您的 HTML,这意味着选择器不再匹配您最初的目标。

这就是应该遵循 HTML 有效性规则的原因,它使它更易于使用(无论是现在还是将来您或其他人必须重新访问时)。

哦,最后还有 &字符不应该直接在 HTML 中使用,它应该以某种方式编码,例如 &amp; ,因为 &字符是 HTML 字符实体代码中的第一个字符。所以...您创建了三次无效的 HTML。

关于CSS: "p div.myclass"是一个有效的选择器吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14882473/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com