尚未完全（尚未）

Question

是否可以在列表（DIV或UL）中设置一组选定行的样式，以便它们通过在第一个（即边框顶部）和最后一行（即边框底部）上具有自定义样式进行分组一组选择？例如，在下面的列表中，选择了行2,3,4和6：

--------------
| row 1      |
--------------
| *row 2*    |
| *row 3*    |
| *row 4*    |
--------------
| row 5      |
--------------
| *row 6*    |
--------------
| row 7      |
--------------

代码看起来像这样：

<ul>
  <li>row 1</li>
  <li class="selected">row 2</li>
  <li class="selected">row 3</li>
  <li class="selected">row 4</li>
  <li>row 5</li>
  <li class="selected">row 6</li>
  <li>row 7</li>
</ul>

我可以使用javascript和辅助类名来区分一组选择的第一个和最后一个选择，但我更愿意只使用现有的“selected”类名和纯CSS。

我尝试了+选择器，但它只让我到目前为止。我可以确定组中的第一个选定项目，但不是最后一个。如果没有能够使用CSS选择器进行预测，我不确定这是否可行。

Answer 1

作为对我自己的问题的一个潜在回答经过很多摆弄CSS之后，我想出了这个：http://codepen.io/anon/pen/oLZbRP

.selected {
  box-shadow: 0 -5px 5px -2px rgba(0,0,0,0.5);
  background-color: pink;
}

li.selected + li.selected {
  box-shadow: none;
}  
li:not(.selected) + li.selected {
  box-shadow: 0 -5px 5px -2px rgba(0,0,0,0.5);
}
li.selected + li:not(.selected) {
  box-shadow:inset 0 5px 5px -2px rgba(0,0,0,.5);
}

这非常接近我需要的（带阴影）。它还具有可用的悬停样式。我还没想到的唯一遗漏的是左/右阴影。添加它们会在每行旁边产生单独的阴影，这看起来不正确。

Answer 2

尚未完全（尚未）

以下代码选择每组所选li中的第一个和最后一个元素。说明：.selected之后的第一个li不是.selected，而.selected的第一个孩子始终是所选组中的第一个li元素。要选择组中最后一个li，您可以选择最后一个元素（如果.selected），并查看它是否具有未选中的相邻兄弟。如果其中一个匹配，则它是组中的最后一个匹配。

你不能根据它之后或之内的元素选择一个元素，但是可以使用建议的CSS选择器:has()，它基本上是每个好的CSS选择器问题的解决者。它与任何浏览器都不兼容，但可能在未来。对于未来的读者：如果第4行为蓝色，则可能与您的浏览器兼容。

li.selected:first-child,
li:not(.selected) + li.selected {
  /* First of group of selection */
  color: red;
}

li.selected:last-child,
li.selected:not(:has(+li.selected)) {
  /* Last of group of selection */
  color: blue;
}

<ul>
  <li>row 1</li>
  <li class="selected">row 2 (selected)</li>
  <li class="selected">row 3 (selected)</li>
  <li class="selected">row 4 (selected)</li>
  <li>row 5</li>
  <li class="selected">row 6 (selected)</li>
  <li>row 7</li>
</ul>

修改我没有注意到你说你知道:has() / lookahead选择器。我会把它留给那里的未来读者，因为它可能会在那时使用。

仅使用CSS为相邻的选定列表项设置样式

2 个答案:

尚未完全（尚未）