[英]Why aren't my attribute selectors working?
I'm trying to use multiple attribute selectors, but my code just doesn't seem to work at least in CodePen...我正在尝试使用多个属性选择器,但我的代码似乎至少在 CodePen 中不起作用......
I googled a lot, but I just can't find a solution.我用谷歌搜索了很多,但我找不到解决方案。
I've written them in SCSS:我已经用 SCSS 编写了它们:
*[class^="inset"] {
&[class*="-t0"] {
top: 0;
}
&[class*="-r0"] {
right: 0;
}
&[class*="-b0"] {
bottom: 0;
}
&[class*="-l0"] {
left: 0;
}
}
here's a runnable demo with compiled CSS:这是一个编译好的 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>
Selecting like this implies there are two css classes in the element, like像这样选择意味着元素中有两个 css 类,如
<button class="inset -t0"></button>
You can simply do the following:您可以简单地执行以下操作:
.inset {
&-t0 {
top: 0;
}
&-r0 {
right: 0;
}
&-b0 {
bottom: 0;
}
&-l0 {
left: 0;
}
}
.inset {
&-t0 {
top: 0;
}
&-r0 {
right: 0;
}
&-b0 {
bottom: 0;
}
&-l0 {
left: 0;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.