gpt4 book ai didi

css - 当一个部分未知时,为什么 CSS 逗号分隔选择器会破坏整个规则?

转载 作者:技术小花猫 更新时间:2023-10-29 11:12:28 27 4
gpt4 key购买 nike

<分区>

解释问题:

所以如果你有一个看起来像这样的 CSS 规则:

h1, h1 a:hover {
color: blue;
}

它工作正常,从可用性的 Angular 来看,该示例可能不是最好的,但它确实有效。 (它可以证明问题...)

但是如果你添加一个浏览器不理解的逗号分隔符(,),空洞规则将被忽略。

 h1, h1 a:hover, h1:focus-within {
color: blue;
}

不理解 :focus-within 伪类的浏览器将忽略整个规则。这意味着即使是 h1 也不会获得指定的规则。


进一步想知道为什么会这样:

不要误会我的意思。忽略他们不知道的东西是 CSS 中一个非常强大的功能!

但为什么它的设计方式不是只忽略未知部分而所有其他选择器仍按预期工作?

我个人很少遇到这个问题,而且我已经接受了这样一个事实,即选择器中的一个错误会破坏整个规则。但很难解释为什么错误的声明或属性只会导致特定行被忽略,而选择器中的任何未知内容都会破坏整个 block 。

感觉好像遗漏了一些东西,所以如果有好的解释请告诉我并感谢您这样做。


不满意的解决方案:

当然,解决方法是将选择器的“危险”部分分成新规则,如下所示:

h1, h1 a:hover {
color: blue;
}
h1:focus-within {
color: blue;
}

但这感觉很糟糕。 (由于“不必要的”重复)

只是想把它放在这里。

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