CSS：令人驚訝地刪除了沒有處理子顯示：內聯塊div

Question

如果我應用文本修飾 ，我有一個代碼：line-through; 在外部div上，所有內部div元素也必須是“strikethroughed” 。 這通常100％正常; 但是，如果我將子元素設置為' display：inline-block '，現在應用於父div的刪除線不會影響對孩子的攻擊。 我必須把孩子作為顯示器：內聯塊，我需要在添加文本裝飾時划掉孩子：直通; 到父div 。

 div{padding:10px;} #outer{background:yellow;text-decoration: line-through;} #inner{background:pink;display:inline-block;} 

 <div id=outer> <div id=inner> This is the text </div> </div> 

這是一個辦公室項目，非常感謝您的幫助！

Answer 1

使用text-decoration:inherit 。

 div{padding:10px;} #outer{background:yellow;text-decoration: line-through;} #inner{background:pink;display:inline-block; text-decoration:inherit} 

 <div id=outer> <div id=inner> This is the text </div> </div> 

通常， text-decoration不是繼承屬性，因此內部div具有隱式text-decoration:none ，默認值。 通過使用inherit ，您可以告訴元素它應該具有與其父元素相同的文本修飾。

Answer 2

text-decoration的默認值為none ，因此如果希望它不同，則需要指定一個值。 使用inherit來使用父級的值：

#outer > div { text-decoration: inherit; }

或者為#inner調整css以包含text-decoration: inherit; ：

#inner { background: pink; display: inline-block; text-decoration: inherit; }

---

例

 div{padding:10px;} #outer{background:yellow;text-decoration: line-through;} #inner{background:pink;display:inline-block; text-decoration: inherit; } 

 <div id=outer> <div id=inner> This is the text </div> </div>