我多次遇到 ul 元素的问题(考虑到 ul 元素经常用于语义目的并采用戏剧性的样式,例如顶部导航),尝试为 ul 元素的文本使用设置通用样式是非常巧妙地避免搞乱其他用途,反之亦然。通常,我通过在主页内容包装器中包含一组专用样式来解决这个问题,例如:
#page-wrapper {
ul, ol {
padding-left:1.6em;
}
}
但我遇到的问题是,在主页包装器中,用于特定目的的 ul 元素(例如,通过像 chosen 这样的插件)应用了它们自己的一组纯装饰样式。有一个干净的方法来解决这个问题会很好。以前,就像在编写原始 CSS 时一样,我必须再次显式地重新覆盖样式,例如:
.chosen-container ul {
padding-left:0;
}
但是这个,尤其是对每个元素都这样做,看起来很乱。我尝试了以下方法:
#page-wrapper {
:not('.chosen-container') {
ul, ol {
padding-left:1.6em;
}
........
}
}
...但它具有中和所有 ul 元素样式的效果。
有没有人想出一个优雅的解决方案?到目前为止,谷歌搜索和搜索都没有结果。
最佳答案
一般我都是反过来写的。将默认值设置为零,然后仅为非常特定的上下文添加元素符号和填充。
几乎所有插件都会将您的 LI 设置为显示: block 和/或 float :左。这应该会大大减少您必须在 css 中删除元素符号的次数。需要维护的代码较少,但确实需要您对 html 有一定的控制权,以便您可以在文本容器或需要元素符号的列表上添加选择器。
这是一个例子。 https://jsfiddle.net/L252LwL0/
ul { margin:0; padding:0; list-style-type:none; }
li { display:block; }
.textblock ul { padding: 0 40px; list-style-type:circle; }
.textblock li { padding: 10px 0; display:list-item; }
通常我也会改变子弹的颜色。只是因为它只是一点点品牌。 https://jsfiddle.net/L252LwL0/1/
明确地说,我建议您从所有 UL 中删除所有样式,然后只添加一次您需要的样式。
关于html - SCSS - 从一组样式中排除指定的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37918941/