Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/83.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html SCSS-从一组样式中排除指定的容器_Html_Css_Sass_Html Lists_Frontend - Fatal编程技术网

Html SCSS-从一组样式中排除指定的容器

Html SCSS-从一组样式中排除指定的容器,html,css,sass,html-lists,frontend,Html,Css,Sass,Html Lists,Frontend,我在ul元素方面遇到过很多次的问题(考虑到ul元素经常被用于语义目的,并且样式设计得非常引人注目,例如顶部导航),试图为ul元素的文本使用设置通用样式是非常巧妙的,以避免混淆其他用途,反之亦然。通常,我通过在主页内容包装中包含一组专用样式来解决此问题,例如: #page-wrapper { ul, ol { padding-left:1.6em; } } 但我遇到的问题是,在主页包装器中,用于特定目的的ul元素(例如,由select之类的插件使用)应用了它们自己

我在ul元素方面遇到过很多次的问题(考虑到ul元素经常被用于语义目的,并且样式设计得非常引人注目,例如顶部导航),试图为ul元素的文本使用设置通用样式是非常巧妙的,以避免混淆其他用途,反之亦然。通常,我通过在主页内容包装中包含一组专用样式来解决此问题,例如:

#page-wrapper {
    ul, ol {
        padding-left:1.6em;
    }
}
但我遇到的问题是,在主页包装器中,用于特定目的的ul元素(例如,由select之类的插件使用)应用了它们自己的一套纯粹的外观样式。如果能有一个干净的方法来解决这个问题就好了。以前,与编写原始CSS时一样,我必须再次显式地重新覆盖样式,如:

.chosen-container ul {
    padding-left:0;
}
但这一点,尤其是对每一个元素都这样做,看起来非常混乱。我尝试了以下方法:

#page-wrapper {
    :not('.chosen-container') {
        ul, ol {
            padding-left:1.6em;
        }
        ........
    }
}
。。。但它有中和所有ul元素风格的效果


有没有人想出一个优雅的解决方案?到目前为止,在这里搜索和搜索都是徒劳的。

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

几乎所有插件都会将您的LI设置为显示:block和/或float:left。这将大大减少在css中删除项目符号的次数。要维护的代码少了一点,但确实需要对html进行一些控制,以便可以在文本容器或需要项目符号的列表上添加选择器

这里有一个例子

通常我也会改变子弹的颜色。只是因为这只是一个小小的品牌


为了清楚起见,我建议您从所有ul中删除所有样式,然后只添加一次您需要的样式。

另一个解决方案是添加
:而不是([class])
,这将排除一个类中的所有元素


这个提示与你的类似:好吧,基于这个问题的解决方案,我尝试了
:not('.selected container')>{ul{…}}
,但没有效果。只需删除所有ul样式,即使是在所选容器之外的样式(尽管我不知道为什么)。你能编译你的代码吗?我得到一个错误的报价。我必须把
:not(.selected container)
看这个例子:@blonfu奇怪的是,我可以编译带引号和不带引号的代码。JSFIDLE仍然删除了所有原始的UL样式。。。
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;  }
div:not([class]) {
  background: blue;
}