如何使用 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>                        
（编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!