widget CSS与网站CSS冲突

Question

我为我的用户制作了一个小部件，以便他们可以包含在他们的网站中。

在我的用户网站中托管的文件style.css中：

p {
    font-size: 0;
}

在我的小部件中 - widget.css：

#mydiv {
  font-size:12px; 
}

但是，当用户在他们的网站上包含我的CSS小部件时。我的CSS没有工作，一个工作是style.css。如何使我的widget.css始终在顶部工作？

---

我试过了！重要而且不起作用：

Answer 1

您可以在声明旁边使用！important;像这样：

#mydiv {
  font-size:12px !important; 
}

有些人会声称使用！important总是不好的做法，但事实并非如此。实际上，当制作插件或小部件将在其他人的网站上运行时，那么当它实际上是良好的实践时。看看这里：http://css-tricks.com/when-using-important-is-the-right-choice/

编辑：在问题中看到您的图片后，问题是ID ulcfrmcontainer似乎是指列表的容器，而不是容器中的实际li元素。试试这个：

#ulcfrmcontainer li{
      font-size:12px !important; 
    }

Answer 2

您有两个选择：

正确的方式：

1）确保您的元素路径完全正确。例如

.wrapper div p {}

2）确保您的css文件包含 AFTER 另一个

另一种方式（如果第一种方式不起作用）

使用！important。像这样：

font-size:12px!important;

修改

查看您的最新屏幕截图，看起来您正在将字体大小添加到ID为#ulcfrmcontainer而不是无序列表的div中。

可能想尝试：

#ulcfrmcontainer ul {
    font-size:12px;
}

Answer 3

p是现有的html balise，mydiv是一个id，可能选择你段落的父div。

CSS按照优先级应用规则。

这里有更多信息：

W3C wiki about selector priority

Tips and tricks about it

尝试使用这些信息解决您的问题，并且只有在没有其他解决方案的情况下才使用“！important”。 （Good article to determine if use !important is the right solution :)）

希望它能帮助您理解并解决您的问题：）

Answer 4

将您的小部件包含在div中，该div的ID不太可能在用户网站中使用，例如小部件 - 包装器 - div＆＃39;。或者，您可以通过在ID中包含小部件的一个或两个单词描述来更具描述性，例如＆＃39; partsearch-widget-wrapper＆＃39;。

<div id="widget-wrapper-div">
    <div>
        Widget code...
    </div>
</div>

然后在CSS中，您将使用#widget-wrapper-div

启动每个样式规则

#widget-wrapper-div div{
    font-size: 12pt;
}