覆盖 Web 部件中的 Sharepoint CSS 类名称

Question

我一直在寻找令人满意的答案，但失败了。我希望 StackOverflow 能为我带来帮助！

我正在使用 SharePoint Foundation 2010（我第一次真正尝试深入研究 SharePoint），以及（除其他外）自定义 Web 部件；该网站的母版页使用客户提供的 CSS 文件，我必须遵守该文件。我遇到的问题是，SharePoint 通过向 Web 部件 HTML 结构添加多个 SharePoint 特定 CSS 类，与客户端的样式发生冲突。经过一番挖掘，我发现 ms-WPBody 类及其各种元素选择器是罪魁祸首。

我可以将 !important 添加到客户端样式表中的所有内容，但这是禁止的。我可以在 Web 部件的子内容中插入一些非常混乱的样式，以尝试覆盖 SharePoint 样式，这是我最近一直在追求的过程，但它变得越来越混乱。或者，我可以尝试从 Web 部件中删除该类，这让我想到了我的问题：

如何删除或以其他方式覆盖插入到 SharePoint Web 部件的 HTML 结构中的 CSS 类名称？我对 SharePoint 的内部运作了解不够，不知道要挂钩什么来进行此更改，而且我的 google-fu 在这个主题上失败了。 ASP.NET Web 控件标记上的 CssClass 显然被忽略，可能是从 WebControl 继承的一些保留。

帮助我 StackOverflow！你是我唯一的希望！

编辑
我很抱歉之前没有说清楚，但我想声明我对 CSS 很了解，并且并不是在寻求样式方面的帮助。我真正想要的是如何删除 SharePoint 发出的 CSS 类。有人可以帮忙吗？我将删除 CSS 标签，因为这似乎会让人们感到困惑。这个问题实际上并不是关于 CSS，而是关于 SharePoint。

Answer 1

CSS 必须与它所应用的 html 相匹配 - 对于像 SharePoint（或标准的 asp.net webforms）生成的 html 那样，修改 css 通常要容易得多。如果添加重要不是一个选项，您通常可以使用更具体的选择器来执行某些操作 - 即定义为“table td”的样式将覆盖“td”的样式，尽管它们实际上选择所有相同的元素。您可以使用此方法撤消任何引起问题的共享点样式。

如果您确实想更改 sharepoint 在页面上放置的类，请使用 jquery - 尝试在服务器端执行该操作确实不是您想要在第一个 sharepoint 项目中进行的操作。

Answer 2

我不确定我是否遵循，但为什么不将您的 webpart 包装在容器 div 中，然后根据您的喜好设置样式：

<style type="text/css">
.ms-WPBody {
background-color:red;
}

#myCustomCss p
{
    background-color:Blue;
}

</style>
<div class=ms-WPBody>
<div id=MyCustomCSS>
<p>Hello world</p>
</div>
</div>

2007 年，我们不得不担心确保您的样式表按字母顺序命名在最后，以便正确应用。在你的 css 文件中添加 z 前缀，看看是否有帮助。

这是有关该问题的参考文章：
http:// singchan.com/2009/12/29/branding-sharepoint-2010-collaboration-sites-part-2-in-a-series/

Answer 3

下面是一些典型的 Web 部件 HTML：

<div style=""
    allowexport="false"
    allowdelete="false"
    class="ms-WPBody ms-wpContentDivSpace"
    width="100%"
    id="WebPartctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9"
    haspers="false"
    webpartid="d0420a1c-44b7-4009-81c9-2bbcf9b325e9">
    <div id="ctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9">
        Web Part Content goes here...
    </div>
</div>

窍门在于 Web 部件本身是内部 DIV（及其所有子项）。外部 DIV（具有 ms-WPBody 类的 DIV）是 WebPartZone。该控件是密封的，但您可以编写一个适配器来根据需要呈现 WebPartZone。大多数示例都是针对无表渲染的，您可以编写一个保留现有结构，但删除类。

对我来说，对所有这些进行编码，然后将其注册到 Web 应用程序的 App_Browsers 的 compat.browser 中似乎有些过分，所以我可能会选择 jQuery（但如果您使用适配器，我很乐意看到它）。

Answer 4

或者只是添加内容编辑器 Web 部件并覆盖 HTML 中的 CSS 样式元素：

<style type="text/css">
.ms-stylebox {
 border:o important;
}
</style>

-- 和平！

Answer 5

你是如何加载CSS文件的？如果您将其加载到母版页头部的一部分，或者仅通过设置 custom.css，您可以尝试将其加载到头部之外。这应该会导致它在 core.css 之后加载，因此允许您根据需要覆盖标准类。