我有一个跨多个页面的文档结构。
HTML:
<ul>
<li>
<div>
<img src=""/>
</div>
</li>
</ul>
目前,所有img元素都有一个边框。客户希望我从图像周围移除边框,因为并非所有图像都具有相同的尺寸,并且他们希望边框具有统一的外观。我注意到有一个div包装图像,但div没有id或类。如何在我的CSS中选择这个div?
由于
答案 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或类。