使用“div”作为css选择器

时间:2013-09-25 14:50:33

标签: html css

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

HTML:

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

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

由于

4 个答案:

答案 0 :(得分:7)

例如使用

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

从我的角度来看,这是避免HTML操作的最佳方法。

然而,如果结构ul> li> div在别处重复,则这可能是不明确的。

答案 1 :(得分:1)

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

答案 2 :(得分:1)

如果没有上下文 ,你的追索权就是按结构选择(如果你愿意的话,尽可能不具体);例如,

li > div > img

但通常某种上下文。例如,如果您的<li>有一个班级,您可以这样做:

li.contains-image > div > img

或者只是

li.contains-image img

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

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

答案 3 :(得分:0)

如果您在页面中只有这些元素或级联元素,则可以使用

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

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

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