2

我有一组按钮，它们应该只在第一个按钮和最后一个元素上具有圆形边框。中间按钮应该没有。这工作正常。

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

我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>

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

4

2 回答 2

1

将这些字段绑定在一个单独的容器中怎么样？

演示

.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;
}

根据您的编辑

演示 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 非常适合您的需求。

于 2013-09-06T02:42:54.637 回答
0

如果你知道它是否是一个混合组

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

演示小提琴

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;
}
于 2013-09-06T18:15:35.627 回答