无法访问源HTML时，如何修改含'Notes:'的孙子div背景色？

问题说明 #

无法访问页面源HTML，只能通过修改CSS更改包含Notes:文本区块的背景色。当前页面HTML结构如下：

<div role="region" tabindex="-1" aria-label="Message body" class="XbIp4 jmmB7 GNqVo yxtKT allowTextSelection">
    <div>
        <div>
            <div>
                <p>
                    Message returned to Inbox via Boomerang because there was no reply (<a href="https://outlook.office365.com/owa/?ItemID=XXXXX" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" data-safelink="true" data-linkindex="0">view this conversation</a>).
                </p>            
                <div style="color:#444444;font-size:1em;background-color:#FBF1B5;width:100%;padding:0.75em;">
                    <span style="font-weight:bold;">Notes: </span>
                    <br aria-hidden="true"><br aria-hidden="true">
                    <span style="font-style:italic;">Create Order Confirmation </span>
                </div>
            </div>
        </div>
    </div>
</div>

此前编写的CSS仅修改了“Message returned to Inbox...”文本区域的背景色，无法作用于目标区块：

.XbIp4.jmmB7.GNqVo.yxtKT.allowTextSelection > div:nth-child(1) {
  background-color:#AAAAAA;
}

正确CSS方案 #

目标区块自带内联style设置了背景色，内联样式优先级高于外部CSS，因此需要用!important强制覆盖，同时精准定位到该区块：

/* 定位到包含Notes的div，覆盖内联背景色 */
.XbIp4.jmmB7.GNqVo.yxtKT.allowTextSelection div div div > div:nth-child(2) {
  background-color: #AAAAAA !important;
}

关键说明 #

1. 之前的选择器> div:nth-child(1)定位的是最外层容器的第一个直接子div，而目标区块是<p>同级的第二个div子元素，层级更深。
2. 目标区块的内联background-color优先级高，必须添加!important才能生效。

内容的提问来源于stack exchange，提问作者Johnathan Johnston