如何使用 CSS3 偽類

CSS3 是個好東西，但也很容易被她的變形（transform）和動畫（其中許多特性因瀏覽器廠商而異）特性所迷惑，因而忘了那些已經被添加到標準規范中的最為基本的選擇器。許多強大的新偽類選擇器（最新的 W3C 規范中列出了 16 條）使得我們能夠在新的標準范圍內使用元素選擇器。

在探討這些新的 CSS3 偽類之前，先簡要回顧追溯一下這些在 Web 應用中常常被誤解的 CSS 選擇器。

偽類簡史

在 1996 年，當 CSS1 的規范完成后，一些偽類選擇器已被囊括在內，其中許多你幾乎每天都在使用。例如：

• :link
• :visited
• :hover
• :active

這些狀態都可以被應用到某個元素，通常是以 “a:偽類名”的形式。令人難以置信的是，在 W3C 于 1997 年 12 月發布 HTML4 規范之前，這些偽類已經被極為廣泛地使用了。

CSS2 來了

于是 CSS2 來了。其建議規范在兩年之后的 1998 年 5 月發布。隨之令人興奮的是添加了 :first-child 和 :lang() 新偽類。

:lang

有許多種表示文檔語言類型的方法，如果你使用 HTML5，很可能會直接在 DOCTYPE 聲明之后放置 語句（指定本地語種）。當然，你也可以使用 :lang(en) 偽類來修飾頁面元素，對于語言動態變化的情況，這將非常有用。

:first-child

您可能已經在文檔中使用 :first-child 屬性。它通常用于添加或刪除列表中第一個元素的上邊框。奇怪的是，卻沒有 :last-child 這樣的偽類與之對應。于是不得等到 CSS3 規范的對這兩個兄弟偽類的支持。

為何使用偽類？

偽類如此實用的原因在于它們允許動態地設置內容樣式。比如上面的 <a> 例子，我們能夠描述當用戶與鏈接進行交互時，鏈接該如何呈現樣式。正如我們看到的，新的偽類允許我們根據元素在文檔中的位置或狀態，動態地設置其樣式。

16 個全新偽類已經成為 W3C 的 CSS 建議的一部分，它們被分成四組：結構偽類、UI 元素的狀態偽類、一個目標（target）偽類和一個否定偽類。

W3C 是 CSS 之家

現在我們一起探究看看如何使用這 16 個新偽類選擇器。我會使用和 W3C 相同的標識符來命名 CSS 類，比如 E 代表元素（element），n 表示數字（number），s 表示選擇器（selector）。

示例代碼

大部分新選擇器都會給出參考示例，以便直觀地看到代碼呈現效果。這里會涉及一張適用于 iPhone 并且使用了 CSS3 偽類的表單。

請注意，這張表單中大部分樣式可以使用 id 和類（class）選擇器設定。即便如此，仍然可以使用新偽類針為這個表單錦上添花。點擊這里查看頁面示例

<form>	<hgroup>		<h1>Awesome Widgets</h1>		<h2>All the cool kids have got one</h2>	</hgroup>	<fieldset id="email">		<legend>Where do we send your receipt?</legend>		<label for="email">Email Address</label>		<input type="email" name="email" placeholder="Email Address" />	</fieldset>	<fieldset id="details">		<legend>Personal Details</legend>		<select name="title" id="field_title">			<option value="" selected="selected">Title</option>			<option value="Mr">Mr</option>			<option value="Mrs">Mrs</option>			<option value="Miss">Miss</option>		</select>		<label for="firstname">First Name</label>		<input name="firstname" placeholder="First Name" />		<label for="initial">Initial</label>		<input name="initial" placeholder="Initial" size="3" />		<label for="surname">Surname</label>		<input name="surname" placeholder="Surname" />	</fieldset>	<fieldset id="payment">		<legend>Payment Details</legend>		<label for="cardname">Name on card</label>		<input name="cardname" placeholder="Name on card" />		<label for"cardnumber">Card number</label>		<input name="cardnumber" placeholder="Card number" />		<select name="cardType" id="field_cardType">			<option value="" selected="selected">Select Card Type</option>			<option value="1">Visa</option>			<option value="2">American Express</option>			<option value="3">MasterCard</option>		</select>		<label for="cardExpiryMonth">Expiry Date</label>		<select id="field_cardExpiryMonth" name="cardExpiryMonth">			<option selected="selected" value="mm">MM</option>			<option value="01">01</option>			<option value="02">02</option>			<option value="03">03</option>			<option value="04">04</option>			<option value="05">05</option>			<option value="06">06</option>			<option value="07">07</option>			<option value="08">08</option>			<option value="09">09</option>			<option value="10">10</option>			<option value="11">11</option>			<option value="12">12</option>		</select>		/		<select id="field_cardExpiryYear" name="cardExpiryYear">			<option value="yyyy">YYYY</option>			<option value="2011">11</option>			<option value="2012">12</option>			<option value="2013">13</option>			<option value="2014">14</option>			<option value="2015">15</option>			<option value="2016">16</option>			<option value="2017">17</option>			<option value="2018">18</option>			<option value="2019">19</option>		</select>		<label for"securitycode">Security code</label>		<input name="securitycode" type="number" placeholder="Security code" size="3" />		<p>Would you like Insurance?</p>		<input type="radio" name="Insurance" id="insuranceYes" />		<label for="insuranceYes">Yes Please!</label>		<input type="radio" name="Insurance" id="insuranceNo" />		<label for="insuranceNo">No thanks</label>	</fieldset>	<fieldset id="submit">		<button type="submit" name="Submit" disabled>Here I come!</button>	</fieldset></form>     

 生活不易，碼農辛苦

 如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈