如何修复 css3 伪 class nth-child

Question

如何使左边框变圆？我有这个代码：

.container {
    margin-top: 25px;
}
.btn-group-radio input[type=radio] {
    display: none;
}
.btn-group-radio input[type=radio]:checked + .btn {
    color: #333333;
    background-color: #e6e6e6;
    *background-color: #d9d9d9;
    background-color: #cccccc ;
    background-color: #e6e6e6;
    background-color: #d9d9d9 ;
    background-image: none;
    outline: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-group-radio .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.btn-group-radio .btn:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

    <div class="container">
        <div class="btn-group btn-group-justified btn-group-radio" role="group" id="id_offer">

            <input checked="checked" id="id_offer_0" name="offer" value="1" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_0">Offer 1</label>

            <input id="id_offer_1" name="offer" value="2" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_1">Offer 2</label>

            <input id="id_offer_2" name="offer" value="3" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_2">Offer 3</label>

        </div>
    </div>

最后一个标签一切正常，第一个标签不起作用 none：不像 css，不是 .btn-group-radio .btn:nth-child(1)，.btn-g... .btn:nth-of-type(1)，不是 ... label:first-child + .btn 也一样。

我如何理解 first-child 在我的代码中为 input 和 id="id_offer_0" 工作，但我不明白为什么 nth-child 不工作，为什么不工作nth-of-type.

Answer 1

使用这些样式：

#id_offer .btn:first-of-type {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

第一个按钮不是其父项的第一个子项，但是其类型的第一个。

您还应该 select 基于 ID 以克服 Bootstrap 的默认边框。

.container {
    margin-top: 25px;
}
.btn-group-radio input[type=radio] {
    display: none;
}
.btn-group-radio input[type=radio]:checked + .btn {
    color: #333333;
    background-color: #e6e6e6;
    *background-color: #d9d9d9;
    background-color: #cccccc ;
    background-color: #e6e6e6;
    background-color: #d9d9d9 ;
    background-image: none;
    outline: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-group-radio .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
#id_offer .btn:first-of-type {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

    <div class="container">
        <div class="btn-group btn-group-justified btn-group-radio" role="group" id="id_offer">

            <input checked="checked" id="id_offer_0" name="offer" value="1" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_0">Offer 1</label>

            <input id="id_offer_1" name="offer" value="2" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_1">Offer 2</label>

            <input id="id_offer_2" name="offer" value="3" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_2">Offer 3</label>

        </div>
    </div>

如何修复 css3 伪 class nth-child

How to fix css3 pseudo class nth-child

css

css-selectors

pseudo-class