为什么我的 CSS 只在放入 div 时影响 IMG?

Question

我刚刚了解了类，当在图像上使用类将其居中、更改大小等时，除非我将其放在div 中，否则它不起作用。

我想知道为什么会这样！我已经将.css与索引.html的头部<link rel="stylesheet" type="text/css" href="styles/main.css">联系起来。

<!--<div class="plskiyo">-->
<img class="plskiyo.img" src="images/spicy-kiyo.jpg" alt="image has broke">
<!--</div>-->
.plskiyo img
{
width: 30%;
display: block;
margin-right: auto;
margin-left: auto;
}

Answer 1

CSS中的.plskiyo img行称为选择器;它是用于将 DOM 元素与您定义的样式相关联的内容。

只需.plskiyo就会选择具有.plskiyo类的所有元素。.plskiyo img选择具有.plskiyo类的任何标记中的所有img标记。

关于CSS选择器有很多需要了解的内容。从这里开始阅读： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Answer 2

只需从 html 中的class="plskiyo.img"中删除.img即可。

img.plskiyo {
width: 30%;
display: block;
margin-right: auto;
margin-left: auto;
}

<img class="plskiyo" src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all" alt="image has broke">

您还可以将 css 更改为仅img { ... }并从 img-tag 中删除class="plskiyo"，如果您整个页面上只有一个图像(或所有图像的样式相同(。或者你可以将css类命名为.plskiyo { ... }它仍然可以工作。具有img.plskiyo可以保证您的类仅适用于图像。这些只是一些解释，因此您可以了解其工作原理。希望这有帮助！

Answer 3

只需使用 css

<img src="images/spicy-kiyo.jpg" alt="image has broke">
.img
{
width: 30%;
display: block;
margin-right: auto;
margin-left: auto;
}