html - Bootstrap 3 修复了具有三个输入组的输入的边界半径

Question

考虑下面的 html 代码，它使用 bootstrap 3 输入组创建一个输入三输入组。

<h1>border radius</h1>
<div class="col-md-3">
    <div class="input-group"> 
            <span class="input-group-addon">
                <input value="false" type="radio"/>
            </span>

             <div class="input-group"> 
                <span class="input-group-addon">*</span>
                <input type="text" class="form-control"/> 
                <span class="input-group-addon">?</span>
            </div>
    </div>
</div>

默认的 bootstrap 样式为所有输入组设置了边框半径，这对中间输入组不利(我的意思是 * 周围的小左半径)。

为了移除这个半径，我尝试将所有输入组的边界半径设置为零，除了最后一个。

 div.input-group > div.input-group > span.input-group-addon:not:last-child{
    border-radius: 0px !important;
}

但是没有用!

请让我知道这个选择器有什么问题，如果我能做得更简单的话! fiddle :http://jsfiddle.net/mtamx8bs/

Answer 1

:not() 是一个函数式伪类所以 it needs parentheses around its argument :

div.input-group > div.input-group > span.input-group-addon:not(:last-child)

在那条注释上，我删除了 !important，因为我已经修复了选择器，现在不再需要它了。