如何围绕某些兄弟HTML元素绘制一个框？

Question

我想在视觉上突出显示共享相同属性的一组兄弟元素.

#boxed_contents span[data-boxme] {
  display: inline-block;
  border: 2px solid #00F;
  border-radius: 5px;
}

<div id="boxed_contents">
    <span>hello</span><!--
 --><span>world</span><!--
 --><span data-boxme>look</span><!--
 --><span data-boxme>at</span><!--
 --><span data-boxme>me</span>
</div>

这几乎就像我想要的那样,但是我想加入每个boxme元素周围的框,只留下一个框围绕这三个元素.我知道我可以将相邻boxme元素包装在包装div中,但由于这在概念上是一种视觉(而不是结构)选择,所以我真的很想在不修改HTML的情况下这样做.

有没有办法在纯CSS中执行此操作？如果失败了,加上一些直截了当的Javascript？

Answer 1

实际上,用纯CSS将元素包装在另一个元素中是不可能的.但是我们可以通过在每个相邻元素上添加边框并在中间边框上放置绝对定位的伪元素来以某种方式伪造效果.

另外,请注意自定义属性在HTML中无效,除非它们的格式为data-*.

#boxed_contents [data-boxme] {
  display: inline-block;
  border: 2px solid #00F;
}

#boxed_contents [data-boxme] + [data-boxme] {
  margin-left: -.25em;
  padding-left: .25em;
  position: relative;
}

#boxed_contents [data-boxme] + [data-boxme]:after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -4px;
  width: 4px;
  background: white;
}

<div id="boxed_contents">
  <span>hello</span>
  <span>world</span>
  <span data-boxme>look</span>
  <span data-boxme>at</span>
  <span data-boxme>me</span>
  <span>not me</span>
</div>

Answer 2

感谢 Hashem 让我走上了同级选择器（对连续元素进行独特样式）和添加边框元素的伪选择器的正确轨道。

我必须添加一行 JavaScript 以确保最后有一个span没有该属性的空白元素。boxme通过这样做，我可以在元素后面的:before任何非boxme元素上使用伪元素boxme。这一策略的主要优点（相对于 Hashem 给出的策略）是我可以保留原始 CSS 中的圆角。

document.getElementById('boxed_contents').appendChild(document.createElement('span'));

#boxed_contents span[data-boxme] {
  border: 2px solid #00F;
  border-right: none;
  border-radius: 5px 0 0 5px;
  padding-left: 4px;
}
#boxed_contents span[data-boxme] + span[data-boxme] {
  border-left: none;
  border-radius: 0;
  padding-left: 0;
}
#boxed_contents span[data-boxme] + span:not([data-boxme]):before {
  content: "";
  border: 2px solid #00F;
  border-left: none;
  border-radius: 0 5px 5px 0;
  padding-right: 4px;
}

<div id="boxed_contents">
    <span>hello</span><!--
 --><span>world</span><!--
 --><span data-boxme>look</span><!--
 --><span data-boxme>at</span><!--
 --><span data-boxme>me</span>
</div>

我不确定这个解决方案的跨平台性如何，但它似乎在我的目标 Chrome 平台上运行良好。