css嵌套问题

我希望第二个嵌套的div内部的链接具有红色文本。css嵌套问题

迟钝下来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>

enter image description here

的jsfiddle：http://jsfiddle.net/5S6ez/1/

我怎样才能让我的innerdiv环节都有红色字体？

我的链接尽可能多地保留了祖父母的风格，尽管它后来在CSS文件中应用了新的样式。为什么？

来源

2011-09-15 rlb.usa

的问题是id基于选择比类名基于选择更具体的，要改变这种状况，使用方法：

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

来源

2011-09-15 19:03:49

我会接受你的答案，因为它是第一个，它解释了原因。我没有意识到发生了一场id级的冲突。 –

谢谢！我很高兴得到了帮助。 =） –

尝试制作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/

来源

2011-09-15 19:02:50 user470714

使用，而不是一个：链接。：链接是未访问链接的伪类。除非你设置了“display：inline-block”或者“display：inline-block”，否则只是为了能够帮助你处理其他事情，记住标签也是内联元素，而不是使用填充等对它们进行样式设置。显示：块“。是的，比你问的要多一点，但仍然有帮助。

来源

2011-09-15 19:06:53

回答

相关问题