重叠 HTML 标记

Question

我想要三个数字（或单词或其他），前两个用红色框包围，后两个用绿色框包围。所以盒子会重叠。这在 html/css 中可能吗？我在代码段中有一个半合法的尝试，希望能得到我想要的东西，尽管它当然不起作用。如果可能的话，我想避免绝对定位或类似的东西，因为我真的想使用这些元素来标记文本，并计划稍后阅读该标记。

.red {
    border-style: solid;
    border-color: red;
    padding: 4px;
}
.green {
    border-style: solid;
    border-color: green;
}

1 2 3                              <br /><br />
<span class="red">1 2</span> 3     <br /><br />
1 <span class="green">2 3</span>   <br /><br />
<span1 class="red"">1 <span2 class="green">2</span1> 3</span2>

这大约是我希望它看起来像：

Answer 1

您想要故意破坏 XHTML 中的 XML 格式。浏览器是否能正确解释元素的边框？在过去，类似这样的事情很常见<b class="red"">1 <u class="green">2</b> 3</u>，你会发现它“更接近”你想要的，但现在浏览器会填补这些显示空白，并在添加 CSS 时强制采用正确的格式。所以你不得不进行CSS hack...

抱歉， :first-of-type 和 :last-of-type 似乎不喜欢添加到 .red.green:first-of-type 这样的 2 个类中，所以我必须将它们添加到 asfirst和last类中

（您可以通过查看哪些元素具有两个类来找到重叠）

    	.numbersContainer {
    	  position: relative;
    	  margin: 12px;
    	}
    	.red {
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: red;
    	  padding: 4px;
    	}
    	.green {
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: green;
    	}
    	.red.green:before {
    	  content: " ";
    	  position: absolute;
    	  z-index: -1;
    	  top: 0px;
    	  left: 0px;
    	  right: 0px;
    	  bottom: 0px;
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: green;
    	  padding: 4px;
    	}
    	.red.green {
    	  position: relative;
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: red;
    	  padding: 4px;
    	}
    	.numbersContainer .red:first-of-type {
    	  border-left-style: solid;
    	}
    	.numbersContainer .red:last-of-type {
    	  border-right-style: solid;
    	}
    	.numbersContainer .green:first-of-type {
    	  border-left-style: solid;
    	}
    	.numbersContainer .green:last-of-type {
    	  border-right-style: solid;
    	}
    	.first {
    	  border-left-style: solid;
    	}
    	.last {
    	  border-right-style: solid;
    	}
    	.red.green.first {
    	  border-left-style: none;
    	}
    	.red.green.first:before {
    	  border-left-style: solid;
    	}
    	.red.green.last {
    	  border-right-style: solid;
    	}
    	.red.green.last:before {
    	  border-right-style: none;
    	}
    	

<div class="numbersContainer">
  1 2 3
</div>
<div class="numbersContainer">
  <span class="red">1 2</span> 3
</div>
<div class="numbersContainer">
  1 <span class="green">2 3</span> 
</div>
<div class="numbersContainer">
  <span class="red">1 </span><span class="red green first last">2</span><span class="green">3</span>
</div>
<div class="numbersContainer">
  <span class="red">1 </span><span class="red green first">2</span><span class="red green">3</span><span class="red green">4</span><span class="red green last">5</span><span class="green">6</span>
</div>