假設(shè)您有這樣一個(gè)html:

<a href="#">
    This is underlined
    <span>
        This isn't.
    </span>
</a>

這個(gè)css:

a:hover {
    text-decoration: underline; /* I know, this is enabled by default. */
}

a:hover span {
    text-decoration: none !important;
}

為什么a >span元素仍然有下劃線？我很確定你應(yīng)該用“無”來取消裝飾。我知道你可以用這個(gè)達(dá)到我想要的結(jié)果:

<a href="#">
    <span class="underlined">
        This is underlined
    </span>
    <span>
        This isn't.
    </span>
</a>

加上這個(gè)css:

a:hover {
    text-decoration: none;
}

a:hover span.underlined {
    text-decoration: underline;
}

但是...我不明白為什么不能取消子元素的文本修飾。 那么，為什么呢...？

編輯:內(nèi)嵌塊

根據(jù)@amosrivera的說法，當(dāng)您使用內(nèi)聯(lián)塊時(shí)，它確實(shí)可以工作。我可以確認(rèn)這可以在Safari和Chrome上工作！

a:hover span{
    text-decoration:none;
    display:inline-block;
}

如上所述，這適用于Safari和Chrome，但不適用于Firefox。以下解決方案適用于Firefox，但不適用于Safari和Chrome...

a:hover span{
    text-decoration:none;
    display:block;
}

小桌子:

CSS-Rule            |    Webkit    |    Firefox    |    Opera    |    IE    
--------------------------------------------------------------------------------
display: block;         |       x      |               |      ?      |     ?    
display: inline-block;  |              |       x       |      ?      |     ?

這與span是一個(gè)內(nèi)聯(lián)元素的事實(shí)有關(guān)。試試這個(gè):

a span{
    text-decoration:none;
    display:inline-block;
}

在線演示:http://jsfiddle.net/yffXp/

更新

在FF (4？)only display:block起作用(同時(shí)在webkit中不起作用)，導(dǎo)致?lián)Q行。

更新2(黑？)

a span{
    display:inline-block;
    background:#fff;
    line-height:1.1em;
}

在邊框上覆蓋白色背景并不美觀，但似乎可以做到。它可以在除IE 6，7以外的任何瀏覽器上運(yùn)行

在線演示:http://jsfiddle.net/yffXp/6/

可能有一些難以置信的滑稽的跨瀏覽器方法來做到這一點(diǎn)，但為了理智起見，我只是采用這種方法(您問題中的解決方案的變體):

它只是工作:http://jsfiddle.net/KrepM/1/

HTML:

<a href="#">
    <span>This is underlined</span>
    This isn't.
</a>

CSS:

a:hover {
    text-decoration: none
}

a:hover span {
    text-decoration: underline
}

作為一個(gè)解決方案，我會(huì)使用@thirtydot的一個(gè)，但就問題而言，我認(rèn)為你看問題的方式是錯(cuò)誤的。

檢查下面的小提琴:如你所見，非裝飾部分沒有用給定的顏色裝飾；你所看到的是它的父元素延伸到元素末尾的顏色(因?yàn)閍中的空格也有下劃線)。所以瀏覽器真的在做你告訴它去做的事情，只是你沒有看到而已。

作為參考，把以前的提琴和這個(gè)比較一下。猜猜當(dāng)你把跨度的顏色換成背景色時(shí)會(huì)發(fā)生什么...

當(dāng)我為鏈接使用一個(gè)類時(shí)，我發(fā)現(xiàn)了這個(gè)問題。

<a href="#close" class="close">&times;</a>

如果我用了。在我的css chrome和safari中關(guān)閉鏈接。當(dāng)我在類名前添加一個(gè)標(biāo)簽時(shí)，一切都開始正常工作了。

a {
    text-decoration: none;
}
a.close {
    color: black;
}

@amosrivera的回答幫我解圍但還不夠:

我有以下內(nèi)容:

<p>
    some text
</p>

從一個(gè)遠(yuǎn)祖元素的& lta & gt元素。即使在直接選擇& ltp & gt元素和應(yīng)用文本修飾:沒有，它仍然有下劃線。所以我不得不做以下事情:

將所有文本在一個(gè)范圍內(nèi)換行:

<p>
    <span>some text</span>
</p>

那我可以用@amosrivera的回答:

span {
    display: inline-block;
}

顯然，我甚至不需要文字裝飾:一點(diǎn)也不！

文本裝飾將傳播到未顯示的所有元素(類似于顏色):塊或內(nèi)嵌塊(甚至flex/grid布局也會(huì)受到影響)。

但是有一個(gè)簡單的技巧可以使用has選擇器取消文本修飾，如果它有某些嵌套元素的話:

a:hover {
  text-decoration: underline;
}
a:hover:has(span) {
  text-decoration: none;
}

如果父元素有特定的子元素，這將禁用父元素的文本修飾。

現(xiàn)在我知道這不完全是上面描述的情況。 對(duì)于這種特殊情況，除了使用塊，確實(shí)沒有其他選擇。

我今天遇到了這個(gè)問題，但對(duì)于偽元素，這相當(dāng)于相同的情況，我能夠找到一個(gè)解決方案。設(shè)置溢出:隱藏；在子元素上。然后將子元素的高度設(shè)置為略小于鏈接其余部分的高度。你需要調(diào)整幾次高度來獲得合適的高度，但是最終你應(yīng)該能夠讓下劃線消失。