在线自定义CSS和Sharepoint

Question

我正在研究可用于共享点在线品牌化的受支持和不受支持的自定义和自定义CSS方法，但是由于Microsoft令人困惑和模糊的文章，很难弄清这一点。

我正在研究如何通过发布站点中的备用CSS应用自定义CSS并研究本文：

https://msdn.microsoft.com/zh-cn/pnp_articles/portal-branding

本文在“一般原则”下有一个要点，该要点含糊不清/含糊不清，没有详细说明。

一般原则

在SharePoint Online环境中对门户进行品牌标记时，应考虑以下一般原则：

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

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

有人可以澄清吗？ 我需要专家意见。 以上声明仅适用于Office 365栏DOM及其OOTB Web部件页面的CSS或DOM吗？ 如果是这样，那又如何？ 有人可以提供例子吗？ 我已经编写了自定义CSS并通过备用CSS URL进行了应用，它主要更改了Web部件区域和其中的OOTB列表视图Web部件的外观（例如颜色，宽度，更大的字体等）

Answer 1

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

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

我相信Microsoft指的是使用CSS（甚至JavaScript）基于DOM结构而不是元素ID或类来定位元素。 考虑p + div （它以立即执行<p>元素的任何<div>元素为目标）。

在这种情况下，它可以工作：

 p + div { color: red; } 

 <p>Text</p> <div id="div">More text</div> 

在这种情况下，它不会：

 p + div { color: red; } 

 <p>Text</p> <a>Link</a> <div id="div">More text</div> 

我所做的就是在DOM中移动#div元素的位置，突然我的选择器不再起作用。 我相信这是微软所暗示的危险。

因此， 直接定位所需元素（使用#来选择ID）会“更安全”：

 #div { color: red; } 

 <p>Text</p> <a>Link</a> <div id="div">More text</div> 

显然，将是你会不会有一个ID为元素的情况下，虽然可以依靠类选择 ， 属性选择 ，甚至类型选择 。 有针对性地工作，并适应，以尽可能避免出现上下文。

希望这可以帮助！ :)