css - CSS3 使后代元素关闭父元素的边框样式

Question

我知道 text-decoration-skip 可用于使后代元素关闭其父元素的文本装饰，例如下划线、换行和上划线，但是有没有类似的方法可以关闭后代元素中的边框？

示例 HTML：

<p class="border">This text has a border 
    <span class="no_border">and this text doesn't</span></p>

示例 CSS：

.border {
border: 1px solid #FF0000;
}

.no_border {
    /* magic border turn off trickery */
}

我会很感激你知道这样做的任何方法，因为我认为这将是一个非常好的效果，但我开始认为基于这个问题可能是不可能的：CSS text-decoration property cannot be overridden by child element。

有人问为什么不添加另一个 span 元素。虽然这可能是最好的解决方案，我可能应该开始这样做，但我犹豫的原因是因为我的文本是用这样的东西生成的：

$('<p/>', { "id" : "seq_insert_" + i, "class" : arraySeqArrays[i].getBaseType() + " " + arraySeqArrays[i].getFivePrime(), "text" : subsequence } ).add($('<p/>', { "id" : "comp_insert_" + i, "class" : arraySeqArrays[i].getBaseType() + " " + arraySeqArrays[i].getThreePrime(), "text" : subcomplement } )).wrapAll('<td/>').parent().appendTo('#' + subsequenceId);

所以我可能会想出一种方法来添加另一个跨度，但可能需要我一段时间，呵呵。

Answer 1

不，但您可以将边框与背景颜色匹配以获得类似的效果：

演示

.no_border {
    border: 1px solid white;
}