CSS3选择器在网页设计中起了极为重要的作用。选择器不仅可以精确地选择某个元素,而且可以通过联合选择器选取多个元素。
/* 通过类名选择元素 */ 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还引入了众多高级选择器,例如通配选择器、子选择器、父选择器、相邻兄弟选择器、波浪线选择器等。这些高级选择器可以轻松选择网页中的任何元素。
/* 通配选择器 */ * { margin: 0; } /* 子选择器 */ ul>li { list-style: none; } /* 父选择器 */ article:has(h2) { padding: 20px; } /* 相邻兄弟选择器 */ h2 + p { font-weight: bold; } /* 波浪线选择器 */ input~span { color: red; }
总的来说,CSS3选择器的出现大大提升了网页设计的灵活性,使得网页的样式更加多样化、美观化。