从元素标记更改为类/标记标记时，CSS未加载

因此，我在处理项目时遇到了一些问题。在我设计的网站上，一切都运行良好，直到我注意到我需要从我的CSS上的img标记更改为类或id标记才能单独设置样式。试图切换时，它完全忽略了我写的CSS代码，它可以在img标签下正常工作。我究竟做错了什么？由于从元素标记更改为类/标记标记时，CSS未加载

HTML：

<div class="me_photo"> 
    <img src="../../Portfolio Icons/photo_of_me.jpg" alt="Photo of me"> 
</div>

CSS：

.me_photo { 
    width: auto; 
    height: 250px; 
    margin-left: 45px; 
    border: solid 5px; 
    border-color: white; 
    display: inline-block; 
    margin-right: 45px; 
    vertical-align: top; 
}

输出：

img

class

来源

2017-10-19 Ryan Mcguinn

是否将类选择器（。）中的css更改为id选择器（＃）？你之前的代码是什么？你是如何改变它的？你的问题不是很清楚。 – scrappedcola

我认为问题在于你的目标是错误的。您正在使用的选择器与容器div相匹配，而不是img。

试试这个：

.me_photo > img { 
 
    width: auto; 
 
    height: 250px; 
 
    margin-left: 45px; 
 
    border: solid 5px; 
 
    border-color: white; 
 
    display: inline-block; 
 
    margin-right: 45px; 
 
    vertical-align: top; 
 
}

<div class="me_photo"> 
 
    <img src="../../Portfolio Icons/photo_of_me.jpg" alt="Photo of me"> 
 
</div>

来源

2017-10-19 02:48:30 ncardeli

是的工作。非常感谢！对于其他人好奇，我完全是这样做的。然后为div本身制作了另一个CSS选择器。确定我没有任何多余的样式代码之间的div和.div img所有工作都很好！ –

乐于帮忙，欢迎来到Stack Overflow。如果此答案或任何其他人解决了您的问题，请将其标记为已接受。 – ncardeli

改变你的CSS代码=>.me_photo我{}

.me_photo img { 
 
    width: auto; 
 
    height: 250px; 
 
    margin-left: 45px; 
 
    border: solid 5px; 
 
    border-color: gray; 
 
    display: inline-block; 
 
    margin-right: 45px; 
 
    vertical-align: top; 
 
}

<div class="me_photo"> 
 
    <img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Photo of me"> 
 
</div>

来源

2017-10-19 02:52:35

从元素标记更改为类/标记标记时，CSS未加载

回答

相关问题