禁用某些元素的 css 样式

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 代码（这是一个画廊）：

<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>

因此 table 中的所有链接都使用 css 中的样式。我该如何阻止它？提前致谢。

Answer 1

创建另一个 class，或使用 style=""

示例：

<a href="link" style="color: #fff;">page</a>

Answer 2

如果您知道您只针对 CSS3 支持的浏览器，则可以使用 :not() selector for CSS。将您不想要的 link 样式化为 class，然后应用于您的 link 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 3

使用 CSS 个特定选择器：

ul{
    //CSS for ul
}

ul li{
   //CSS for li
}

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

Answer 4

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

Answer 5

内联样式属性（如果有的话）应该只在它是单个项目时使用，或者在有限的情况下用于动态生成的样式。否则你有多余的CSS，这将导致可维护性差。 HTML 的大小也会增加。这可能会导致更长的加载时间和更高的流量成本，尤其是当人们在流量有限的移动设备上使用您的网站时。所以最好不要使用它们。

从一开始就使用 css classes 或 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 中的 class 为所有图库-link 设置样式：

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

在某些情况下，非选择器 http://www.w3schools.com/cssref/sel_not.asp 可能很有用。他将为选择器中的所有元素设置样式：

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

所以这可以看作是上面 css 的相反：它将使 link 的所有橙色着色，其中没有 class .gallery-link - 但大多数情况下，您最好为所有 link 设置通用规则，例如

a {
  color: blue;
}

或者您可能已经有了由您正在使用的 css 框架定义的这样的规则。对于 gallery-links 和其他看起来应该不同的元素，您可以定义 classes 和 id，您可以根据需要设置样式。如果没有指定 class(es)，它们将不会影响其他 a 元素。

Answer 6

您必须了解 css 的作用。应用 css 的目的不是将其从某些元素中删除。如果您想 "disable" 或 "exempt" 某些元素具有特定的 css 样式，那么答案是您不会首先将 css 应用于这些元素。

回到您的代码，我建议您不要将 css 规则概括为您拥有的 <a> 锚标记的方式。而是使用 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 样式

disable css style for certain elements

html

css

hyperlink