使用“ 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或类。