CSS3創建後代元素關閉父類邊框樣式

我知道text-decoration-skip可以用來使後代元素關閉其父文本裝飾，如下劃線，直通和上劃線，但是有沒有可比較的方式關閉後代元素的邊界？CSS3創建後代元素關閉父類邊框樣式

示例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);

所以我也許可以想出一個辦法來再加一個跨度，但可能需要我一段時間。

來源

2013-04-27 sage88

而不是添加邊框，然後刪除它，爲什麼不添加一個跨度，增加了一個邊界到文本的第一位？ – bookcasey 2013-04-27 13:45:48

這可能是最簡單的方法來做到這一點，希望我在寫出所有jQuery javascript之前想到了它......增加了如何生成上面的文本。 – sage88 2013-04-27 14:02:17

沒有，但你可以匹配邊境的背景顏色類似的效果：

Demo

.no_border { 
    border: 1px solid white; 
}

來源

2013-04-27 13:44:41 bookcasey

雖然這是我嘗試過的，但效果並不好。它有時會覆蓋另一個邊界，但它經常會出現。此外，它不會留下完整的輪廓，這是所需的效果。 – sage88 2013-04-27 14:08:12

CSS3創建後代元素關閉父類邊框樣式

回答

相關問題