:第一个孩子不在标签上工作(隐藏单选按钮)

Question

我正在设置单选按钮(隐藏它们并使用标签作为按钮),并尝试将边框半径放在first-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

我想我会在这里回答我的回答,以防他们也帮助他人.那不是:first-child有效的 ; 没有标签元素是标记中的第一个子元素.也许你的意思:first-of-type？

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

JSFiddle示例