Question

我有一个从左到右（=标签）显示的jQuery Mobile可折叠列表，我在第一个和最后一个标签上写了圆角的CSS。

所有标签都有ui-collapsible和ui-collapsible-collapsed类，第一个和最后一个分别有ui-first-child和ui-last-child。

示例：

div.ui-collapsible-set
    div.ui-collapsible.ui-collapsible-collapsed.ui-first-child
    div.ui-collapsible.ui-collapsible-collapsed
    div.ui-collapsible.ui-collapsible-collapsed
    div.ui-collapsible.ui-collapsible-collapsed.ui-last-child

打开一个标签：

div.ui-collapsible-set
    div.ui-collapsible.ui-collapsible-collapsed.ui-first-child
    div.ui-collapsible.ui-collapsible-collapsed
    div.ui-collapsible // OPEN
    div.ui-collapsible.ui-collapsible-collapsed.ui-last-child

jQuery Mobile删除了ui-collapsible-collapsed。

CSS应该是：

/* default = round corners first tab bottom left, last tab bottom right */
.ui-collapsible-set-horizontal .ui-collapsible.ui-collapsible-collapsed.ui-first-child {
    border-bottom-left-radius: inherit;
}
.ui-collapsible-set-horizontal .ui-collapsible.ui-collapsible-collapsed.ui-last-child {
  border-bottom-right-radius: inherit;
}

/* first tab with one tab open - DOES NOT WORK */
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-collapsed) ~ .ui-collapsible.ui-first-child {
    border-bottom-left-radius: 0;
}

/* last tab with one tab open - OK */
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-collapsed) ~ .ui-collapsible.ui-last-child {
    border-bottom-right-radius: 0;
}

我的CSS仅适用于最后一个标签，但不适用于第一个标签...我不知道为什么。

我无法使用上面的选择器（边框，背景，任何东西）在第一个标签上设置任何内容，因此我认为选择器不起作用。

问题：
当其中一个可折叠程序（包括其自身）没有ui-first-child类时，如何正确定位可折叠的ui-collapsible-collapsed？

Answer 1

理想情况下，这两个都应该有效。你可能只是让你的选择器比它们需要的更复杂一些。我刚刚编辑了这篇文章。我认为虽然我第一次正确理解你的要求，但这会有效。

.ui-collapsible-set .ui-collapsible.ui-collapsible-collapsed.ui-first-child,
.ui-collapsible-set .ui-collapsible.ui-first-child {
    border-bottom-left-radius: 0;
}

当一个元素没有通过CSS的类时，如何从选择中选择第一个元素？

1 个答案: