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

Question

这似乎是使用内容编辑器 Web 部件修改页面 Web 部件的 css 的简单修复。我的意思是下划线是通向下拉箭头的长线，其中包含修改、最小化、关闭等选项。我已经尝试过这段代码，但没有看到任何结果:

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

Answer 1

您需要阅读有关 CSS 选择器的内容。

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

通常，它们看起来像这样:

selector { declaration block }

您的问题出在选择器上，为了理解您的错误，我必须解释一些基本的选择器语法。

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

• 按标签名称定位
• 按 ID 定位
• 按类名定位

按标签名称定位

最简单的是通过标记名称定位。在这种情况下，使用两边都有空格的目标元素的标签名称:

p { /*...*/ }

现在全部<p>元素将受上述规则影响。

按 ID 定位

如果您定位的元素具有 id您可以通过 id 定位的属性以八 Angular 鱼为前缀 # :

#p { /*...*/ }

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

按类名定位

如果您定位的元素具有 class您可以通过在句点前加上句点 . 来按类名定位的属性:

.p { /*...*/ }

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

你的规则没有意义

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

ms-standardheader {text-decoration:none;}

在没有句号的情况下.或八爪鱼#这按标签名称定位。但是<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 中的规则.