Html 仅使用CSS隐藏元素

在以下标记中，在不更改它或不使用JS的情况下，实现仅显示

div

的

ul

元素的行为，该元素在第一个

ul

中被单击（在

div

之前）。名称是顶部

ul

中

li

的内容，它与要显示的

ul

中第一个

li

的内容匹配。具有

{content}

的元素只是填充符，对问题没有任何意义

div>ul：目标{
显示：块；
}
div>ul{
显示：无；
}

早餐
{早餐1}
{早餐2}
{早餐3}


晚餐
{晚餐1}
{晚餐2}
{晚餐3}


晚餐
{晚餐1}
{晚餐2}
{晚餐3}


最爱
{最喜欢的1}
{最喜欢的2}
{最喜欢的3}

只有CSS是无法做到这一点的。因为您需要该元素的id

更改此项：

<ul class="favorites">

早餐
{早餐1}
{早餐2}
{早餐3}


晚餐
{晚餐1}
{晚餐2}
{晚餐3}


晚餐
{晚餐1}
{晚餐2}
{晚餐3}


最爱
{最喜欢的1}
{最喜欢的2}
{最喜欢的3}

您的问题可能是您使用的是一个

收藏夹类而不是像其他所有ID一样的ID吗？@RobertC谢谢，但问题的想法是不要更改html中的任何内容，因此类很重要使用我的更新answer@Mojtaba谢谢，但这也不是一个选择，诀窍是不要改变HTML。如果没有IDOP，他不可能做到这一点。他说，他不想改变HTML或依赖JavaScript。从本质上说，他不想要解决办法。@RobertC，同意。我展示了可能的方法。他/她可以使用其中一个或永远等待。我们知道，如果不直接或间接地操纵ID，就无法做到这一点。谢谢你提出了非常好的建议，我想，我会将你的答案标记为已接受。当我找到CSS的唯一方法时，我会将其作为答案发布。事实上，对于这样一个奇怪的问题，我感到抱歉，另一个人问我这个问题，他真的声称只有CSSsolution@snowfinch27，相信我们。不要浪费你的时间。仅仅依靠css是没有办法的。当通过#链接到DOM元素时，当然需要id。CSS不能向元素添加属性
<ul id="favorites" class="favorites">