样式未被图像覆盖

Question

我有一个网页，其中包含一系列我设置的链接，可以引导您访问其他网页。其中一个页面是照片库。

当我尝试将缩略图链接到较大的图像时，我得到的这个黑色边框高约2-3像素，略宽于缩略图。我已经尝试了一切来覆盖并摆脱这一点，但我所做的一切似乎都没有用。

 a:link,a:visited {
display: inline;
font-weight: bold;
color: #FFFFFF;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 30px;
padding-left: 30px;
margin: 10px;
text-align: center;
text-decoration:none;
border: 2px solid black;
}

a:hover {
background-color: #3bb2cE;
border: 2px solid black;
transition-property: background-color;
transition-duration: 1s;    
}

a:active {
background-color: #3bb2cE;
border: 2px solid black;
}

.link2 a:link, .link2 a:hover; .link2 a:active {
margin: 10px;
border: none;
}

link2是我试图覆盖CSS的原因。它甚至在HTML中都不起作用：

<a class="link2" href="images/stairs1.jpg"><img src="images/stairs1_thumb.jpg" /></a>
<a class="link2" href="images/staris2.jpg"><img src="images/stairs2_thumb.jpg" /></a>

以下是正在发生的事情的图像：

Answer 1

如果无法移除边框，并且只需要覆盖边框，请使用：

a.link2 {
    margin: 10px;
    border: none;
}

jsFiddle example - 它有效。

您的其他样式（.link2 a:link, .link2 a:hover; .link2 a:active）未被应用。 选择器.link2 a:link正在选择一个a元素，一个链接，以及一个类.link2元素的子元素...这显然不起作用，.link2是您尝试从中删除边框的a元素。

简单地说，只需使用a.link2，即选择a个.link2个元素。{/ p>

正如演示所示，这将有效地覆盖初始样式，删除边框。

Answer 2

从你的css中删除它

border: 2px solid black;

Answer 3

无需删除任何CSS

http://jsfiddle.net/cancerian73/bX4WH/1/

a:link, a:visited {
display: inline;
font-weight: bold;
color: #FFFFFF;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 30px;
padding-left: 30px;
margin: 10px;
text-align: center;
text-decoration:none;
border: 2px solid black; /*for no border remove this*/
display:inline-block;   /*add this*/
}