html - :first-child not working on label (hidden radio button)

Question

我正在设计单选按钮的样式(隐藏它们并将标签用作按钮)，并尝试将边框半径放在第一个 child 上，但它没有按预期响应，或者我做错了。

如何在第一个标签上实现左边框半径？

在此处查看实际效果> http://jsfiddle.net/sthrc57f/

HTML:

<input type="radio" name="radios" id="radioone" value="one">
<label for="radioone">radio 1</label>
<input type="radio" name="radios" id="radiotwo" value="two" checked="checked">
<label for="radiotwo">radio 2</label>

CSS:

input[type=radio] {
    display:none;
}

input[type=radio] + label {
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0.5em 2em 0.5em 2em;
    background-color: #eeeeee;
    color: #bbbbbb;
}

input[type=radio] + label:first-child  {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    -webkit-border-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -o-border-top-left-radius: 7px;
    -o-border-bottom-left-radius: 7px;
    -moz-border-top-left-radius: 7px;
    -moz-border-bottom-left-radius: 7px;
}

input[type=radio]:checked + label { 
    background-color: green;
    color: white;
}

input[type=radio]:checked + label:before {
    content: "✓ ";
}

我试过很多组合:

input[type=radio] label:first-child
input[type=radio]:first-child label
label:first-child

等等。运气不好

我怀疑可能是因为单选按钮本身是隐藏的，所以不能像这样定位第一个标签？

编辑:已解决。这是工作版本:http://jsfiddle.net/sthrc57f/2/

Answer 1

我想我会将我的回复放在此处的答案中，以防它们也能帮助其他人。 That's not how :first-child works ;在您的标记中没有标签元素是第一个子元素。也许您的意思是 :first-of-type？

label:first-of-type {
    border-radius: 7px;
}

JSFiddle Example