SCSS - 从一组样式

时间:2016-06-20 09:27:45

标签: html css sass html-lists frontend

我用ul元素多次击中的问题(考虑到经常用于语义目的并且风格极佳的事实,例如顶部导航),试图为ul元素的文本使用设置一般样式是非常繁琐,以避免搞乱其他用途,反之亦然。通常,我通过在主页面内容包装器中包含一组专用样式来解决这个问题,例如:

#page-wrapper {
    ul, ol {
        padding-left:1.6em;
    }
}

但我遇到的问题是,在主页面包装器中,用于特定目的的ul元素(例如,通过选择等插件),应用了自己的一组纯化妆样式。有一个干净的方法来解决这个问题会很好。以前,就像编写原始CSS时一样,我必须再次明确地重新覆盖样式,例如:

.chosen-container ul {
    padding-left:0;
}

但是,尤其是对每个元素都这样做,这看起来非常混乱。我尝试了以下方法:

#page-wrapper {
    :not('.chosen-container') {
        ul, ol {
            padding-left:1.6em;
        }
        ........
    }
}

...但它具有中和所有ul元素样式的效果。

有没有人想出一个优雅的解决方案呢?谷歌搜索和搜索到目前为止没有结果。

2 个答案:

答案 0 :(得分:1)

一般来说我反过来写。将默认值设置为零,然后仅为非常特定的上下文添加项目符号和填充。

几乎所有插件都会将LI设置为:block和/或float:left。这应该大大减少你必须删除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中的所有样式,然后再添加一次,即您需要的样式。

答案 1 :(得分:0)

另一种解决方案可能是添加:not([class]),它将排除所有带有类的元素。

https://jsfiddle.net/kLLky4zL/

div:not([class]) {
  background: blue;
}