CSS是樣式表語言,它可以為頁面上的元素提供樣式和布局。有時我們需要為多個元素或者一組元素統一設置樣式,此時我們就需要用到CSS選擇器來選擇多個元素。
CSS選擇器有多種方式可以選擇多個元素。其中,最常見的CSS選擇器有以下幾種:
1. 類型選擇器 使用元素的類型名來選擇多個元素。例如,選擇所有段落p元素,可以使用以下選擇器: p { /*樣式*/ } 2. 類選擇器 使用元素的類名來選擇。例如,選擇所有class為"example"的元素,可以使用以下選擇器: .example { /*樣式*/ } 3. ID選擇器 使用元素的ID屬性來選擇元素。例如,選擇id為"header"的元素,可以使用以下選擇器: #header { /*樣式*/ } 4. 屬性選擇器 使用元素的屬性來選擇元素。例如,選擇所有title屬性為"example"的元素,可以使用以下選擇器: [title="example"] { /*樣式*/ } 5. 后代選擇器 選擇元素的后代元素。例如,選擇所有p元素內部的span元素,可以使用以下選擇器: p span { /*樣式*/ } 6. 相鄰兄弟選擇器 選擇緊隨在另一個元素后的元素。例如,選擇所有緊接著h1元素后面的p元素,可以使用以下選擇器: h1 + p { /*樣式*/ } 7. 通用選擇器 選擇所有元素。例如,選擇所有元素的邊框,可以使用以下選擇器: * { border: 1px solid black; }
通過以上選擇器的運用,我們可以選擇多個元素,并為它們設置共同的樣式,從而提高開發效率,減少代碼量。