從元素標記更改爲類/標記標記時，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未加載

回答

相關問題