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

Question

我的问题与此类似：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？

Answer 1

使用required属性：

<select id="select-card" required>

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

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

Fiddle