我如何调整此？ [重复]

Question

此问题已经在这里有了答案：

Why doesn't nth-of-type/nth-child work on nested elements? （1个答案）

[3天前关闭。

我无法使用CSS调整第二张img的大小。我可以使用内联样式规则调整其大小，但不允许使用它们。我可以使用CSS调整此图片上方的img大小。我知道如何使它起作用，但是我不知道为什么这种方法不起作用。这对我来说没有任何意义。我可以在这里帮忙吗？谢谢。

HTML

<div id="social-block">
<a href="">
   <img src="media/f.webp" alt="Facebook brand logo">
</a>
<a href="https://www.youtube.com/watch?v=UByhxXvmX8o">
   <img src="media/y.png" alt="YouTube brand logo">
</a>
</div>

CSS

#left {
    width: 15%;
    position: absolute;
    height: 100%;
    background-color: #EFFFFF;
    border-top: 10px solid orange;
    border-bottom: 10px solid orange;
}

#social-block img:nth-of-type(1){
    width: 20px;
}

#social-block img:nth-of-type(2) {
    width: 75px;
}

Answer 1

您编写的HTML代码的问题为了使用您编写的CSS样式，只需将secand img赋予ID left，因此HTML代码应类似于

<div id="social-block">
   <a href=""><img src="media/f.webp" alt="Facebook brand logo"></a>
   <a href="https://www.youtube.com/watch?v=UByhxXvmX8o"><img src="media/y.png" 
        alt="YouTube brand logo" id="left"></a>
</div>

并且还要确保在<style>标记内或CSS文件中添加CSS代码

Answer 2

当您使用nth-of-type时，您的标签必须是兄弟（所有标签必须处于同一级别，并且标签内部在），将您的代码替换为以下内容：

#left {
    width: 15%;
    position: absolute;
    height: 100%;
    background-color: #EFFFFF;
    border-top: 10px solid orange;
    border-bottom: 10px solid orange;
}

#social-block a:nth-of-type(1) img{
    width: 20px;
}

#social-block a:nth-of-type(2) img {
    width: 75px;
}

Answer 3

您能尝试这个吗？>

<div id="social-block">
    <a href=""><img id="fb" src="media/f.webp" alt="Facebook brand logo"></a>
    <a href="https://www.youtube.com/watch?v=UByhxXvmX8o"><img id="yt" src="media/y.png" alt="YouTube brand logo"></a>
</div>
使用此CSS

#fb{
    width: 20px;
}
#yt{
    width: 75px;
}
编辑：这可能有效

#social-block>a>img:nth-of-type(1){
    width: 20px;
}

#social-block>a>img:nth-of-type(2) {
    width: 75px;
}
希望有帮助

Answer 4

您错误地使用了:nth-of-type，因为它们都不属于:nth-of-type(1)类别，因为它们不是全局搜索的，而是根据其父母搜索的。