在CSS中,我希望所有链接都有一个边框底部:1px固体属性。但是,如果我有链接的图像,它也会获得边框。我怎样才能改变一个属性,当且仅当它包含一个img元素?如何匹配包含另一个元素的元素?
回答
尝试使用Descendant Selectors:
a img {
border-bottom: none;
}
如果它似乎并没有工作,首先确保选择是正确的(即是引用正确的元素(S))通过把一些疯狂的陈述中这将明确哪些元素是受着选择:
a img {
color: red;
background-color: red;
border-bottom: none;
}
当选择工作正常,你就可以专注于不工作(不要忘记删除疯狂陈述的声明,虽然!)。这可能是被覆盖的地方,所以要尽量增加!important
到语句的结尾:
border-bottom: none !important;
如果一切正常,那么你需要仔细检查你的CSS代码,并重新安排你的风格规则,这样你不覆盖这个规则。
如果它仍然不起作用,那么请确保您使用正确的值覆盖正确的属性。
....
<style>
a{border-bottom: 1px solid;}
a img{border:none;}
</style>
所有浏览器都不支持属性选择器。改编:IE会对它进行攻击。 – 2010-02-27 11:24:54
@Squeegy:你是对的,但我认为所有的现代浏览器都支持IE7,但IE6(当然),反正修复 – Sarfraz 2010-02-27 11:33:37
a { text-decoration: none }
您看到的链接文字装饰下划线默认。但是,如果它们包含img
标记,则不能在a
标记上更改样式。 CSS不会那样工作。你可以添加一个类到任何a
与图像,并根据它分配一个风格。
CSS
a.image { text-decoration: none }
HTML
<a href="foo" class="image"><img src="foo.jpg"/></a>
你为什么不换行<img>
在<span>
然后使用CSS
a {border-bottom: 1px solid #33ccff;}
span a {border: none;}
特别是由于标准的解决方案没有按” t为你工作,一些代码会非常有帮助。
在黑暗中拍摄,我的建议是,指定边框宽度:
a { border-bottom: 1px solid blue; }
a img { border-width: 0 0 0 !important; }
或
a img { border-bottom-width:0; }
,未能这类原因,我开始寻找其他的风格,这将是重叠(不一定是继承,只影响悬停时的视觉空间),如填充和边距以及包含元素的背景颜色。
- 1. 匹配前一元素文本包含
- 2. asp.net - Sequence不包含匹配的元素
- 3. jQuery用另一个元素标记替换匹配的元素
- 4. 检查元素是否包含jQuery中的另一个元素
- 5. 将一个元素的类匹配到另一个元素的ID或另一个元素ID的* part *
- 6. 检查元素包含另一个
- 7. 匹配元素/包含使用CSSSelector
- 8. jquery nextUntil包含匹配元素
- 9. 在另一个数组元素中包含数组元素值?
- 10. 如何设置元素的高度以匹配另一个元素的高度?
- 11. 如何用php包装另一个元素的元素
- 12. 序列包含一个以上的匹配元素 - 复合键
- 13. 获取一个元素以匹配另一个元素的滚动
- 14. 的MongoDB - 阵列包含的元素和不包含另一个
- 15. 从一个元素到另一个元素的jQuery包装
- 16. 不包含原始匹配的聚合匹配数组元素
- 17. 一个元素使另一个元素
- 18. 匹配元素
- 19. 如何检查ArrayList是否包含另一个ArrayList的元素?
- 20. 如何另一个元素
- 21. 如何匹配元素及其包含的所有属性?
- 22. XSLT:XTSE0010:一个fo:block元素不能包含一个xsl:param元素
- 23. 将(每个)元素移动到第一个匹配的元素
- 24. 如何仅选择所有匹配元素的两个元素?
- 25. 如何设置不包含某个元素的元素
- 26. 在HTML中包装一个元素与另一个元素
- 27. 匹配从一个列表到另一个列表中的元素,跳过已匹配的元素,Python
- 28. 如何找到一个小于另一个元素的元素?
- 29. 如何显示另一个元素下的一个元素?
- 30. CSS第一个子元素匹配,不是任何子元素匹配
已经尝试过。不知道为什么,但它不起作用。该图像没有边框,但由于某种原因,底部仍有边框。当我将鼠标悬停在标签上时,Firebug仅突出显示边框。只有图像,如果我悬停在img标签...所以它似乎是一个强调空间。 – 2010-02-27 09:57:41
他看到文字装饰,而不是实际的'边框' – 2010-02-27 11:23:14
@Squeegy:我可以保证你看到了边框,而不是文字的装饰。 – 2010-02-27 12:31:33