基于选项选择显示/隐藏内容的纯 CSS 方式？

【问题标题】：Pure CSS way to show/hide content based on option select?基于选项选择显示/隐藏内容的纯 CSS 方式？
【发布时间】：2015-04-21 03:51:05
【问题描述】：

我的问题和这个类似：CSS to select another Element based on a HTML Select Option Value

这是我的 HTML：

    <select id="select-card">
      <option value=""></option>
      <option value="card">**** **** **** 1982</>
    </select>
    <p>Or enter a new one...</p>

我想在用户从列表中选择一张卡片时隐藏<p>，并在用户选择空选项时显示它。

这在纯 CSS 中是否可行，还是我需要使用 JavaScript？

【问题讨论】：

你需要 JavaScript，因为 CSS 中还没有父选择器。
“我的问题和这个类似”——事实上，它是如此相似，以至于我认为这应该作为重复关闭。
@CBroe 严格来说这个问题没有答案，这就是为什么我链接到它并再次询问......
这是不可能的，因为 CSS 中没有父选择器是答案……这仍然成立。
jsfiddle.net/NmdxC/6 GL...

标签： css

【解决方案1】：

使用required 属性：

<select id="select-card" required>

并为元素编写valid和invalid的规则，选择以下p元素：

#select-card:invalid + p { display: block; }
#select-card:valid + p { display: none; }

Fiddle

【讨论】：

好的，对于这种特定情况来说，这是一个很好的“解决方法”。（虽然不确定这里是否需要 required 的含义。）
@msfoster 如果我想更改多个 divs 的可见性并且当我有超过 2 个选项时该怎么办？
@GauravPaliwal 我建议您创建一个问题，详细解释您的问题。