文本修飾：忽略下劃線

我試圖設置列表組的樣式，以便組項目文本不加下劃線。我的一些網站的CSS已經包括文本修飾：忽略下劃線

a:link, a:visited { 
text-decoration: underline; 
}

出於某種原因

style="text-decoration: none;"

被忽略。

HTML：

<div class="list-group"> 
    <a href="#" class="list-group-item"> 
    <h4 class="list-group-item-heading">Link 1</h4> 
    <p class="list-group-item-text">Info about link1. Underline this text.</p> 
    </a> 
    <a href="#" class="list-group-item"> 
    <h4 class="list-group-item-heading">Link 2</h4> 
    <p class="list-group-item-text" style="text-decoration: none;">Info about link2. Don't underline this text.</p> 
    </a> 
</div><!-- list-group -->

CSS（從我的網站上的其他地方）

a:link, a:visited { text-decoration: underline; }

Codepen link

來源

2015-07-20 user1566515

試試這個..它會給下劃線以鏈接2，而不是爲你的項目文本

a:link, a:visited { 
 
text-decoration: underline; 
 
} 
 

 
.nounderline{ 
 
    text-decoration: none !important; 
 
} 
 

 
.underline{ 
 
    text-decoration: underline !important; 
 
}

<div class="list-group"> 
 
    
 
\t <a href="#" class="list-group-item"> 
 
\t \t <h4 class="list-group-item-heading">Link 1</h4> 
 
\t \t <p class="list-group-item-text">Info about link1. Underline this text.</p> 
 
\t </a> 
 
    
 
\t <a href="#" class="list-group-item nounderline"> 
 
\t \t <h4 class="list-group-item-heading underline">Link 2</h4> 
 
\t \t <p class="list-group-item-text nounderline" >Info about link2. Don't underline this text.</p> 
 
\t </a> 
 
    
 
</div>

來源

2015-07-20 22:09:20 Manigand

謝謝！很棒。我想知道是否有辦法在不使用「！important」的情況下完成此操作。 – user1566515

這是因爲你在應用text-decoration: none內嵌式的p元素。

更改爲：

<a href="#" class="list-group-item" style="text-decoration: none;> 
    <h4 class="list-group-item-heading">Link 2</h4> 
    <p class="list-group-item-text">Info about link2. Don't underline this text.</p> 
</a>

通知的a標籤現在怎麼有風格，而不是p標籤。完美的作品：http://codepen.io/anon/pen/ZGMGdN

來源

2015-07-20 21:51:52

謝謝，但我確實需要鏈接2保留下劃線。 – user1566515

啊，現在更有意義 –

沒問題。我應該更清楚地說明我的問題。感謝您的幫助。 – user1566515

您可以通過CSS來做到這一點。

您的CSS無法正常工作，因爲使用了特定的僞類，其中繼承的樣式比您識別的特定僞類要多。

您的原始代碼：

a:link, a:visited { 
    text-decoration: underline; 
}

從其他樣式繼承代碼：

a { 
    text-decoration: underline; 
}

你的代碼改成這樣：

a { 
    text-decoration: none; 
}

和它工作正常：http://codepen.io/anon/pen/qdMdzZ

來源

2015-07-20 21:52:20

謝謝，但我無法更改全局CSS文件，因爲這會影響整個網站。 – user1566515

您遇到了特殊問題，並且將樣式應用於錯誤的元素。確保將其應用於a標籤。例如，給它的標籤自己的類，並應用CSS。

a.no-underline { 
    text-decoration: none; 
}

例子：http://codepen.io/anon/pen/aOaOgO

來源

2015-07-20 21:54:00 DavidG

謝謝，但我確實需要鏈接2保留下劃線。 – user1566515

文本修飾：忽略下劃線

回答

相關問題