多类CSS3中的后置伪
多类CSS3中的后置伪
提问于 2018-02-20 10:05:44
如何为多个CSS-类分配前后的伪类
例如，：
[class*="divclass-"]::before, ::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-20 10:22:09
考虑一下这个HTML结构，其中您有一个<div>，它有子<span>和<p>。另一个<span>和<p>作为兄弟姐妹。
<div>
<span>abc</span>
<p>xyz</p>
</div>
<span>123</span>
<p>456</p>例如，如果我们需要改变孩子的颜色，我们可以在你的路上写，
div span, p{
color: red;
}这样做的问题是，它也将改变兄弟<p>456</p>的颜色，因为样式被全局应用于所有段落标记。
解决方案是遵循特定性，就像我们对<span>所做的那样，并将选择器编写为
div span,
div p{
color: red;
}同样的规则也适用于伪元素。因此，解决方案是，
[class*="divclass-"]::before,
[class*="divclass-"]::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}注1
如果您正在使用SASS，您的语法可能是，
[class*="divclass-"]{
&::before,
&::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
}注2
before和after pesudo元素需要content属性。
希望这能有所帮助。
Stack Overflow用户
发布于 2018-02-20 10:14:27
逗号并不意味着以下元素是相同选择器的子元素(此处为class*="divclass-")。它只允许你连锁选择器。
@见https://www.thoughtco.com/comma-in-css-selectors-3467052
以下是解决办法：
[class*="divclass-"]::before,
[class*="divclass-"]::after {
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
content: '';
}<div class="divclass-1" style="height: 10px; width: 10px"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48882583
复制相关文章
相似问题
腾讯云开发者
