Question

我有一个div（id =“tabContainer”），我在下面定义了一些css：

#tabContainer .ui-state-active { 
   background: transparent url(img/uiTabsArrow.png) no-repeat bottom center; 
}

在这个div中，我有一些按钮。 问题是，当我点击其中一个按钮时，tabContainer的css中定义的背景也会显示在我的按钮背景中。

我该如何避免这种情况？

似乎div的孩子继承了他们父母的背景......

感谢。

Answer 1

将标签名称添加到您的班级（假设它是DIV）：

#tabContainer div.ui-state-active { 
   background: transparent url(img/uiTabsArrow.png) no-repeat bottom center; 
}

Answer 2

“＆gt;”表示元素的直接子元素

#tabContainer .ui-state-active { 
   background: none;
}

#tabContainer>.ui-state-active { 
   background: transparent url(img/uiTabsArrow.png) no-repeat bottom center; 
}

因此，使用此选项可以在直接子元素和其他元素之间指定不同的样式

Answer 3

#tabContainer .ui-state-active input[type=button] { 
   background: none
}

Answer 4

它确实......您可以使用Firebug或IE开发人员工具来检查按钮，看看哪些样式正在应用于您的样式以及它们来自何处......但基本上，如果您将覆盖此样式：

#tabContainer .ui-state-active input {
    background: #000 (or your background that you want);
}

避免按钮上的CSS级联？

4 个答案: