CSS嵌套问题

发布于 2024-12-05 08:18:11 字数 830 浏览 0 评论 0 原文

我希望第二个嵌套 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 文件中出现的新样式。为什么?

I want the links inside of the second, nested div to have red text.

Dulled down 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;}

Dulled down HTML:

   <div id="outerdiv">
        OUTERDIV <a href="#">link</a>
        <div class="innerdiv">
            INNER DIV <a href="#">link</a>
        </div>
    </div>

enter image description here

JSFiddle: http://jsfiddle.net/5S6ez/1/

How can I make my innerdiv links have red font?

My link keeps as much of its grandparents' styles as possible even though it has new styles applied to it that occur later in the CSS file. Why?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

痴意少年 2024-12-12 08:18:11

问题是基于 id 的选择器比基于类名的选择器更具体,要更改它,请使用:

#outerdiv .innerdiv a:link{ color: red; background-color:White;}

The problem is that the id based selector is more specific than the class-name based selector, to change that, use:

#outerdiv .innerdiv a:link{ color: red; background-color:White;}
半世晨晓 2024-12-12 08:18:11

尝试使用outerdiv 类而不是id。像这样:

.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;}

如果这不是一个选项(外层 div 必须是 id),那么您可以尝试使 innderdiv 规则更具体地针对外层 div,如下所示:

#outerdiv .innerdiv{ padding:10px; background-color: #aaa;}
#outerdiv .innerdiv a:link{ color: red; background-color:White;}

另外,我最近被介绍到这篇文章,它确实有一般来说,CSS 对我帮助很大:

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Try making the outerdiv classes instead of ids. Like this:

.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;}

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:

#outerdiv .innerdiv{ padding:10px; background-color: #aaa;}
#outerdiv .innerdiv a:link{ color: red; background-color:White;}

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/

对你而言 2024-12-12 08:18:11

使用 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文