1. 根选择器 :root
:root{}就等同于html{}, 一般来说, 推荐使用:root{}.
CSS Code复制内容到剪贴板
<style>:root{background:green;}</style><div>:root选择器的演示</div>2. 否定选择器 :not
否定选择器, 就是除此之外的
CSS Code复制内容到剪贴板
<style>input:not([type="submit"]){border:1pxsolidred;}</style><formaction="#"><div><labelfor="name">账号:</label><inputtype="text"name="name"id="name"placeholder="请填写账号"/></div><div><labelfor="password">密码:</label><inputtype="password"name="password"id="password"placeholder="请填写密码"/></div><div><inputtype="submit"value="Submit"/></div></form>3. 空选择器 :empty
注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.
CSS Code复制内容到剪贴板
<style>div:empty{border:1pxsolidgreen;}</style><div>我这里有内容</div><div><!--我这里有一个空格--></div><div></div><!--我这里任何内容都没有-->4.目标选择器 :target
超链接地址, 与id对应
CSS Code复制内容到剪贴板
<style>.not_show{display:none;}#test:target{display:block;}</style><h2><ahref="#test">test</a></h2><divclass="not_show"id="test">这是一个测试</div><style>#pipi:target{background:orange;color:#fff;}#ruby:target{background:blue;color:#fff;}#aaron:target{background:red;color:#fff;}</style><h2><ahref="#pipi">pipi</a></h2><divid="pipi">contentforpipi</div><h2><ahref="#ruby">ruby</a></h2><divid="ruby">contentforruby</div><h2><ahref="#aaron">Brand</a></h2><divid="aaron">contentforaaron</div>5. 第一个与最后一个子元素 :first-child :last-child
CSS Code复制内容到剪贴板
<style>ulli:first-childa{color:green;}ulli:last-childa{color:red;}</style><ul><li><ahref="##">Link1</a></li><li><ahref="##">Link2</a></li><li><ahref="##">Link3</a></li><li><ahref="##">Link4</a></li><li><ahref="##">Link5</a></li></ul>6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)
CSS Code复制内容到剪贴板
<style>ulli:nth-child(2n){color:green;}ulli:nth-child(2n+1){color:red;}ulli:nth-child(5){background:#08c;}ulli:nth-last-child(5){background:yellow;}</style><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li><li>item9</li><li>item10</li></ul>
7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type
CSS Code复制内容到剪贴板
<style>.wrapper>p:first-of-type{background:green;}.wrapper>p:last-of-type{background:orange;}</style><divclass="wrapper"><div>我是一个块元素，我是.wrapper的第一个子元素</div><p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p><p>我是一个段落元素</p><div>我是一个块元素</div></div>8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)
CSS Code复制内容到剪贴板
<style>.wrapper>p:nth-of-type(2n){background:orange;}</style><divclass="wrapper"><div>我是一个Div元素</div><p>我是一个段落元素</p><div>我是一个Div元素</div><p>我是一个段落</p><div>我是一个Div元素</div><p>我是一个段落</p><div>我是一个Div元素</div><p>我是一个段落</p><div>我是一个Div元素</div><p>我是一个段落</p><div>我是一个Div元素</div><p>我是一个段落</p><div>我是一个Div元素</div><p>我是一个段落</p><div>我是一个Div元素</div><p>我是一个段落</p></div>9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素
CSS Code复制内容到剪贴板
<style>.postp:only-child{background:orange;}</style><divclass="post"><p>我是一个段落</p><p>我是一个段落</p></div><divclass="post"><p>我是一个段落</p></div>10. 唯一匹配类型的子元素 only-of-type
CSS Code复制内容到剪贴板
<style>.wrapper>div:only-of-type{background:orange;}</style><divclass="wrapper"><p>我是一个段落</p><p>我是一个段落</p><p>我是一个段落</p><div>我是一个Div元素</div></div><divclass="wrapper"><div>我是一个Div</div><ul><li>我是一个列表项</li></ul><p>我是一个段落</p></div>11. 可用选择器 :enabled
CSS Code复制内容到剪贴板
<style>div{margin:20px;}input[type="text"]:enabled{background:#ccc;border:2pxsolidred;}</style><formaction="#"><div><labelfor="name">TextInput:</label><inputtype="text"name="name"id="name"placeholder="可用输入框"/></div><div><labelfor="name">TextInput:</label><inputtype="text"name="name"id="name"placeholder="禁用输入框"disabled="disabled"/></div></form>12. 不可用选择器 :disabled
CSS Code复制内容到剪贴板
<style>form{margin:50px;}div{margin-bottom:20px;}input{background:#fff;padding:10px;border:1pxsolidorange;border-radius:3px;}input[type="text"]:disabled{background:rgba(0,0,0,.15);border:1pxsolidrgba(0,0,0,.15);color:rgba(0,0,0,.15);}</style><formaction="#"><div><inputtype="text"name="name"id="name"placeholder="我是可用输入框"/></div><div><inputtype="text"name="name"id="name"placeholder="我是不可用输入框"disabled/></div></form>13. 被选中选择器 :checked
CSS Code复制内容到剪贴板
<style>form{border:1pxsolid#ccc;padding:20px;width:300px;margin:30pxauto;}.wrapper{margin-bottom:10px;}.box{display:inline-block;width:20px;height:20px;margin-right:10px;position:relative;border:2pxsolidorange;vertical-align:middle;}.boxinput{opacity:0;positon:absolute;top:0;left:0;}.boxspan{position:absolute;top:-10px;rightright:3px;font-size:30px;font-weight:bold;font-family:Arial;-webkit-transform:rotate(30deg);transform:rotate(30deg);color:orange;}input[type="checkbox"]+span{opacity:0;}input[type="checkbox"]:checked+span{opacity:1;}</style><formaction="#"><divclass="wrapper"><divclass="box"><inputtype="checkbox"checked="checked"id="usename"/><span>√</span></div><lablefor="usename">我是选中状态</lable></div><divclass="wrapper"><divclass="box"><inputtype="checkbox"id="usepwd"/><span>√</span></div><labelfor="usepwd">我是未选中状态</label></div></form>14. 被鼠标选中, 高亮选择器 ::selection
CSS Code复制内容到剪贴板
<style>::-moz-selection{background:red;color:green;}::selection{background:red;color:green;}</style><p>拿鼠标选中我,试试看!</p>15. 只读选择器 :read-only
CSS Code复制内容到剪贴板
<style>form{width:300px;padding:10px;border:1pxsolid#ccc;margin:50pxauto;}form>div{margin-bottom:10px;}input[type="text"]{border:1pxsolidorange;padding:5px;background:#fff;border-radius:5px;}input[type="text"]:-moz-read-only{border-color:#ccc;}input[type="text"]:read-only{border-color:#ccc;}</style><formaction="#"><div><labelfor="name">姓名:</label><inputtype="text"name="name"id="name"placeholder="大漠"/></div><div><labelfor="address">地址:</label><inputtype="text"name="address"id="address"value="中国上海"readonly/></div></form>16. 非只读选择器 :read-write
CSS Code复制内容到剪贴板
<style>form{width:300px;padding:10px;border:1pxsolid#ccc;margin:50pxauto;}form>div{margin-bottom:10px;}input[type="text"]{border:1pxsolidorange;padding:5px;background:#fff;border-radius:5px;}input[type="text"]:-moz-read-only{border-color:#ccc;}input[type="text"]:read-only{border-color:#ccc;}input[type="text"]:-moz-read-write{border-color:#f36;}input[type="text"]:read-write{border-color:#f36;}</style><formaction="#"><div><labelfor="name">姓名:</label><inputtype="text"name="name"id="name"placeholder="大漠"/></div><div><labelfor="address">地址:</label><inputtype="text"name="address"id="address"placeholder="中国上海"readonly="readonly"/></div></form> 
