css - 在 Css 中，我怎样才能同时选择一个子元素？

Question

大家好，我正在尝试使用 Stylish(Chrome 扩展)在此页面上的一些元素周围放置边框。这是页面的结构，字母代表不同的类..

A
  B
  B
  C
  C

我想在“C”周围放置边框，如果我只是通过调用 C 类来实现，我最终会在两个 C 类之间设置边框。那么有没有一种方法可以将两个 C 一起选择为一个元素。

使用 Stylish，您不能更改页面的 HTML，只能更改 css，我知道我可以将它嵌套在 HTML 中，但这不是一个选项。

编辑:C 也出现在页面的其他区域。

Answer 1

这就是你想要的吗？

.a>.c {
  border: solid red;
  border-width: 0 1px;
}
.a>*:not(.c) + .c,
.a>.c:first-child {
  border-top-width: 1px;
}
.a>.c + *:not(.c) {
  border-top: 1px solid red;
}
.a>.c:last-child {
  border-bottom-width: 1px; 
}

<div class="a">
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<hr />
<div class="a">
  <div class="c">C</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<hr />
<div class="a">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="c">C</div>
</div>
<hr />
<div class="a">
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
</div>
<hr />
<div class="a">
  <div class="c">C</div>
</div>

唯一的 “技巧” 是我必须在 .c 之后使用紧随其后的元素的上边框，以便放置 “底部" 一组 .c 中最后一个 .c 的边框。目前无法选择一组具有特定类别的直系 sibling 。当您知道组中带有 .c 的最后一个元素是最后一个元素时，评估的重点是当您评估下一个元素并发现它没有 .c 时。但此时，您无法之前对元素设置样式，因为 CSS 仅向前解析，从不向后解析。

简而言之，如果元素之间有边距，则无法仅使用 CSS(* 请参阅注释)。使用 javascript 会很简单(如果有帮助，我可以提供)。

---

* 实际上，即使元素之间有边距，您也可以通过 null-ing 之间的边距来完成这项工作。 c 和任何 :not(.c) 并将差异应用于 :not(.c) 的第一个 child 。找到一个在任何情况下都有效的神奇解决方案是很麻烦的。大多数时候，这些东西是根据现有元素编码的，并找到使它“看起来”有效的技巧。
这就是我们现在所拥有的。 :)