Question

我已经创建了一个人们可以在他们的网站上使用的小部件，它工作得很好，我遇到的问题是我的一些css正被某些网站上以前定义的类修改过，这就是我所拥有的： / p>

.widget ul { margin:0; }
.widget li { margin:0; }

这是好的，直到有人将窗口小部件放在一个容器中，该容器已经具有所有ul元素的不同边距，如下所示：

.container ul { margin:10px; }

这个ul风格影响了我的小部件。有没有办法不允许那些先前定义的样式影响我的？

Answer 1

在CSS中使用更具体的选择器，并考虑使用ID。这将确保您的选择器更具体地定位到窗口小部件中的元素，并覆盖更多“模糊”的元素。人物网站的选择者。

#mywidget .widget > ul {margin:0;}

您可能希望确保<ul>等元素也有自己的类，这样您就可以确保为它们设置特定的样式规则，而不是让它们回退到任何人拥有自己的CSS。

#mywidget ul.mywidget-list {margin:0;}

也许考虑使用！important，但第一种解决方案可能更可取，以防人们实际上试图覆盖你的风格。

.widget ul {margin:0 !important;}

最后，我假设您实际上并没有这样做，但是不要使用该人可能用于自己标记的模糊类名，或者可能与其他第三方小部件和系统冲突的类名。使用可能仅由您的小部件使用的特定类名和ID。

以上所有内容只是一个示例，因为很难为您的特定标记和您在其他人的网站中使用小部件提供准确的解决方案。我会尝试并熟悉样式的继承方式以及不同的方法将如何影响样式的级联。

Answer 2

理想情况下，每个代码块都应该是自包含的。这是人们使用OOCSS和BEM试图解决的问题。

而不是.widget ul，你可以编写.widget - list

与容器相同。你可以写.container - list

以下是一些值得细读的文章：

Answer 3

这是不好的做法，但您可以使用!important。

.widget ul { margin:0 !important; }
.widget li { margin:0 !important; }