Question

在我不知道会有多少兄弟姐妹（1到6岁）的情况下，我试图瞄准最后一个相邻的兄弟姐妹。请参阅此插件：http://plnkr.co/edit/JBsMUg2yl1JkbK6j8Bfj?p=preview

   <section>
    <div class="c">Category 1</div>
    <div class="c">Category 2</div>
    <div class="p">product</div>
    <div class="p">product</div>
    <div class="p">product</div>
    <div class="c">Category 3</div>
    <div class="p">product</div>
    <div class="p">product</div>
    <div class="c">Category 4</div>
    <div class="c">Category 5</div>
    <div class="p">product</div>
    <div class="p">product</div>
    <div class="p">product</div>
    <div class="c">Category 6</div>
    <div class="c">Category 7</div>
    <div class="c">Category 8</div>
    <div class="p">product</div>
    <div class="c">Category 9</div>
  </section>

我最大的努力仍然让我失踪：第3类应该被选中;不应选择类别7。

div {
  padding: 5px;
  margin-bottom: 5px;
}

.c {
    color: yellow;
    background: blue;
    opacity:.1;
}
.c+.c {
    opacity:1;
}
.p+.c { 
    color: yellow;
    background: blue;
}

.c:last-child { /* orphan cat on end of list */
     opacity:.1;
}

我不能轻易改变我的html，也不能在最后一个兄弟姐妹上放一个课。

背景：这是由平面阵列上的角度ng-repeat渲染的目录，其中包含类别标题，后跟产品。 ng-repeat使用文本过滤器（来自搜索框）忽略类别标题（否则它们可能都被隐藏）并且仅适用于产品。因此，我最终得到了一个我有空类别标题的情况，我想通过css删除（但欢迎其他建议）

Answer 1

我更改了HTML代码并使用了title-Attribute以及CSS visibility属性。这是我现在能想到的唯一解决方案。

.c {
  visibility: hidden;
}
.c ul {
  visibility: visible;
}
.c ul:before {
  content: attr(title);
}

<ul>
  <li class="c">
    Category 1
  </li>
  <li class="c">
    Category 2
    <ul title="Category 2">
      <li class="p">product</li>
      <li class="p">product</li>
      <li class="p">product</li>
    </ul>
  </li>
  <li class="c">
    Category 3
    <ul title="Category 3">
      <li class="p">product</li>
      <li class="p">product</li>
    </ul>
  </li>
  <li class="c">
    Category 4
  </li>
  <li class="c">
    Category 5
    <ul title="Category 5">
      <li class="p">product</li>
      <li class="p">product</li>
      <li class="p">product</li>
    </ul>
  </li>
  <li class="c">
    Category 6
  </li>
  <li class="c">
    Category 7
  </li>
  <li class="c">
    Category 8
    <ul title="Category 8">
      <li class="p">product</li>
    </ul>
  </li>
  <li class="c">
    Category 9
  </li>
</ul>

Answer 2

此处显示的解决方案：http://plnkr.co/edit/6DUHUEHC9j5mONGG1z0N?p=preview可以创建我需要的视觉效果。

它为每个类别和<ul>伪选择器使用单独的:only-child。

但是，这个问题实际上不是一个可接受的答案，因为它需要更改不合需要的html。我认为仍然应该使用第n个孩子/最后一个孩子/不是（）等的某种组合的平面元素列表的解决方案，但尚未找到它。

高级css：目标最后相邻的兄弟

2 个答案: