html - 选择位于特定元素之前的元素的替代方法

Question

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

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

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

我根本无法获得后跟 <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 - 我还上传了上图中所示框架的实时版本:http://loai.directory/test

相关元素的 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