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

Question

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

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

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

Answer 1

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

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

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

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

• CssRegistration.After Property
• SharePoint CSSRegistration or Link?
• What is new with the CssRegistration control in SharePoint 2010

Answer 2

这听起来像CSS specificity问题。 This article对该主题有很多有用的解释。

  

如果您已将相同的规则写入外部样式表   两次，比你的样式表中的较低规则更接近   要被设计的元素，它被认为是更具体的因此   将适用。   例如在以下情况中，填充将设置为10px，而不是5px。

#content h1 {
padding: 5px;
}

#content h1 {
padding: 10px;
}

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