选择在特定元素之前的元素的替代方法

Question

我正在创建一个简化的定制框架，用于通过添加或删除html元素而不使用类或JavaScript来构造表单。

经过几天的工作，下面是我到目前为止所做的事情的演示：

我遇到的唯一问题以上面的黄色圆圈突出显示。

我根本无法得到输入/ textarea，后跟<i>或<a>以保留其原始border-radius，在此设置为4px CSS系列：

/*(?) Form elements global border-radius settings*/
input, textarea, select, .select-input, fieldset > div > span,fieldset > div > a {
    border-radius: 4px;
}

用于显示上图的完整HTML和CSS可在此JSFiddle中找到：http://jsfiddle.net/kvezedo5 - 我还上传了上图中显示的框架的实时版本：{{3} }

相关元素的HTML如下：

<fieldset>
   <div>
      <input name="">
      <i class="icon-question tooltip-top" title="Text Goes Here"></i>
   </div>
</fieldset>

<fieldset>
   <div>
      <input name="">
      <a>Button</a>
   </div>
</fieldset>

Answer 1

罪魁祸首是：

fieldset > div > *:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

你应该改变它以使用一个类，这样它就不会破坏一切。这就是全球选择者通常不推荐的原因：

fieldset > div > .sharpcorners