时间戳

首页 > 解决方案 > 条件文档：如何根据几个类显示可选部分

css - 条件文档：如何根据几个类显示可选部分

问题描述

我有一个文档，其中最多有 6 个类来选择可选部分。一些可选部分在 inside 中，因此在不同的 shadow-root 中，因此必须将决定作为 CSS 自定义属性传入。

目标是让所有可选部分的类与要显示的主体上的类匹配，其余部分被隐藏。可选部分有 cc 类，然后还有可能在主体上的其他类。

我想到的许多想法导致了 6 的组合爆炸！(720) 规则，这是不切实际的。然后我测试了不透明度不反对（0,1）范围之外的值，所以认为下面的方法可能有效......但即使是看起来它们应该总和为0的项目，而不是总和为1，两者在 Firefox 和 Chrome 中，所有文本都可见，而不仅仅是与所选类对应的那些！

我错过了什么？

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>conditional text test</title>
<style>
body:not(.ab)
{
--vis-ab:0;
}
body.ab
{
--vis-ab:1;
}
body:not(.cde)
{
--vis-cde:0;
}
body.cde
{
--vis-cde:1;
}
body:not(.fghi)
{
--vis-fghi:0;
}
body.fghi
{
--vis-fghi:1;
}
body:not(.jklmn)
{
--vis-jklmn:0;
}
body.jklmn
{
--vis-jklmn:1;
}
body:not(.opqrst)
{
--vis-opqrst:0;
}
body.opqrst
{
--vis-opqrst:1;
}
body:not(.uvwxyz)
{
--vis-uvwxyz:0;
}
body.uvwxyz
{
--vis-uvwxyz:1;
}

.cc:not(.ab)
{
--has-ab:0;
}
.cc.ab
{
--has-ab:var( --vis-ab );
}
.cc:not(.cde)
{
--has-cde:0;
}
.cc.cde
{
--has-cde:var( --vis-cde );
}
.cc:not(.fghi)
{
--has-fghi:0;
}
.cc.fghi
{
--has-fghi:var( --vis-fghi );
}
.cc:not(.jklmn)
{
--has-jklmn:0;
}
.cc.jklmn
{
--has-jklmn:var( --vis-jklmn );
}
.cc:not(.opqrst)
{
--has-opqrst:0;
}
.cc.opqrst
{
--has-opqrst:var( --vis-opqrst );
}
.cc:not(.uvwxyz)
{
--has-uvwxyz:0;
}
.cc.uvwxyz
{
--has-uvwxyz:var( --vis-uvwxyz );
}
.cc
{
opacity:calc( var( --has-ab ) + var( --has-cde ) + var( --has-fghi ) + var( --has-jklmn ) + var ( --has-opqrst ) + var( --has-uvwxyz ));
}
</style>
</head>
<body class=ab>
<h1>conditional text test</h1>
<div>
<span class="cc ab">ab</span>
<span class="cc cde">cde</span>
<span class="cc fghi">fghi</span>
<span class="cc jklmn">jklmn</span>
<span class="cc opqrst">opqrst</span>
<span class="cc uvwxyz">uvwxyz</span>
</div>
<div class="cc ab fghi">ab or fghi</div>
<div class="cc ab uvwxyz">ab or uvwxyz</div>
<div class="cc opqrst fghi">opqrst or fghi</div>
</body>
</html>

标签： css

解决方案

我的朋友想通了这一点。它在 var 和 ( 之间有一个空格。他在 Firefox DevTools 上提交了一个错误报告https://bugzilla.mozilla.org/show_bug.cgi?id=1586556

现在描述的技术工作正常，我的朋友对其进行了一些优化（在 bug 中的文件中）以减少所需的规则数量。

推荐阅读