可以对CSS文件进行排序,以便它们仅适用于给定元素的后代?

前端之家收集整理的这篇文章主要介绍了可以对CSS文件进行排序,以便它们仅适用于给定元素的后代?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
给定一个css文件,是否有一种方法来整理文件,以便它只适用于给定元素中的元素:

例如给定:

<div id="container">
   <span class="some_element"/>
   <!-- etc -->
</div>

有没有办法覆盖整个css文件来应用到“容器”中的所有元素,而不需要在每个单个css子句前加上#container?

解决方法

恐怕不是.一些CSS预处理器允许您编写实现相同内容代码.

例如. LESS实现嵌套规则:

/* This LESS code... */

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* ...produces this CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Andy提到SASS,做同样的事情.

原文链接:https://www.f2er.com/css/214702.html

猜你在找的CSS相关文章