禁用某些元素的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样式

回答

相关问题