gpt4 book ai didi

css - 在 Less 中使用未知值作为选择器

转载 作者:行者123 更新时间:2023-11-28 15:56:03 24 4
gpt4 key购买 nike

鉴于此标记:

<div class="parent" data-active="typeA">
<div class="child" data-show="typeA">Show only when parent=typeA</div>
<div class="child" data-show="typeB">Show only when parent=typeB</div>
<div class="child" data-show="typeC">Show only when parent=typeC</div>
</div>

我正在尝试编写一个全局适用的 LESS 规则,该规则仅在其 data-show 属性与父级的 data-active 属性匹配时才显示子级。

像这样:

.parent {
.child { display:none; }
&[data-active="?"] .child[data-show="?"] { display:block; }
}

...其中 ? 不应是固定值,而是无论值如何都适用的条件,只要它们相同即可。

有什么想法吗?

最佳答案

由于 LESS 被编译为 CSS,并且在 CSS 中没有通用的方法来执行此操作,我只提出了一个解决方案,要求您了解所有可能的类型

.parent {
.child { display: none; }
&[data-active="typeA"] {
.child[data-show="typeA"] { display: block; }
}
&[data-active="typeB"] {
.child[data-show="typeB"] { display: block; }
}
&[data-active="typeC"] {
.child[data-show="typeC"] { display: block; }
}
}

根据您的喜好并为避免冗余,您还可以定义一个用于添加不同类型的函数。

.parent {
.child { display: none; }
.addType("typeA");
.addType("typeB");
.addType("typeC");
}

.addType(@type) {
&[data-active="@{type}"] {
.child[data-show="@{type}"] { display: block; }
}
}

如果你想让它更通用,你可以定义一个类型数组并为每个类型调用 .addType,如下所示:

@types: "typeA", "typeB", "typeC";

.parent {
.child { display: none; }
.-(@i: length(@types)) when (@i > 0) {
@type: extract(@types, @i);
.addType(@type);
.-((@i - 1));
} .-;
}

.addType(@type) { /* see above */ }

关于css - 在 Less 中使用未知值作为选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41127706/

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