[英]Using “div” as a css selector
I have a document structure that is similar across multiple pages. 我有一个跨多个页面相似的文档结构。
HTML: HTML:
<ul>
<li>
<div>
<img src=""/>
</div>
</li>
</ul>
Currently, there is a border around all img elements. 当前,所有img元素周围都有一个边框。 The client would like me to remove the border from around the image, because not all images are the same size and they want a uniform look with the borders.
客户希望我从图像周围删除边框,因为并非所有图像都具有相同的大小,并且它们希望边框具有统一的外观。 I noticed that there was a div wrapping the images, but the div does not have an id or class.
我注意到有一个div包装图像,但是div没有id或class。 How can I select this div in my css?
如何在CSS中选择此div?
Thanks 谢谢
For instance using 例如使用
ul>li>div {
border: 1px solid blue;
margin: 5px;
padding: 5px;
}
From my point of view, this is the best way to avoid HTML manipulation. 在我看来,这是避免HTML操纵的最佳方法。
However, if the structure ul>li>div is repeated elsewhere, this can be ambiguous. 但是,如果在其他地方重复结构ul> li> div,则可能会导致歧义。
给它一个类或ID ...然后为其创建CSS。
If there's no context anywhere , your recourse is to select it by the structure (as least specific as possible, if you like); 如果任何地方都没有上下文,则您的求助方法是根据结构进行选择(如果需要,请尽可能具体); for example,
例如,
li > div > img
But there usually is some kind of context. 但是通常存在某种上下文。 If your
<li>
had a class, for example, you could do: 例如,如果您的
<li>
有一个类,则可以执行以下操作:
li.contains-image > div > img
Or just 要不就
li.contains-image img
if there's no other image. 如果没有其他图像。 Does it or one of its parents have a sibling that identifies it somehow?
它或它的父母之一有以某种方式识别它的兄弟姐妹吗? Use one of the sibling combinators!
使用同级组合器之一!
li.before-the-one-that-contains-the-image + li img
In case you only have these set or cascade of element in the page you can use 如果您在页面中仅具有这些元素集或元素级联,则可以使用
<style>
ul li div {
border: 1px solid red;
}
</style>
Otherwise this will add a border on all element matching on the page. 否则,这将在页面上所有匹配的元素上添加边框。
Best is to use an Id or a class on the element. 最好是在元素上使用Id或类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.