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

Question

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

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

Answer 1

使用>直接后代选择器，如下所示：

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

Answer 2

有几种方法可以做到这一点。如果这是您的标记（HTML）的范围，您可以在CSS中使用元素选择器（img和div是元素的示例）：

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;
}

Answer 3

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

选择器之间的空间基本上表示“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个直接的子选择器有点疯狂。

Answer 4

您应该能够嵌套列表：

#random1 {
//stuff
}

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

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