如何将父样式覆盖到元素

发布于 12-06 14:39 字数 697 浏览 0 评论 0 原文

<div class="jqueryslidemenu">
<ul>
<li  class="menuitem">TEST1</li>
<li  class="navOFFTDDisabled" id="TEST2">TEST2</li>
<li  class="navOFFTDDisabled" id="TEST3">TEST3</li>
<li  class="navOFFTDDisabled" id="TEST4">TEST4</li>
</ul>
</div>


CSS FILE 
.jqueryslidemenu ul li {
display: block;
background: #FFCC00; 
color: white;
padding: 4px 12px 6px 5px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
font-weight: bold;
cursor: hand;
}

.navOFFTDDisabled{
//Aplly Style 
}

我无法将 class="navOFFTDDisabled" 应用于每个 (li) 项目,因为“jqueryslidemenu”正在覆盖 navOFFTDDisabled 样式。我如何应用这两种样式

<div class="jqueryslidemenu">
<ul>
<li  class="menuitem">TEST1</li>
<li  class="navOFFTDDisabled" id="TEST2">TEST2</li>
<li  class="navOFFTDDisabled" id="TEST3">TEST3</li>
<li  class="navOFFTDDisabled" id="TEST4">TEST4</li>
</ul>
</div>


CSS FILE 
.jqueryslidemenu ul li {
display: block;
background: #FFCC00; 
color: white;
padding: 4px 12px 6px 5px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
font-weight: bold;
cursor: hand;
}

.navOFFTDDisabled{
//Aplly Style 
}

I cannot Apply class="navOFFTDDisabled" to each (li) Items because the "jqueryslidemenu" is overwriting the navOFFTDDisabled style .How can i apply both styles

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

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

发布评论

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

评论(2

不离久伴 2024-12-13 14:39:21

使其成为更好的匹配,

.jqueryslidemenu ul li.navOFFTDDisabled{
//I'm more important neener neener.
}

只是为了更有用,您实际上可以计算哪个选择器优先,如 规范

Make it a better match,

.jqueryslidemenu ul li.navOFFTDDisabled{
//I'm more important neener neener.
}

Just to be more useful, you can actually calculate which selector with take precedence as described in the specification

小巷里的女流氓 2024-12-13 14:39:21

您可以通过三种方式覆盖选择器:

  1. 选择器的顺序:样式表中更靠下的选择器会覆盖更靠上的选择器

  2. 选择器规范:http://www.w3.org/TR/CSS2/cascade.html 和 "="">http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/

    基本上这取决于您的选择器中有多少个标签、类和 ID。类比标签添加更多权重,id 比类添加更多权重

  3. 您能做的最后一件事就是向您的样式规则添加 !important,它会覆盖任何其他选择器。为了正确起见,您仍然可以拥有比选择器特异性规则再次发挥作用的更多的 !important 规则。例如 .klass{color:red !important}

You have three possibilities to override a selector:

  1. order of the selector: a selector further down in your stylesheet overrides a selector that is further to the top

  2. selector specifity: http://www.w3.org/TR/CSS2/cascade.html and http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/

    basically it depends on how many tags, classes and ids you have in your selector. classes add more weight than tags and ids add more weight than classes

  3. the last thing you can do is to add an !importantto your style rule, which overrides any other selector. To be correct you can still have more !importantrules, than the selector specifity rule comes into play again. E.g. .klass{color:red !important}

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