css 使用祖先获取元素

Question

我有这个html

<div id="NBSAreaDirectorySearch">
    <div class="ms-webpart-chrome ms-webpart-chrome-fullWidth ">
        <div class="ms-WPBody " id="WebPartWPQ2" allowdelete="false" onlyformepart="true" width="100%" haspers="true" webpartid="00000000-0000-0000-0000-000000000000">
            <div style="display: none;"></div>
            <div id="ctl00_PlaceHolderMain_g_2ea1c174_49f1_467b_89ff_d32d6c945151_csr" componentid="ctl00_PlaceHolderMain_g_2ea1c174_49f1_467b_89ff_d32d6c945151_csr">
                <div class="ms-floatLeft" id="SearchBox" name="Control">
                    <div class="ms-srch-sbLarge ms-srch-sb-border nbs-landingAreaDirectory-srchBoxDiv" id="ctl00_PlaceHolderMain_g_2ea1c174_49f1_467b_89ff_d32d6c945151_csr_sboxdiv">
                        <input title="Search within the Branch Directory">
                        <a title="Search">
                            <img id="searchImg">
                        </a>
                        <div>
                            <div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="SearchOptions">
                </div>
            </div </div>
            <div class="ms-clear">
            </div>
        </div>
    </div>
</div>

NBSAreaDirectorySearch 以下的所有内容都是自动生成的，因此 ID 可能不同，searchImg 除外。我想通过 nbsareadirectorysearch 更改 searchImg 的 css，因为页面上还有另一个 searchImg。 SharePoint 站点，因此母版页中有一个 searchimg，页面布局中有一个。不幸的是，我无法更改 ID，因为它是自动生成的

Answer 1

假设结构始终相同，唯一改变的是 ID。

#NBSAreaDirectorySearch a[title=Search] img  {
yourstyleshere;
}

Answer 2

您应该可以使用

定位特定图像

#NBSAreaDirectorySearch #searchImg {
    border: red 1px solid;
}

Here's a fiddle 使用您发布的内容。我使用了占位符图像来突出显示应用的红色边框样式。

css 使用祖先获取元素

css getting an element using a ancestor

css

sharepoint