html - 禁用某些元素的 css 样式

标签 html css hyperlink

我使用 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 中的样式。我该如何阻止它?提前致谢。

最佳答案

使用 CSS 特定的选择器:

ul{
    //CSS for ul
}

ul li{
   //CSS for li
}

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

关于html - 禁用某些元素的 css 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30954603/

相关文章:

javascript - 在 jQuery 中展开和折叠表格行

jquery - 视觉淡出没有发生

html - 我将鼠标悬停在一个 p 上,但所有 p 都改变了背景,我在这里做错了什么?

javascript - 用JS统计列表项的数量

HTML/CSS 跨浏览器与 SVG 不一致

css - 使父 div 高度反射(reflect)子 div 的填充/边框/边距的好方法是什么?

css - 如何在 GWT 自定义日志记录区域中包装日志行?

jquery - 自定义滚动条样式,隐藏条除非滚动

hyperlink - 输入文本字段中的链接

HTML/CSS : no text change when hovering over a link