CSS3檢索是一種強大的工具,可幫助開發者設計出更美觀、更流暢的用戶界面。以下是幾種常見的CSS3檢索技術:
/* 1. 屬性選擇器 */ /* 選擇所有有title屬性的元素 */ [title] { color: blue; } /* 選擇所有class屬性值為"button"的元素 */ [class="button"] { background-color: green; } /* 選擇所有href屬性值以"https"開頭的鏈接元素 */ [href^="https"] { color: red; } /* 2. 偽類選擇器 */ /* 選擇第一個元素 */ p:first-child { font-weight: bold; } /* 選擇最后一個鏈接 */ a:last-of-type { font-style: italic; } /* 選擇所有被懸停的鏈接 */ a:hover { text-decoration: underline; } /* 3. 偽元素選擇器 */ /* 在元素前添加內容 */ p::before { content: "- "; } /* 在元素后添加內容 */ p::after { content:"-"; } /* 選中第一行文字 */ p::first-line { color: red; } /* 4. 盒模型屬性 */ /* 圓角 */ div { border-radius: 10px; } /* 陰影 */ p { box-shadow: 5px 5px 5px grey; } /* 透明度 */ img { opacity: 0.5; }
使用CSS3檢索技術,開發者能夠以更精細的方式控制HTML元素的樣式和特征,使其在不同的設備和瀏覽器上都能呈現出相同的效果。這不僅可以提高用戶體驗,也能減少開發和維護工作量。