我正在尝试使用多个属性选择器,但我的代码似乎至少在 CodePen 中不起作用...
我在谷歌上搜索了很多,但我就是找不到解决方案。
我用 SCSS 编写了它们:
*[class^="inset"] {
&[class*="-t0"] {
top: 0;
}
&[class*="-r0"] {
right: 0;
}
&[class*="-b0"] {
bottom: 0;
}
&[class*="-l0"] {
left: 0;
}
}
这是一个带有编译 CSS 的可运行演示:
*[class^="inset"][class*="-t0"] {
top: 0;
}
*[class^="inset"][class*="-r0"] {
right: 0;
}
*[class^="inset"][class*="-b0"] {
bottom: 0;
}
*[class^="inset"][class*="-l0"] {
left: 0;
}
<button class="inset-t0">Button</button>
最佳答案
这样选择意味着元素中有两个 css 类,如
<button class="inset -t0"></button>
您可以简单地执行以下操作:
.inset {
&-t0 {
top: 0;
}
&-r0 {
right: 0;
}
&-b0 {
bottom: 0;
}
&-l0 {
left: 0;
}
}
关于html - 为什么我的属性选择器不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58694499/