CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何防止CSS继承?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在侧边栏中有一个使用嵌套列表(< ul>和< li>标签)的分层导航菜单。我使用的已经有列表项目样式的预制主题,但我想改变顶级项目的样式,但不适用于子项目。有没有简单的方法来应用样式到顶级列表项标签没有那些样式级联到其子列表项?我明白我可以显式地添加重写样式到子项,但我真的想避免重复所有的样式代码,如果有一个简单的方法,只是说“应用这些样式到这个类,不要级联他们到任何孩子元素“。
这里是我使用的html:
<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

所以css已经有“#sidebar ul”和“#sidebar ul li”的样式,但我想为“#sidebar .top-level-nav”添加额外的样式,而不是级联到它的子子孙。
有没有办法做到这一点简单,或者我需要重新安排所有的样式,所以在“#sidebar ul”的样式现在特定于某些类。

解决方法

由于还没有父选择器(或作为 Shaun Inman调用它们, qualified selectors),因此您必须将样式应用于子列表项以覆盖父列表项上的样式。

级联是层叠样式表的一个整体,因此是名称。

大佬总结

以上是大佬教程为你收集整理的如何防止CSS继承?全部内容,希望文章能够帮你解决如何防止CSS继承?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。