Question

我有几个相邻的span代码，其样式为display: inline-block;，如下所示：

＆＃13;

span.mark {
  background-color: yellow;
  display: inline-block;
  vertical-align: center;
  border-width: 1px;
  border-color: red;
  border-style: solid;
  border-radius: 3px;
}

＆＃13;

<p>Some <span class="mark">standalone</span> test. Some <span class="mark">continuous </span><span class="mark">elements </span><span class="mark">that</span> should be formatted together.</p>

<p>Some <span class="mark">normal </span><b><span class="mark">and strong</span></b> text that should be formatted together.</p>

＆＃13;

所以目前这些span标签都有自己的小边框。但是，我希望他们看起来就像他们周围的一个边界一样。因此，技术上，外部的应该有border-width-left: 1px;用于第一个，border-width-right: 1px;用于最后一个，而中间的应该有border-width: 1px 0px;。

有没有办法在CSS中执行此操作？基本上规则应该是：＆＃34;如果这是带有标记类的跨度，并且我之前和之后的元素是带有标记类的跨度，则应用中间元素样式。如果这是带有标记类的span，并且我之前的元素不是具有标记样式的元素，并且我之后的元素是具有标记样式的span元素，则应用左元素样式。等...＆＃34;

我知道有span.mark:before和span.mark:after，但我实际上并不想在当前元素之前或之后设置元素的样式。我希望在它之前和之后的最佳状态上设置当前的风格。另外，我需要检查:before和:after元素的类。

修改也许我的例子太简单了。给定的<span>中会有多个<p>个标记字符串。整个:first-of-type :last-of-type看起来非常有前途，我对此并不了解。我担心解决方案会更复杂，如果它完全有效......

Answer 1

在伪元素的支持以及absolute定位和堆叠上下文的组合下，可以实现预期的行为。

下面嵌入的代码段演示了每个前面的元素伪元素如何堆叠在以下元素下面;传达无缝连续性的印象，同时仍保持独立元素的完整边框的视觉印象。

代码段示范：

＆＃13;

span.mark {
    background-color: yellow;
    display: inline-block;
    border-width: 1px;
    border-color: red;
    border-style: solid;
    padding: 0px 2px;
    border-right: 0px;
    border-left: 0px;
    position: relative;
}

span.mark:after,
span.mark:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    /* for border-radius */
    border-radius: 3px;
    background: yellow;
    width: 5px;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

span.mark:after {
    border-right: 1px solid red;
    right: -2px;
}

span.mark:before {
    border-left: 1px solid red;
    left: -2px;
}

＆＃13;

<p>Some <span class="mark">standalone</span> test. Some <span class="mark">continuous </span><span class="mark">elements </span><span class="mark">that</span> should be formatted together.</p>

<p>Some <span class="mark">normal </span><b><span class="mark">and strong</span></b> text that should be formatted together.</p>

＆＃13;

Answer 2

是的，我会使用:first-child和:last-child伪选择器来设置第一个/最后一个跨度的样式与其余的不同。见https://jsfiddle.net/samando27/xydqpbx8/1/

CSS：基于相邻元素类的条件格式

2 个答案: