img在css中有兩個不同的屬性

Question

我希望能夠有例如兩個具有不同屬性的img類。例如，在CSS我想有：

img { 
    padding-left: 15pt; 
    float: right; 
} 

然後：

img1 { 
    padding-left: 15pt; 
    float: left; 
} 

其中img1應該是圖像的標籤，所以我可以在HTML中使用它，例如爲：

<img1 src="myimage.png" alt="m"/> 

我該怎麼做？

Answer 1

您使用的是什麼樣的<img1 />是無效的HTML標籤，序選擇唯一的元素，我們定義class或id的元素，即使由於某種原因，你不想定義一個class或id，您可以定義Custom Attributes的元素，具有data-前綴，但你不能定義自定義HTML元素 ..

定義class每個img標籤.. （聲明id，確保他們是獨特的，你不能對多個元素使用相同的id ..）

<img src="" class="img1" /> 
<img src="" class="img2" /> 

而且比我們寫出這樣相應的CSS

.img1 { 
    /* Selects element having a class of .img1 */ 
} 

.img2 { 
    /* Selects element having a class of .img2 */ 
} 

---

假如你有共同的屬性被宣佈爲兩個，用一個逗號，不是他們組重新聲明爲其他class獨特的性能，如

.img1, .img2 { 
    padding-left: 15pt; 
    /* Other common properties goes here */ 
} 

.img2 { 
    /* Unique properties for .img2 */ 
} 

如果你是不是想找一個class分配給每個img標籤，比你可以使用:nth-of-type或:nth-child僞選擇每個img，但要確保你使用它們包裝一個div或section任何你認爲合適的...

假設我們總結他們div標籤裏面，我們分配一個class說.container

<div class="container"> 
    <img src="" /> 
    <img src="" /> 
</div> 

所以在這裏，你可以選擇第一個img作爲

.container img:nth-of-type(1) { 
    /* Properties here will apply to first img tag nested inside element having 
     class of .container */ 
} 

.container img:nth-of-type(2) { 
    /* Properties here will apply to second img tag nested inside element having 
     class of .container */ 
} 

注：這些CSS3僞，但這些被廣泛支持，但像往常一樣，舊的IE版本，就會破壞遊戲，雖然polyfills可用，但最後你必須決定你要選擇什麼。

此外，在每個我上面定義的，如果你不知道特異性的選擇的特殊性問題，不是給出一個快速閱讀here ...

Answer 2

你不能在html中定義自定義標籤，應該使用CSS類來完成你想要的功能。

<img class=img1 src="myimage.png" alt="m"/> 
<img class=img2 src="myimage2.png" alt="m"/> 

.img1 { 
    padding-left: 15pt; 
    float: left; 
} 

.img2 { 
    padding-left: 15pt; 
    float: right; 
}