如果我們在網站開發中需要對多個元素應用相同的樣式,那么一個個的設置樣式非常麻煩,這個時候我們可以使用CSS選擇器來統一修飾多個元素。
下面是一些如何選擇多個元素并對其應用相同樣式的例子:
/* 選擇所有段落元素 */ p { color: red; } /* 選擇所有段落元素和所有列表元素 */ p, li { font-size: 16px; font-weight: bold; } /* 選擇所有表格中的表頭元素 */ table th { background-color: yellow; }
在這些例子中,我們使用了“,”和空格來選擇多個元素。在“,”前后的元素都會被選擇。在空格之間的元素表示層級關系,選擇的元素必須是父元素的子元素,而不是任意元素。
此外,我們也可以使用類和ID選擇器來選擇多個元素并給它們應用相同的樣式。這種方法非常有用,特別是當我們在HTML標記中添加類或ID時,我們可以很容易地選中和修飾這些元素。
/* 選擇類為“container”的所有元素 */ .container { width: 960px; margin: 0 auto; } /* 選擇ID為“header”的元素和類為“menu”的所有元素 */ #header, .menu { background-color: gray; color: white; }
總之,當我們需要為多個元素應用相同樣式時,可以使用選擇器來快速簡便地實現。我們可以選擇多個元素并在同一條CSS規則中為它們應用相同的樣式,這樣可以使代碼更加簡潔和易于維護。