使用“div”作为 CSS 选择器答案

【问题标题】：Using "div" as a css selector使用“div”作为 CSS 选择器
【发布时间】：2013-09-25 23:00:43
【问题描述】：

我有一个跨多个页面的文档结构相似。

HTML：

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

目前，所有 img 元素都有一个边框。客户希望我从图像周围移除边框，因为并非所有图像的大小都相同，并且他们希望边框具有统一的外观。我注意到有一个 div 包装图像，但 div 没有 id 或类。如何在我的 css 中选择这个 div？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

例如使用

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

在我看来，这是避免 HTML 操作的最佳方式。

但是，如果结构 ul>li>div 在其他地方重复，则可能会产生歧义。

【讨论】：

【解决方案2】：

给它一个类或ID...然后为它制作CSS。

【讨论】：

【解决方案3】：

如果没有上下文任何地方，你的办法是通过结构来选择它（尽可能不具体，如果你喜欢的话）；例如，

li > div > img

但通常是某种上下文。例如，如果您的 <li> 有一个课程，您可以这样做：

li.contains-image > div > img

或者只是

li.contains-image img

如果没有其他图像。它或它的父母之一是否有一个以某种方式识别它的兄弟姐妹？使用其中一个兄弟组合器！

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

【讨论】：

【解决方案4】：

如果页面中只有这些元素的集合或级联，则可以使用

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

否则，这将在页面上所有匹配的元素上添加边框。

最好在元素上使用 Id 或类。

【讨论】：