Question

我使用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代码（It's a gallery）：

<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中的样式。我怎么阻止它？提前谢谢。

Answer 1

使用CSS特定选择器：

ul{
    //CSS for ul
}

ul li{
   //CSS for li
}

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

Answer 2

创建另一个类，或使用style =＆＃34;＆＃34;

示例：

^(((a*b){2})*)a*$

Answer 3

如果您知道自己仅定位支持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/

Answer 4

您需要了解页面上定义的css属性可以通过添加内联的css属性来覆盖。请参阅：http://www.expression-web-tutorial.com/Types_CSS_Styles.html#.VYVxElIoRoc

Answer 5

内联样式属性应仅在（如果有的话）仅在单个项目时使用，或者在动态生成样式的有限情况下使用。否则你有冗余的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-link - 但大多数情况下，最好为所有链接设置一般规则，例如

a {
  color: blue;
}

或者您可能已经有一个由您正在使用的css框架定义的规则。对于您的gallery-links和其他应该看起来不同的元素，您可以定义类和ID，您可以随意设置样式。它们对指定类的其他a元素没有影响。

Answer 6

你必须了解css的作用。应用css的目的不是从某些元素中删除它。如果你想＆＃34;禁用＆＃34;或者＆＃34;免除＆＃34;一些具有特定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>

禁用某些元素的CSS样式

6 个答案: