使用“ div”作為css選擇器

Question

我有一個跨多個頁面相似的文檔結構。

HTML：

<ul>
    <li>
        <div>
            <img src=""/>
        </div>
    </li>
</ul>

當前，所有img元素周圍都有一個邊框。 客戶希望我從圖像周圍刪除邊框，因為並非所有圖像都具有相同的大小，並且它們希望邊框具有統一的外觀。 我注意到有一個div包裝圖像，但是div沒有id或class。 如何在CSS中選擇此div？

謝謝

Answer 1

例如使用

ul>li>div {
    border: 1px solid blue;
    margin: 5px;
    padding: 5px;
}

在我看來，這是避免HTML操縱的最佳方法。

但是，如果在其他地方重復結構ul> li> div，則可能會導致歧義。

Answer 2

給它一個類或ID ...然后為其創建CSS。

Answer 3

如果任何地方都沒有上下文，則您的求助方法是根據結構進行選擇（如果需要，請盡可能具體）； 例如，

li > div > img

但是通常存在某種上下文。 例如，如果您的<li>有一個類，則可以執行以下操作：

li.contains-image > div > img

要不就

li.contains-image img

如果沒有其他圖像。 它或它的父母之一有以某種方式識別它的兄弟姐妹嗎？ 使用同級組合器之一！

li.before-the-one-that-contains-the-image + li img

Answer 4

如果您在頁面中僅具有這些元素集或元素級聯，則可以使用

<style>
ul li div {
    border: 1px solid red;
}
</style>

否則，這將在頁面上所有匹配的元素上添加邊框。

最好是在元素上使用Id或類。