如何从Web部件标题中删除下划线？

Question

这似乎可以通过内容编辑器Web部件轻松修复页面Web部件的CSS。我的意思是下划线是指向修改，最小化，关闭等选项的下拉箭头的长行。我尝试过这段代码没有明显的结果：

<style>
ms-standardheader {text-decoration:none;}
</style>

Answer 1

您需要了解CSS选择器。

CSS规则由两部分组成：选择器和声明块。

一般来说，它们看起来像这样：

selector { declaration block }

您的问题在于选择器，要了解您的错误，我将不得不解释一些基本的选择器语法。

在选择器中，您可以使用各种结构“定位”带有样式的HTML元素：

• 按标签名称定位
• 目标身份
• 按班级名称定位

按标签名称定位

最简单的是按标记名称定位。在这种情况下，请使用两侧带有空格的元素的标记名称：

p { /*...*/ }

现在所有<p>元素都会受到上述规则的影响。

以Id为目标

如果您定位的元素具有id属性，则可以id为{x 1}}加上前缀#：

#p { /*...*/ }

现在带有id="p"的元素（无论标记名称是什么）都会受到影响。

按类名目标

如果您定位的元素具有class属性，则可以通过为句点.加前缀来按类名进行定位：

.p { /*...*/ }

现在，class="p"的元素（无论标记名称是什么）都会受到影响。请注意，元素可以有多个类名，用空格分隔，因此class="p x"也会受到影响。

你的规则没有意义

所以你的规则首先不起作用，因为它没有意义;）

ms-standardheader {text-decoration:none;}

如果没有句号.或octothorpe #，则按标签名称定位。但是<ms-standardheader>元素不存在，因此它没有效果。

您的规则也是错误的规则

你也试图设计错误元素的样式，所以让我们看一下样式的Web部件。我假设您正在尝试删除我用红色矩形指出的行：

此行实际上不是下划线，而是<td>元素的边框底部。创建此下划线的规则是_layouts/1033/styles/core.css的第2664行（ish），看起来有点像......

.ms-WPHeader TD{
    border-bottom:1px solid #4e7cb7;
    border-collapse:collapse;
}

在另一个CSS文件中尝试此操作：

html body .ms-WPHeader td {
    border-bottom:none;
}

添加html body可增加规则的specificity，因此优先于core.css中的规则。

Answer 2

ms-standardheader是一个类还是一个id？如果是类，请使用.ms-standardheader。如果是id，请使用#ms-standardheader。您还应该在样式标记中添加type =“text / css”。