html - 重叠的 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 不喜欢被添加到 2 个类中，比如 .red.green:first-of-type 所以我不得不将它们添加为 first和类中的 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>