CSS3 是一個非常強大的前端技術,在很多方面都比 CSS2 更加強大和靈活。其中一個最明顯的特點就是可以使用更多的聲明方式來定義樣式。下面我們來介紹一些最常用的 CSS3 聲明方式。
1. 屬性選擇器 屬性選擇器包括四種類型:存在([attr])、等于([attr=value])、開始于([attr^=value])和包含于([attr*=value])。 比如: [type="checkbox"] { margin: 10px; } 這個選擇器將會選擇所有 type 屬性值為 "checkbox" 的元素,并給它們添加 10 像素的 margin。
2. 偽類選擇器 偽類選擇器允許我們在元素處于某種狀態時改變它的樣式。比如,:hover,:active,:visited,:focus,:first-child 等等。 比如: input[type="text"]:hover { background-color: #fff; } 這個選擇器將會選擇所有輸入框中 type 為 "text" 的元素,并在鼠標懸停時將它們的背景顏色改為白色。
3. 偽元素選擇器 偽元素選擇器允許我們在元素的某一個位置上添加一些額外的樣式。比如,::before,::after,::first-letter,::first-line 等等。 比如: p::after { content: "(文章完)"; font-size: 0.9rem; color: gray; } 這個選擇器將會在所有段落的末尾添加一個括號和“文章完”的文字,并將它們的字體變小,顏色變為灰色。
4. transform 屬性 transform 屬性可以用來對元素進行旋轉、縮放、移動等操作。常見的取值有 rotate、scale、translate、skew 等等。 比如: .box { transform: rotate(30deg); } 這個樣式將會將 class 為 box 的元素順時針旋轉 30 度。
CSS3 聲明方式有很多,以上只是一部分,希望對您有所幫助。