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

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

Demo

.no_border {
    border: 1px solid white;
}

CSS3制作一个后代元素关闭父母的边框样式

1 个答案: