Question

我梦想宣布这个假设的CSS规则：

div.parent[data-foo="X"] > div.child[data-bar="X"]{ ... }

未明确定义X.我知道这通常不可行。我的第一个想法是RegEx，但谷歌搜索和SA透露，它永远不会发生。 然而，我已经看到了一些疯狂的SASS逻辑，我从来没有想过可以在CSS中使用，所以我想我会问。

我希望的替代方案是：

div.parent[data-foo="1"] > div.child[data-bar="1"],
div.parent[data-foo="2"] > div.child[data-bar="2"],
div.parent[data-foo="3"] > div.child[data-bar="3"],
div.parent[data-foo="4"] > div.child[data-bar="4"]{
  ...
}

感谢您的时间和建议。

Answer 1

这是我发现的最接近的解决方案，虽然不是动态的，但使用SASS宏来保存不写出来。

$catalog: xxx1 yyy2 zzz3;

%selector {
    display: block;
} 

@each $prod in $catalog {
    #parent[data-top="#{$prod}"] > .child[data-bot="#{$prod}"]{
        @extend %selector;    
    }    
}

编译为....

#parent[data-top="xxx1"] > .child[data-bot="xxx1"], 
#parent[data-top="yyy2"] > .child[data-bot="yyy2"], 
#parent[data-top="zzz3"] > .child[data-bot="zzz3"] {
  display: block;
}

Answer 2

你可以使用像这样的属性选择器。

div.parent[data-foo] > div.child[data-bar] {
    /* Your styles */
}

高级CSS数据选择器 - SASS还是RegEx？

2 个答案: