CSS嵌套问题
我希望第二个嵌套 div
内的链接具有红色文本。
沉闷的CSS:
#outerdiv{ padding:10px; background-color: #ddd;}
#outerdiv a:link{ color:blue; }
.innerdiv{ padding:10px; background-color: #aaa;}
.innerdiv a:link{ color: red; background-color:White;}
沉闷的HTML:
<div id="outerdiv">
OUTERDIV <a href="#">link</a>
<div class="innerdiv">
INNER DIV <a href="#">link</a>
</div>
</div>
JSFiddle:http://jsfiddle.net/5S6ez/1/
如何使我的 innerdiv
链接具有红色字体?
我的链接尽可能多地保留其祖父母的样式,即使它应用了稍后在 CSS 文件中出现的新样式。为什么?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
问题是基于 id 的选择器比基于类名的选择器更具体,要更改它,请使用:
The problem is that the
id
based selector is more specific than the class-name based selector, to change that, use:尝试使用outerdiv 类而不是id。像这样:
如果这不是一个选项(外层 div 必须是 id),那么您可以尝试使 innderdiv 规则更具体地针对外层 div,如下所示:
另外,我最近被介绍到这篇文章,它确实有一般来说,CSS 对我帮助很大:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Try making the outerdiv classes instead of ids. Like this:
If that is not an option (outer div must be an id), then you can try to make the innderdiv rules more specific to the outerdiv, like this:
Also, I was recently introduced to this article, and it really has helped me a lot with CSS in general:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
使用 a,而不是 a:link。
:link 是未访问链接的伪类。
另外,只是为了提醒您可能对其他事情有帮助,请记住标签也是内联元素,并且不要使用填充等来设置它们的样式,除非您设置“display:inline-block”或“display:block” 。是的,比你要求的多一点,但仍然有帮助。
Use a, not a:link.
:link is a pseudo-class for unvisited links.
Also, just for a heads up that may help you with other things, keep in mind that a tags are also inline elements and not to style them with padding, etc unless you set "display: inline-block" or "display: block". Yeah, a bit more than you asked but still can be helpful.