Question

所以..我在我的锚标签上添加了一个底部边框，让它们脱颖而出。但我有一些图像也用锚标签扭曲。问题是，我不知道如何从图像中删除边框。

请注意我使用的是WordPress，我无法修改链接和图片的显示方式

这是我的CSS代码：

.entry-content a {
padding:0 3px;
color: #104273;
border-bottom:2px solid #104273;
}

我的问题是，有什么方法可以做出类似的事情吗？

.entry-content a img {
border:none;
}

所以它只从带有链接的图像中删除边框？

http://codepen.io/andornagy/pen/sdzBq

Answer 1

您遇到的问题是，您正在设置锚标记，然后尝试在<img>标记上覆盖该样式，该标记实际上并没有应用样式，而是它的父级

如果您不想使用Javascript，则可以将文本包装在<span>标签中的链接和样式中，而不是锚本身。

HTML

<a href='#'><span>This is a blank Link</span></a>
<a href='#'><img src="..."></a>

CSS

a {
    padding:0 3px;
    color: #104273;
    text-decoration:none;
}
a span {
    border-bottom:2px solid #104273;
}

以下是其中的一个小提琴：http://jsfiddle.net/xVSA9/

<强>更新

好的，这是使用jQuery的parent()选择器的解决方案。

$('img').parent('.entry-content a').css("border-bottom", "none");

保持CSS / HTML不变，这应该可以正常工作。

这是一个小提琴：http://jsfiddle.net/GeR85/

Answer 2

假设你的HTML看起来如下：

<div class="entry-content">
    <a href=""><img src=""/></a>
</div>

图像是锚点的直接子节点，因此您可以在CSS中使用“直接子节点”选择器，它不仅仅是符号。

.entry-content>a>img{}

我喜欢在制作菜单时使用有组织的列表，因为它在名称中。他们是有组织的哈哈。

<ol id="menu">
    <li>
        <a href=""><img src=""/></a>
    </li>
    <li>
        <a href="">This is a blank link</a>
    </li>
    <li>
        <a href="">Another link</a>
    </li>
</ol>

CSS

img{
    border:1px solid #000000
}
ol#menu{
    list-style-type:none;
    margin:0px;
    padsding:0px;
}
ol#menu>li{
}
ol#menu>li>a{
    display:block;
    padding:10px 5px;
    font-size:20px;
    text-decoration:none;
    border-bottom:1px solid #000000;
}
ol#menu>li>a>img{
    border-bottom:none;
}

避免使用!important。

Answer 3

你去...... :)

HTML：

<div class="entry-content">
<a href="#">test</a>
<a href="#">
    <img src="https://www.google.co.il/images/srpr/logo11w.png" />
</a>
</div>

CSS：

.entry-content a:not(a img) {
padding:0 3px;
color: #104273;
border-bottom:2px solid #104273;
}

jsFiddle：

http://jsfiddle.net/3RJ3Q/2/

从锚标记内的图像中删除边框

3 个答案: