在不同的CSS引用中的多個類風格

從我解釋別人的編碼開始，這是電子郵件編碼。在不同的CSS引用中的多個類風格

在下面的代碼，表單元格所引用.full和圖像碼參考.imageblock和.icon，以及有在我的CSS特定.full IMG風格。我的問題是，每種風格都略有不同，所以我怎麼知道要編輯哪一種風格。另外，在CSS中有兩個.icon引用。爲什麼這些分開而不在一起？

這裏是編碼：

<td width="25%" dir="ltr" class="full"> 
    <img src="https://okcu-uga.edu.185r.net/graphics/okcu-uga/JSF201920/email/icon-badge.gif" 
     width="100" 
     height="100" 
     class="imageBlock icon" /> 
</td>

這裏是CSS引用：

.full { display: block; width: 100%; !important} 
.full img {display:block; !important; width:30% !important; margin:0 auto !important;} 
.imageBlock {display:block !important; height:auto !important; width:100% !important;} 
.icon {padding-left:0 !important;} 
.icon {padding-left:25px;}

來源

2017-08-31 savvysherri

*用一分鐘的測試編輯了imageBlock標記 – savvysherri

編輯.imageblock因爲該人已迫使屬性的選擇符。 Here is more info about CSS Specificity

並且有兩個.icon規則，因爲之前的開發者不知道他在做什麼：p，刪除第二個。

來源

2017-08-31 16:06:36 nodws

，你可以看到b在imageblock中是小寫的，在html中是大寫的，所以強制propreties對我來說只是很多調試，因爲「我不能得到這個CSS位工作「 – Neil

沒有看到該編輯，很好趕上 – nodws

我更新了原來的問題。小寫字母'b'在我的輸入中是錯誤的，但重複的.icon不是。感謝您的建議。 – savvysherri

爲什麼他們兩個.icon的規則相同？也許編碼器無法找到第二個，並寫出第一個，設置重要的是爲了繞過第二個？

然後才能知道訂單，有一個開發工具打開它的神奇方式，如果檢測鉻的IMG，我可以看到下面的命令：

.full img { 
    display: block; 
    width: 30% !important; 
    margin: 0 auto !important; 
} 
.icon { 
    overwritten by important rule below---padding-left: 25px; 
} 
.icon { 
    padding-left: 0 !important; 
} 
.imageBlock { 
    display: block !important; 
    height: auto !important; 
    width: 100% !important; 
} 
img[Attributes Style] { 
    width: 100px; 
    height: 100px; 
}

wher上花費優先級低於

最後，我知道這不是你的代碼，但儘可能地避免！重要的，因爲當你真的需要它們時，它們將無法工作。

來源

2017-08-31 16:12:40 Neil

我想知道爲什麼有兩個引用.icon。此外，他們幾乎將每一條規則都標記爲「重要」。你認爲這與電子郵件編碼有什麼關係？也許他們想讓電子郵件客戶端正確渲染它？感謝您的建議，雖然這有幫助。我有一種感覺，雖然整個文件的最終結果是好的，但它有一些混亂的編碼。 – savvysherri

在不同的CSS引用中的多個類風格

回答

相關問題