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> /*2n偶数*/ ulli:nth-child(2n){ color:green; } /*用关键词odd,表示偶数,效果同上 ulli:nth-child(odd){ color:green; } */ /*2n+1奇数*/ ulli:nth-child(2n+1){ color:red; } /*用关键词even,表示奇数,效果同上 ulli:nth-child(even){ 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>