gpt4 book ai didi

css - 伪元素中是否可以有伪元素?

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

div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; width: 75px; height: 75px; background: #0f0; }
div::before::before { position: absolute; content: ''; width: 50px; height: 50px; background: #00f; }

是我的语法错误还是不支持伪元素中的伪元素?

请注意,我知道 ::after 伪元素,尽管我需要另一个伪元素中的实际元素来实现,例如::after 不够的地方是:

div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; right: 0; bottom: 0; width: 75px; height: 75px; background: #0f0; }
div::after { position: absolute; content: ''; left: 0; top: 0; width: 50px; height: 50px; background: #00f; }

因为 ::after 是相对于元素而不是 ::before

最佳答案

Is my syntax wrong or is pseudo-element within pseudo-element not supported?

如果我没理解错的话,那是不可能的。自 Selectors Level 3 起,您不能链接多个伪元素。尽管将来可能会允许这样做。

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.


有趣的是,您可以链接::first-letter & ::before/::after带有占位符伪元素的伪元素,例如

::-webkit-input-placeholder::first-letter {
color: purple;
}

http://jsfiddle.net/k3yb6/1/

关于css - 伪元素中是否可以有伪元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17868593/

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