如何阻止應用於所有鏈接的鏈接

我有以下css用於使一個鏈接着色，但它適用於我擁有的所有鏈接。有什麼辦法可以制止這種情況嗎？如何阻止應用於所有鏈接的鏈接

這是我的CSS，這是獲得應用於鏈接：

a:visited { 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size: 14px; 
font-style: italic; 
font-weight: bold; 
color: #FFF; 
text-decoration: none; 
background-color: #F00; 
display: block; 
border-radius: 5px; 
z-index:10; 
} 

a:link { 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size: 14px; 
font-style: italic; 
font-weight: bold; 
color: #FFF; 
text-decoration: none; 
background-color:#F00; 
display: block; 
border-radius: 5px; 
z-index:10; 
} 

a:hover { 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size: 14px; 
font-style: italic; 
font-weight: bold; 
color: #CCC; 
text-decoration: none; 
background-color: #C00; 
display: block; 
border-radius: 5px; 
z-index:10; 
}

這是它想獲得應用於鏈接：

<td><a href="Food.html">Food</a></td>

這是鏈接，我不不希望它適用於：

<td class="footer"><b><a href="Rides.html">Top Attractions</a></b>

來源

2014-10-09 philip

您可以選擇您的a標記href這樣的：

的jsfiddle - DEMO

a[href="Food.html"] { 
    color: red; 
}

更新時間：DEMO（與你的代碼）

來源

2014-10-09 11:27:48 Anonymous

試試這個

HTML

<td><a href="Food.html" class="colored>Food</a></td>

CSS

.colored{ 
color:red; 
}

來源

2014-10-09 11:28:05 Akshay

有一兩件事你可以做，將是給標籤的ID /類，然後是指在你的CSS。

來源

2014-10-09 11:28:14 LiamWilson94

我試着添加一個類，但它沒有工作 – philip 2014-10-09 12:34:38

您可以將一個類添加到您想要的不同鏈接並單獨設置它。

HTML：

<td class="footer"><b><a href="Rides.html" class="rides">Top Attractions</a></b>

CSS：

a.rides {...}

來源

2014-10-09 11:29:03 codephobia

應用類到要實現鏈接：

a:link.apply_to_this{ 
    // your styles 
}

：

<a href='food.html' class='apply_to_this'>Food</a>

在你的CSS

然後

來源

2014-10-09 11:29:04 proPhet

您可以添加一個類的鏈接，您wan't到應用此規則，或者您可以使用此規則：

a:not(.footer):link {...}

來源

2014-10-09 11:29:19 ghorg12110

工作的jsfiddle：demo
我給的鏈接，你想要的風格類給了這個班級一個風格。

a.food :visited

，而不是一個：拜訪

來源

2014-10-09 11:30:18 Nick

而不是阻止它被應用到一個鏈接，你需要添加一個類額外的CSS將覆蓋鏈接要改變風格，或（儘管這是不好的做法...）在該鏈接上使用內聯樣式。

妥善解決：

在你的CSS

.exception {put css here that will override the general link css, using !important to override it ifnecessary}

在HTML

<a href="food.html" class="exception">Content here</a>

快速和骯髒的解決方案

<a href="food.html" style="Your overiding css here">Content</a>

雖然這種方式將起作用，但對於可訪問性問題，這是正確的。

來源

2014-10-09 11:33:02 BFWebAdmin

您只需創建一個類，像上面提到或者你可以按照通過你的選擇，告訴CSS來應用的鏈接代碼，只將其應用到該鏈接：這些選擇中的鏈接像我貼在下面：

#mainContainer #footer #etC#etc a:link { 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size: 14px; 
font-style: italic; 
font-weight: bold; 
color: #FFF; 
text-decoration: none; 
background-color:#F00; 
display: block; 
border-radius: 5px; 
z-index:10; 
}

PS - 內聯樣式是非常糟糕的做法。它增加了大量額外的代碼，這些代碼會降低Google，Yahoo，MSN等的排名。更不用說它使代碼更難閱讀，更笨拙。

來源

2014-10-09 11:40:35 tommydevs

如何阻止應用於所有鏈接的鏈接

回答

相關問題