禁用某些元素的css樣式

我用css爲具有鏈接的菜單創建樣式，但現在該樣式適用於頁面上的所有鏈接。我如何禁用某些鏈接的CSS樣式？這裏是CSS代碼：禁用某些元素的css樣式

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
} 

li { 
font-size: 35px; 
display: inline-block; 
} 

a:link, a:visited { 
display: block; 
width: 250px; 
font-weight: bold; 
color: #FFFFFF; 
background-color: #0080FF; 
text-align: center; 
padding: 4px; 
text-decoration: none; 
text-transform: uppercase; 
} 

a:hover, a:active { 
background-color: #66B2FF; 
}

這裏是HTML代碼（這是一個畫廊）：

<html> 
    <head> 
     <title>GALLERY</title> 
     <link rel="stylesheet" type="text/css" href="styles.css"> 
     <script type="text/javascript" language="JavaScript"> 
     </script> 
    </head> 
<body> 
<center><br/> 
<font face="Geneva" id="title">GALLERY</font><br/><br/><br/> 
</center> 
<center> 
<ul> 
    <li><a href="index.html">home</a></li> 
    <li><a href="about.html">about</a></li> 
    <li><a href="gallery.html">gallery</a></li> 
    <li><a href="contact.html">contact</a></li> 
</ul><br/><br/><br/> 


<table border="1"> 
    <tr> 
     <td><a href="pictures/gallery/pic1.jpg" target="_blank"><img src="pictures/gallery/pic1.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic2.jpg" target="_blank"><img src="pictures/gallery/pic2.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic3.jpg" target="_blank"><img src="pictures/gallery/pic3.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic4.jpg" target="_blank"><img src="pictures/gallery/pic4.jpg" width="450" height="253"/></a></td> 
    <tr> 
    <tr> 
     <td><a href="pictures/gallery/pic5.jpg" target="_blank"><img src="pictures/gallery/pic5.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic6.jpg" target="_blank"><img src="pictures/gallery/pic6.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic7.jpg" target="_blank"><img src="pictures/gallery/pic7.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic8.jpg" target="_blank"><img src="pictures/gallery/pic8.jpg" width="450" height="253"/></a></td> 
    <tr> 
    <tr> 
     <td><a href="pictures/gallery/pic9.jpg" target="_blank"><img src="pictures/gallery/pic9.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic10.jpg" target="_blank"><img src="pictures/gallery/pic10.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic11.jpg" target="_blank"><img src="pictures/gallery/pic11.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic12.jpg" target="_blank"><img src="pictures/gallery/pic12.jpg" width="450" height="253"/></a></td> 
    <tr> 
    <tr> 
     <td><a href="pictures/gallery/pic13.jpg" target="_blank"><img src="pictures/gallery/pic13.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic14.jpg" target="_blank"><img src="pictures/gallery/pic14.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic15.jpg" target="_blank"><img src="pictures/gallery/pic15.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic16.jpg" target="_blank"><img src="pictures/gallery/pic16.jpg" width="450" height="253"/></a></td> 
    <tr> 
</table> 

</center> 
</body> 
</html>

所以在表中的所有環節使用的樣式從CSS。我如何阻止？提前致謝。

來源

2015-06-20 bux

在CSS，你沒有「禁用」規則;你添加新的規則，目標是一些較窄的元素集。 – 2015-06-20 13:47:37

@bux請理解應用css的目的，而不是將它從某些元素中移除。如果你想「禁用」或「免除」某些元素具有特定的css風格，那麼答案就是你不要將css應用於這些元素。詳情請查看我的答案。希望它能在未來幫助你。 –

使用CSS選擇特定：

ul{ 
    //CSS for ul 
} 

ul li{ 
    //CSS for li 
} 

ul li a{ 
    //add CSS for nav links 
}

來源

2015-06-20 13:51:16 NicuVlad

它的工作原理，謝謝！ – bux

創建另一個類，或使用樣式= 「」

例如：

來源

2015-06-20 13:40:51 edgarasb

避免使用線內樣式通常是一種很好的做法。 – DBS

如果你知道你的目標只有CSS3功能的瀏覽器，你可以使用:not() selector for CSS。給你的鏈接，你不想風格類，然後應用到你的鏈接的CSS定義：

a:link:not(.no-style), a:visited:not(.no-style){ 
... 
} 

a:hover:not(.no-style), a:active:not(.no-style) { 
... 
}

的jsfiddle：http://jsfiddle.net/L60ktyb3/

來源

2015-06-20 13:45:13 moneyt

您需要理解在頁面上定義的css屬性可以通過在內部添加css屬性來覆蓋。請參考：http://www.expression-web-tutorial.com/Types_CSS_Styles.html#.VYVxElIoRoc

來源

2015-06-20 13:57:03

內聯樣式屬性應該只能用於單個項目，或者可能僅限於動態生成樣式。否則你會有多餘的CSS，這會導致可維護性差。你的HTML的大小也會增加。這會導致更長的加載時間和更高的流量成本，特別是當用戶在流量有限的移動設備上使用您的網站時。所以它是一個好主意，根本不用它們。

使用CSS類或ID從一開始就認爲你是非常靈活的優點是：

<tr> 
    <td><a class="gallery-link" href="pictures/gallery/pic13.jpg" target="_blank"><img src="pictures/gallery/pic13.jpg" width="450" height="253"/></a></td> 
</tr>

現在，您可以通過使用CSS的類樣式所有的畫廊鏈接：

<style type="text/css"> 
.gallery-link { 
    color: blue; 
    [...] 
} 
</style>

在某些情況下，非選擇器http://www.w3schools.com/cssref/sel_not.asp可能是有用的。他將樣式的所有元素期望在選擇的那些：

a:not(.gallery-link) { 
    color: orange; 
}

所以這可以被看作是上述CSS的相反：將着色所有的鏈接橙色其中不有類名爲.gallery鏈接 - 但主要是你最好設置一個一般的規則，在所有鏈路像

a { 
    color: blue; 
}

或者你已經有了通過你使用一個CSS框架限定的這樣的規則。對於你的圖庫鏈接和其他元素應該看起來不同，你可以定義類和id，你可以風格，因爲你不能。他們對沒有指定類別的其他元素沒有影響。

來源

2015-06-20 14:00:25 Lion

謝謝@Lion – bux

你必須瞭解css的功能。將css應用於不從某些元素中移除它的目的。如果你想「禁用」或「免除」某些元素具有特定的css風格，那麼答案就是你不要將css應用於這些元素。

回到你的代碼，我建議你不要像你所做的<a>錨標籤那樣對css規則進行概括。相反，你使用class="menuItems"或class="galleryImages"來分班。總之，不這樣做，

ul li a{ 
    // some css 
}

做到這一點，

.menuItems{ 
    // some css that is specific to menu items 
} 

.galleryImages{ 
    // some css that is specific to images 
}

而在你的HTML做到這一點，

<ul> 
    <li><a href="index.html" class="menuItems">home</a></li> 
    <li><a href="about.html" class="menuItems">about</a></li> 
    <li><a href="gallery.html" class="menuItems">gallery</a></li> 
    <li><a href="contact.html" class="menuItems">contact</a></li> 
</ul> 

<tr> 
     <td><a href="pictures/gallery/pic13.jpg" target="_blank" class="galleryImages"><img src="pictures/gallery/pic13.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic14.jpg" target="_blank" class="galleryImages"><img src="pictures/gallery/pic14.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic15.jpg" target="_blank" class="galleryImages"><img src="pictures/gallery/pic15.jpg" width="450" height="253"/></a></td> 
     <td><a href="pictures/gallery/pic16.jpg" target="_blank" class="galleryImages"><img src="pictures/gallery/pic16.jpg" width="450" height="253"/></a></td> 
    <tr>

來源

2015-06-20 14:10:01

謝謝你的好建議，我是學生，我仍然在學習，所以這是非常有幫助的。 – bux

不客氣..一切順利！ –

禁用某些元素的css樣式

回答

相關問題