CSS3選擇器在網(wǎng)頁設(shè)計中起了極為重要的作用。選擇器不僅可以精確地選擇某個元素,而且可以通過聯(lián)合選擇器選取多個元素。
/* 通過類名選擇元素 */ p.article { font-size: 18px; color: #333; } /* 通過ID選擇元素 */ #header { background-color: #fff; } /* 通過屬性選擇元素 */ input[type="text"] { border: 1px solid #ccc; } /* 通過偽類選擇元素 */ a:link { color: blue; } /* 通過偽元素選擇元素 */ p:first-letter { font-size: 24px; font-weight: bold; }
除了基本選擇器之外,CSS3還引入了眾多高級選擇器,例如通配選擇器、子選擇器、父選擇器、相鄰兄弟選擇器、波浪線選擇器等。這些高級選擇器可以輕松選擇網(wǎng)頁中的任何元素。
/* 通配選擇器 */ * { margin: 0; } /* 子選擇器 */ ul>li { list-style: none; } /* 父選擇器 */ article:has(h2) { padding: 20px; } /* 相鄰兄弟選擇器 */ h2 + p { font-weight: bold; } /* 波浪線選擇器 */ input~span { color: red; }
總的來說,CSS3選擇器的出現(xiàn)大大提升了網(wǎng)頁設(shè)計的靈活性,使得網(wǎng)頁的樣式更加多樣化、美觀化。