Question

我有4张图像，我想选择每张图像，以便更改每张图像的高度和宽度。

我尝试使用img：nth-of-type（3）选择第三张图像来更改大小，但是什么也没发生。我想将高度和宽度从嵌入式编码移动到外部CSS文件。

如何选择特定图片？

figure{
    padding:2em;
    margin-left: 3em;
    margin-bottom:2em;
}

img:nth-of-type(3) {
    height:50em;
    width:50em;
}

@media screen and (max-width: 600px)
{
    figure{
        margin-left:8em;
    }

}

    <div>
        <figure>
            <img src="images/ACE.png" height="150em">
            <figcaption data-title="Certification History" certification="yes">Certified Personal Trainer</figcaption>
        </figure>
  
        <figure>
            <img src="images/NSCA.png" height="150em" >
            <figcaption data-title="Certification History" certification="yes">CSCS - Certified Strength</figcaption><figcaption>and Conditioning Specialist</figcaption>
        </figure>
   
        <figure>
            <img src="images/USA.png" height="150em" width="125em">
            <figcaption data-title="Certification History" certification="yes">National E License</figcaption>
        </figure> 
  
        <figure>
            <img src="images/Functional-movement.jpg" height="150em" width="200em">
            <figcaption data-title="Certification History" certification="yes">Functional Movement Sceen Level 1</figcaption>
        </figure>
    </div>

Answer 1

第n-of-type（3）种方法可以使用，但是您需要以此为目标figure元素，然后定位其中的图像。原因是每个图形只有一个img-因此您永远不会获得想要的第三个img-因此您需要定位第三个图形元素，然后对其中包含的图像进行样式设置。

请注意，我已经修改了样式，以第三个图形为目标，然后以该图形为目标。我还在图像周围放置了红色边框，以表明它已被定位。

figure{
    padding:2em;
    margin-left: 3em;
    margin-bottom:2em;
}

figure:nth-of-type(3) img {
    height:50em;
    width:50em;
    border: solid 1px red
}

@media screen and (max-width: 600px)
{
    figure{
        margin-left:8em;
    }

}

<div>
        <figure>
            <img src="images/ACE.png" height="150em">
            <figcaption data-title="Certification History" certification="yes">Certified Personal Trainer</figcaption>
        </figure>
  
        <figure>
            <img src="images/NSCA.png" height="150em" >
            <figcaption data-title="Certification History" certification="yes">CSCS - Certified Strength</figcaption><figcaption>and Conditioning Specialist</figcaption>
        </figure>
   
        <figure>
            <img src="images/USA.png" height="150em" width="125em">
            <figcaption data-title="Certification History" certification="yes">National E License</figcaption>
        </figure> 
  
        <figure>
            <img src="images/Functional-movement.jpg" height="150em" width="200em">
            <figcaption data-title="Certification History" certification="yes">Functional Movement Sceen Level 1</figcaption>
        </figure>
    </div>

在CSS HTML CSS中选择某个项目

1 个答案: