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以下的所有内容都是自动生成的，因此除了searchImg之外，ID可能会有所不同。我想通过searchImg更改nbsareadirectorysearch的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使用祖先获取元素

2 个答案: