Html 自定义CSS和Sharepoint online

我一直在研究支持和不支持的自定义和自定义CSS方法，这些方法可以在sharepoint online中用于品牌推广，但是由于microsoft的混乱和含糊不清的文章，很难得到澄清

我正在研究通过发布站点中的替代CSS应用自定义CSS，并研究了本文：

在这篇文章中，“一般原则”下有一点是含糊不清的，没有详细说明

一般原则

在SharePoint Online环境中为门户网站建立品牌时，应考虑以下一般原则：

SharePoint在线服务正在不断改进。提供给服务的更新可能会影响开箱即用页面的DOM结构以及开箱即用文件（例如母版页）的内容。开发人员必须记住这一点，并且不应该依赖于不受支持的定制方法（例如，页面DOM结构中特定元素的位置）

在上面的一点中，它提到：开发人员必须记住这一点，并且不应该依赖于不受支持的定制方法（例如，页面DOM结构中特定元素的位置）这到底意味着什么？这是否适用于仅在少数web部件页面上通过备用CSS URL应用的自定义CSS，而CSS仅适用于其中的web部件区域和OOTB web部件

---

有人能澄清一下吗？我需要专家的意见。上述声明是否仅适用于Office 365 bar DOM及其CSS或OOTB web部件页的DOM？如果是的话，那怎么办？有人能举个例子吗？我编写了自定义CSS并通过备用CSS url应用，它主要改变web部件区域的外观，以及其中的OOTB列表视图web部件（如颜色、宽度、较大字体等）

我认为这与SharePoint无关，甚至与外部CSS样式表的使用无关。让我们把语言分解一下：

“开发人员[…]不应依赖于特定元素在页面DOM结构中的[…]位置”

我相信微软指的是使用CSS（甚至JavaScript）来基于DOM结构而不是元素ID或类来定位元素。考虑<代码> p+div < /代码>（针对任何<代码> <代码>元素，该元素立即进行<代码> 元素。

在这种情况下，它可以：

p+div{
颜色：红色；
}

文本

更多文本

我认为这与SharePoint无关，甚至与外部CSS样式表的使用无关。让我们把语言分解一下：

“开发人员[…]不应依赖于特定元素在页面DOM结构中的[…]位置”

我相信微软指的是使用CSS（甚至JavaScript）来基于DOM结构而不是元素ID或类来定位元素。考虑<代码> p+div < /代码>（针对任何<代码> <代码>元素，该元素立即进行<代码> 元素。

在这种情况下，它可以：

p+div{
颜色：红色；
}

文本

更多文本

这是否被视为DOM中的定位：.tableCol-75.tableCol-33 thead？在大多数情况下，我需要减少类型选择器的范围。我们可以像我提到的那样缩小类型选择器的范围吗？我会显示我应用的生成的DOM和CSS，但我不确定如何复制生成的DOM并显示在这里您的第一点值得商榷

tableCol-33

必须是

tableCol-75

的子项。这意味着，如果你让它成为兄弟姐妹，它就不会起作用。但这并不是说这是一个糟糕的选择！如果您有两个类

tableCol-75

（一个是

tableCol-33

的子类，另一个是兄弟类），并且只想针对该子类，该怎么办？那么你就有了完美的选择器。您可以使用

表示直接子级。要将两者都作为目标，只需直接使用

tableCol-33

。要在此处输入代码，只需在编辑问题时单击代码图标（图片旁边）：）是的，tableCol-33是tableCol-75的子项，我所做的是找到呈现HTML的类，然后覆盖这些类的CSS以提供自定义外观。仅供参考，我不会在这里生成任何HTML。我可以在开发者工具栏中看到DOM和相关样式，但不确定如何在这里复制DOM和相关样式；如果您使用的是生成自己的HTML的CMS或后端脚本，最好只使用覆盖它们的代码。要将HTML从您的站点发布到StackOverflow，您可以使用

CTRL

+

U

查看源代码，并手动将相关段复制粘贴到一个页面。虽然您正在以正确的方式进行操作，并且似乎已经解决了您的问题。这是否被视为DOM中的定位：.tableCol-75.tableCol-33 thead？在大多数情况下，我需要减少类型选择器的范围。我们可以像我提到的那样缩小类型选择器的范围吗？我会显示我应用的生成的DOM和CSS，但我不确定如何复制生成的DOM并显示在这里您的第一点值得商榷

tableCol-33

必须是

tableCol-75

的子项。这意味着，如果你让它成为兄弟姐妹，它就不会起作用。但这并不是说这是一个糟糕的选择！如果您有两个类

tableCol-75

（一个是

tableCol-33

的子类，另一个是兄弟类），并且只想针对该子类，该怎么办？那么你就有了完美的选择器。您可以使用

表示直接子级。要将两者都作为目标，只需直接使用

tableCol-33

。要在此处输入代码，只需在编辑问题时单击代码图标（图片旁边）：）是的，tableCol-33是tableCol-75的子项，我所做的是找到呈现HTML的类，然后