Question

我有一组按钮，只有第一个按钮和最后一个元素才能有一个圆角边框。中间的按钮应该没有。这很好。

现在我想添加一个应该做同样的文本字段。它应该是圆形边框，如果它是第一个或最后一个，否则没有。

我将INPUT用于文本字段，BUTTON用于我的按钮，因此如何使用:last-child选择不使用的最后一个元素。

:last-of-type不起作用，因为它们属于不同类型。 :last-child不起作用，因为我可能有其他兄弟姐妹（例如下拉菜单）。我不想分配更多的课程，因为我的标记足够长。

我的当前：

BUTTON:last-of-type, 
INPUT:last-of-type { 
    /* Corners */ 
}

我想要的是什么：

BUTTON:last-of(BUTTON, INPUT), 
INPUT:last-of(BUTTON, INPUT) { 
    /* Corners */ 
}

一些示例标记：

<div class="group">
    <label>Controls:</label>
    <input type="text" />
    <button type="button">Search</button>
</div>

有没有办法或者我应该寻找替代方案？

Answer 1

如何在单独的容器中绑定这些字段？

Demo

.wrap, .wrap2 {
    float: left;
    width: 200px;
}

.wrap input[type=text], .wrap input[type=button] {
    display: block;
}

.wrap input[type=button]:first-of-type,
.wrap input[type=button]:last-of-type, 
.wrap2 input[type=text]:first-of-type,
.wrap2 input[type=text]:last-of-type {
    border-radius: 8px;
    border: 1px solid #f00;
}

根据你的编辑

Demo 2

div:first-of-type input[type=text], 
div:first-of-type button,
div:last-of-type input[type=text],
div:last-of-type button {
    border: 1px solid #f00;
    border-radius: 8px;
}

当您编辑问题并提供您正在使用的实际标记时，我使用了4个选择器，这些选择器将以这样的方式匹配，即将样式应用于第一组中的文本框和按钮组

正如您所评论的那样，如果您不希望使用额外的标记，那么使用为您要设置样式的项目定义的类会更好，这不仅会阻止使用复杂的选择器，还会使事情变得简单。你也将跨浏览器。但正如我所提供的，解决方案2可以根据您的需求进行。

Answer 2

如果您知道它是否是混合组

如果您提前知道该组包含button和input元素，或者它不包含（即使动态生成，只要动态脚本“知道”），在.group元素上设置一个额外的类可以设置一个过滤器仍然使用:last-of-type作为您的选择器。

<强> Demo Fiddle

CSS

.group.mixed input:last-of-type ~ button:last-of-type,
.group.mixed button:last-of-type ~ input:last-of-type,
.group.unmixed input:last-of-type,
.group.unmixed button:last-of-type {
    border-radius: 0 0 8px 8px;
}

如何选择最后一个选择器？

2 个答案:

如果您知道它是否是混合组