css嵌套问题

Question

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

Answer 1

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

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

Answer 2

尝试创建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规则更具体于outerdiv，如下所示：

#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/

Answer 3

使用a而非a：链接。 ：link是未访问链接的伪类。

此外，只是为了帮助您处理其他事情的抬头，请记住标签也是内联元素，而不是用填充等设置它们，除非您设置“display：inline-block”或“display” ：阻止“。是的，比你提出的要多一点，但仍然可以提供帮助。