说到伪类，这里的代码足以展示其神奇的用法。从简单到复杂，你可以清楚地看到伪类的许多使用方法。对于一些类似的功能，以其中一个为例：:first-letter为第一个单词添加样式，这里以一个drop-firstletter示例来演示：
Chinaisthe中华文明之源
p:first-letter{display:block;向左飘浮;右边距：.2em；font-size:1.7em;}:first-line在段落首行添加样式：
锦瑟
锦瑟无缘无故五十弦，一弦一柱思念。
庄生晓梦蝶，望帝春心托杜鹃。
月有泪海珠，蓝田日暖玉如烟。
这种感觉能化作记忆吗？它只是不知所措。
p:first-line{font-weight:bold;font-size:1.7em;}::selection(CSS3)设置选中文本的状态，或者上面的文本：.select::selection{background-color:yellowgreen;}:empty(CSS3)元素样式，内容为空Ihavecontent
div{width:60px;高度：40px；背景色：浅灰色；margin:5px;}div:empty{background-color:darkgray;}如果中间没有内容，则使用href的值作为内容：a:empty:before{content:attr(href);}:focus元素获得焦点时的样式input[type="text"]:focus{border:1pxpurplesolid;box-shadow:0015pxblack;}:disabled:enabled(CSS3)禁用元素样式input:disabled{background-color:red;}input:enabled{background-color:yellow;}:checked:read-only:read-write:indeterminate:invalid:valid(CSS3)伪类描述:radio,checkboxandselectselectedincheckedinput:read-onlyinput,selectandtextareaelementswithreadonlyattribute(firefox不支持):read-writeinput,selectandtextareawritableelementswithoutthereadonlyattribute(firefoxdoesn'tsupportit):indeterminatedoesnothaveanyselectedradiogroup(firefoxdoesn'tsupport):invalidinputelementsthatfailformvalidation:validinputformvalidationpasses:
input[type=“checkbox”]:checked{outline:2pxsolidred;}input:read-only{background-color:yellow;}input:read-write{background-color:lightgreen;}input:indeterminate{outline:1pxsolidblue;}input[type="email"]:invalid{背景颜色：红色；color:#fff;}input[type="email"]:valid{background-color:#lightgreen;}:required:optional:in-range:out-of-range:default(CSS3)伪类描述：required具有required属性的input、select和textarea元素：optionaleditableinput、select和textarea元素没有required属性：legalinputwithin-range在指定范围内：out-of-rangenotLegalinput在指定范围内：defaultdefault样式（仅firefox支持）
:default{background-color:green;}input:required{background-color:yellow;}input:optional{background-color:orange;}input:in-range{background-color:lightgreen;}输入：超出范围{背景色：红色；color:white;}input:indeterminate{outline:1pxsolidblue;}:link:hover:active:visited:linkanchor点样式：鼠标悬停在元素（任意元素）上方时的悬停样式点击（任何元素element):访问鼠标点击的颜色(任意元素)百度a:链接{文字装饰：无；字体粗细：粗体；颜色：黑色；}a：悬停{文字装饰：下划线；颜色：蓝色；}a：活动{文字装饰：无；color:purple;}a:visited{text-decoration:none;color:darkgray;}:first-child:last-child:nth-child:not:only-child:first-child第一个元素style:last-child最后一个元素style:nth-child(n)第n个元素的样式（这个也能玩点花样）：not(selector)不符合选择器selector的样式ulli{list-style:none;背景颜色：天蓝色；白颜色;文本对齐：居中；宽度：100px；高度：20px；边距：5px自动；float:left;}ulli:first-child{color:blue;}ulli:last-child{color:red;}ulli:nth-child(3){color:darkgreen;}ulli:not([name="except"]){font-style:italic;}/*下面实现偶数部分的样式变化*/ulli:nth-child(2n){/*2n+1可以表示奇数*/background-color:blue;/*下面实现连续部分样式变化*/ulli:nth-child(n+3):nth-child(-n+8){background-color:blue;}/*:nth-child(n+3)表示第3个以后的元素：nth-??child(-n+8)表示第8个之前的元素，所以这里选择第3到第8个元素*/:only-child放在下一节和:only-of-type比较解释：first-of-type:last-of-type:nth-of-type:nth-last-of-type:only-of-type除了CSS3:first-of-type:last-of-type:nth-of-type(n):nth-last-of-type(n)用法与上面类似，效果相同，其中：nth-last-of-type(n)表示最后第n个元素type和child这两种类型有如下区别：//伪代码div1中唯一的子元素h3
div2中第一个h3
div2中第一个h4
div2中的第二个h3
div3中的第一个h3
div3中第一个h4
div3
中的第二个h3第二个h4indiv3
第三个h3indiv3
thirdh4indiv3
h3:nth-of-type(2){color:#00f;}h4:nth-child(4){颜色：#ff0;}h4:only-of-type{background-color:#ff0;}h3:only-child{background-color:#f0f;}在上面的例子中，还有:only-child和:only-of-CSS3中的type有两个伪类，代表单个元素，即前后没有相同的元素。具体效果如下图所示：:target:target选择器可以用来选择当前activity的目标元素（即url中的锚元素）。接下来使用target制作tab样式（点击切换）
Label1标签二标签三内容一内容二内容三 