html - CSS3 : If input checked, 获取输入数据属性作为 :before of "p"sibling

Question

我正在寻找一种方法来影响 :before 的兄弟 (p) 没有 JavaScript - 只是 CSS，通过触发 input (切换 :选中)。

我想知道这是否可能。我有这个 CSS 代码:

.parent {
    position:relative;
}

.parent input[data-label]:checked ~ p:before {
    content:attr(data-label);
}

/* if the first input selected then show different text in p:before -
   the first input equals to none checked */

.parent input:nth-child(1):checked ~ p:before {
    content:"Please select one option";
}

和这段 HTML 代码:

<div class="parent">
    <input type="radio" name="select" id="first" checked />
    <input type="radio" name="select" id="second" data-label="Second Option" />
    <input type="radio" name="select" id="third" data-label="Third Option" />
    <p></p>
</div>

您怎么看 - 可以用 css 来完成吗？如果是，怎么办？如果没有，JavaScript 是唯一的解决方案 - 可以不用 jQuery 来完成吗？

谢谢。

Answer 1

内容只能从它自己的容器中获取属性的值，你可以这样设置它们:

/* if the first input selected then show different text in p:before -
   the first input equals to none checked */

.parent input:nth-child(1):checked ~ p:before {
    content:"Please select one option";
}
.parent input[id="second"]:checked ~ p:before {
    content:attr(data-label2);
}
.parent input[id="third"]:checked ~ p:before {
    content:attr(data-label3);
}

<div class="parent">
    <input type="radio" name="select" id="first" checked />
    <input type="radio" name="select" id="second" />
    <input type="radio" name="select" id="third"/>
    <p data-label2="Second Option"  data-label3="Third Option" ></p>
</div>