css - 用我自己的自定义 css 覆盖 Sharepoint 2010 css

Question

我有一个 Sharepoint 2010 内部网，我正在使用自己的 css 文件设计当前模板。我已将自定义 css 文件添加到样式库中，并在我的标记末尾的母版页中添加了这段代码：

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>" runat="server"/>

现在我总是需要在我的 css 类中添加 !important 标记，这些标记也用于默认的共享点 css 文件。我不想每次都这样做。是否有一些解决方案可以让我在默认的共享点 css 文件上覆盖我自己的自定义 css？

score 4 · Accepted Answer

在浏览器中由 SharePoint 呈现您的页面后，查看源代码。您的 CSS 页面很可能在开箱即用的样式表（如 corev4.css）之前列出。

要重新排列此排序，请尝试：

<SharePoint:CssRegistration 
    name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>" 
    after="corev4.css" 
    runat="server"/>

有关 After 属性的更多信息，请参阅：

score 0 · Accepted Answer

这听起来像是一个CSS 特异性问题。这篇文章对这个主题有很多有用的解释。

如果您在外部样式表中写入了两次相同的规则，则样式表中较低的规则更接近要设置样式的元素，则认为它更具体，因此将被应用。例如，在以下情况下，内边距将设置为 10 像素，而不是 5 像素。

#content h1 {
padding: 5px;
}

#content h1 {
padding: 10px;
}

要解决您当前的问题，可以像 Dipaks 建议的那样直接在页面中添加您的 css（因为这将优先于外部 css 文件），或者甚至更好，更简单地说，只需在对 css 文件的引用之后添加对您的 css 文件的引用Sharepoint css，在这种情况下，如果它们具有相同的特异性，则将应用您的 css。

2 回答 2