如何访问css中元素内的元素?

时间:2014-07-07 16:49:53

标签: css element

在下面的代码中,我将如何解决“img”问题。 CSS中的元素?我很难让它上班。

<div id="random1">
<div id="random2">
<div id="random3">
<img src="images/image.jpg">
</div>
</div>
</div>

4 个答案:

答案 0 :(得分:2)

使用>直接后代选择器,如下所示:

#random3 > img{
  /* Css Rules */
}

答案 1 :(得分:1)

有几种方法可以做到这一点。如果这是您的标记(HTML)的范围,您可以在CSS中使用元素选择器(imgdiv是元素的示例):

img {
    width: 500px;
}

如果您的标记将在以后扩展,您可以使用类(针对多个实例)或ID(针对唯一实例)。我将向您展示课程,然后是ID。

HTML:

<img class="myImg" src="images/image.jpg">

CSS:

.myImg {
    width: 500px;
}

或者ID,HTML:

<img ID="myImg" src="images/image.jpg">

CSS:

#myImg {
    width: 500px;
}

如果要选择img作为div #random3的子项,可以使用直接后代选择器:

#random3 > img {
    width: 500px;
}

答案 2 :(得分:1)

在这里扩展一些理论......选择器越具体,它就越需要优先级。除此之外还有更多,但这是一般的要点。

选择器之间的空间基本上表示“child @ any depth”,而大于符号(&gt;)表示“仅限直接孩子”。即时子选择器比任何深度选择器更具体。

其中任何一个都可以在您的示例中设置图像样式:

#random1 #random2 #random3 img { blah }
#random1 img { blah }
#random2 img { blah }
#random3 img { blah }

这样可能(因为img是#random3的直接孩子):

#random3 > img { blah }

但是这会失败,因为img不是立即在random2里面,它在random3里面随机3:

#random2 > img { blah }

所以你可以用#random1 img开始懒惰。如果没有坚持,#random3&gt; img如建议的那样。如果碰巧也失败了,那就变得越来越具体了。例如,每一行都越来越具体

#random3 > img {}
#random2 > #random3 img {}
#random1 > #random2 > #random3 > img {}

如果最后一个不起作用,你真的需要看一些古怪的CSS,因为3个直接的子选择器有点疯狂。

答案 3 :(得分:0)

您应该能够嵌套列表:

#random1 {
//stuff
}

#random3 img{
//other stuff for the image
}

等等。 这将特别为random3本地化img,而不会影响其他img标签。