在前端開發(fā)中，CSS3是一個(gè)非常重要的技術(shù)，極大地豐富了網(wǎng)頁的樣式效果，其中選擇器也是CSS3的一個(gè)重要特性。下面將為大家分享一些常見的選擇場(chǎng)景。

/* 1. 選擇指定類名的元素 */
.my-class {
color: red;
}
/* 2. 選擇指定id的元素 */
#my-id {
font-size: 20px;
}
/* 3. 選擇指定元素類型 */
p {
background-color: #f0f0f0;
}
/* 4. 定義某個(gè)元素下的子元素樣式 */
ul li {
font-weight: bold;
}
/* 5. 選擇指定屬性的元素 */
input[type="text"] {
border: 1px solid #ccc;
}
/* 6. 選擇前面兄弟元素 */
a + span {
font-weight: bold;
}
/* 7. 選擇后面兄弟元素 */
img ~ p {
margin-top: 10px;
}
/* 8. 選擇第N個(gè)子元素 */
ul li:nth-child(2) {
color: blue;
}
/* 9. 選擇從第N個(gè)到第M個(gè)子元素 */
ul li:nth-child(n+2):nth-child(-n+4) {
font-size: 16px;
}
/* 10. 選擇第N個(gè)之后的兄弟元素 */
p:nth-of-type(n+3) {
display: none;
}

以上這些常見的場(chǎng)景只是CSS3選擇器的冰山一角，CSS3選擇器還有很多強(qiáng)大的功能，比如偽類選擇器、偽元素選擇器等，可以幫我們實(shí)現(xiàn)更多的樣式效果，提高開發(fā)效率。因此，對(duì)于前端開發(fā)者來說，掌握CSS3選擇器是非常重要的基礎(chǔ)知識(shí)之一。