2012-08-04 144 views
-1

应该我们有如下的Html结构。子CSS样式覆盖

<table class="main-tb"> 
<tr> 
<td> 
</td> 
<td id ="mytd"> 
</td> 
</tr> 
</table> 

和应用的css文件定义如下。

.main-tb 
{ 
    font-size: 13px; 
    line-height: 20px; 
    padding: 5px 10px; 

} 
.main-tb th 
{ 
    background-color: #F8F8F8; 
    border-color: #CCCCCC -moz-use-text-color; 
    border-style: solid none; 
    border-width: 1px 0; 
    line-height: 22px; 
    padding: 5px 10px;  
} 

.main-tb td 
{ 
    border-color: #CCCCCC; 
    border-style: dotted; 
    border-width: 0 0 1px;/**/ 
    line-height: 22px; 
    padding: 5px 10px; 
} 

我们可以看到.main-tb td样式应用到表中的所有td元素。 现在,如果我想将不同的样式应用于其中一个名为mytd的td元素,例如从.main-tb td中删除边框颜色和边框宽度。那么,我该怎么办?谢谢。

回答

1

#mytd.main-tb td更具体,所以你只需从#mytd删除边框。

#mytd { 
    border: 0 none; 
} 
+0

使用!important为什么,如果我强行加个班样式mytd元素.servertd { 边境不起作用:0无; line-height:22px; padding:5px 10px; } – 2012-08-04 05:53:41

+0

如果您具体,它会工作。尝试'.main-tb .servertd {border:none; } – Chad 2012-08-04 06:07:39

+0

任何人都可以为我推荐一些好的css书籍。谢谢 – 2012-08-04 06:11:35

0

您可以简单地选择该元素与.main-tb td #mytd#mytd(因为ID是唯一的),并使用border: 0;删除边框。

-1

的类

#mytd { 
    border-color: #fff !important; 
    OR 
    border-color: transparent !important;  
} 
+0

为什么它被降低了? – 2012-08-04 05:50:14

+0

+1 for!important,虽然将边框颜色设置为白色并不是移除它的最佳方法。 – fardjad 2012-08-04 05:57:22

+1

-1 for!important。这是完全没有必要的,因为它已经比'.main-tb td'更高的特异性了,重要的可以很容易地混淆其他不会被覆盖的样式。 – Nightfirecat 2012-08-04 06:26:38