在CSS中,class用于指定一組元素的樣式,這些元素可以是同一種標簽,也可以是不同種標簽,只要它們有相同的class屬性值即可。
/* 定義class樣式 */ .my-class { font-size: 16px; color: #333; background-color: #FFF; } /* 使用class樣式 */這是一個使用了“my-class”樣式的段落。
這是一個使用了“my-class”樣式的鏈接。
上面的代碼中,定義了一個名為“my-class”的class樣式,它包含三個屬性:字體大小、文字顏色和背景顏色。在下面的HTML代碼中,我們使用了這個樣式,第一個元素是一個段落,第二個元素是一個鏈接,它們都有相同的class屬性值“my-class”,所以它們都會應用上面定義的樣式。
使用class樣式可以避免重復編寫CSS代碼,讓樣式定義更加簡單和直觀。可以通過CSS選擇器來選取指定的class樣式,也可以通過JavaScript動態地改變元素的class屬性值,實現動態樣式效果。
/* 通過CSS選擇器選取指定的class */ .my-class p { font-size: 18px; } /* 通過JavaScript動態改變class屬性值 */ var el = document.querySelector("#my-element"); el.className = "my-class another-class";
在上面的代碼中,第一個例子使用了CSS選擇器選取了所有class屬性為“my-class”的段落元素,將它們的字體大小增大到了18px。第二個例子使用了JavaScript選取了一個id為“my-element”的元素,并將它的class屬性值改為“my-class another-class”,實現了動態切換樣式的效果。
上一篇css 混合動畫
下一篇clear css中