Html css覆盖小部件外部的所有以前的样式

我已经创建了一个小部件，人们可以在他们的网站上使用，它工作得很好。我的问题是，我的一些css正在被一些网站上先前定义的类修改，下面是我的：

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

除非有人将小部件放在一个容器中，该容器已经为所有ul元素提供了不同的余量，否则这是可以接受的，如下所示：

.container ul { margin:10px; }

这个ul样式影响了我的widget上的样式。

---

有没有办法不让那些以前定义的样式影响我的样式？

这是一种不好的做法，但你可以使用

！重要信息

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

---

在CSS中使用更具体的选择器，并且可能考虑使用ID。这将确保选择器更具体地针对小部件中的元素，并覆盖该网站的“模糊”选择器。

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

您可能希望确保像

这样的元素也有自己的类，这样您就可以确保为它们提供特定的样式规则，而不是让它们返回到用户在自己的CSS中拥有的任何样式

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

请考虑使用！这也很重要，但第一种解决方案可能更可取，以防人们试图推翻你的风格

.widget ul {margin:0 !important;}

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

---

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

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

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

容器也是一样。您可以编写.container--list

这里有一些文章可以阅读：

---

为了绝对肯定，给你的小部件一个唯一的ID，而不仅仅是一个类；IDs在（特异性）方面胜过类别[ID不是解决问题的方法。只要你有命名类的能力，你就应该给每个小部件/模块一个唯一的类，以降低特殊性级别。增加选择器的特殊性将导致今后的主要问题。你想让你的特殊性尽可能低。@jbenjohnson是的，我同意，我是一个固执的f或者说是非常有效和最少的CSS，但我为OP提供了一些建议，让他们了解样式的级联效应，而他们可能没有考虑到。当您有意尝试生成一个不会被覆盖的小部件时，其中一些规则也不必以同样的方式应用。您不能只是提供适用于所有场景的总括声明。