CSS3引入了許多新選擇器,讓我們能夠更加精確地選定特定的HTML元素,這些選擇器使得我們的樣式表更加強(qiáng)大、靈活。
/* 屬性選擇器 */ input[type="text"] { border: 2px solid green; } /* 偽類選擇器 */ a:hover { color: blue; } /* 相鄰選擇器 */ h1 + p { font-weight: bold; } /* 子選擇器 */ ul >li { color: red; } /* 通配符選擇器 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 媒體查詢選擇器 */ @media screen and (max-width: 768px) { .menu { display: none; } } /* nth-child選擇器 */ ul li:nth-child(odd) { background-color: #f2f2f2; } /* 偽元素選擇器 */ p::first-letter { font-size: 2rem; color: red; }
這些新選擇器對(duì)于響應(yīng)式Web設(shè)計(jì)非常有用,它們能夠根據(jù)不同的屏幕尺寸和媒體類型顯示不同的內(nèi)容。我們不再需要使用JavaScript來兼容舊版本的瀏覽器,這些樣式可以通過CSS3的兼容性寫法來支持舊瀏覽器。
總之,CSS3的新選擇器使得我們比以前更加方便地控制HTML元素,提高了我們的樣式表的可讀性和可維護(hù)性。