1. 根选择器 :root
:root{}就等同于ht ML {}, 一般来说, 推荐使用:root{}.
CSS Code 复制内容到剪贴板
<style> &nbs p; :root { background : green ; } </style> <div>:root选择器的演示</div>
2. 否定选择器 :not
否定选择器, 就是除此之外的
CSS Code 复制内容到剪贴板
<style> input:not([ty PE = "s ub m IT " ]) { border : 1px solid red ; } </style> <form action= " # " > <div> <label for= "n am e" > 账号 :</label> <input type= "text" name= "name" id= "name" placeholder= "请填写账号" /> </div> <div> <label for= "password" >密码:</label> <input type= "password" name= "password" id= "password" placeholder= "请填写密码" /> </div> <div> <input type= "submit" value= "Submit" /> </div> </form>
3. 空选择器 :empty
注意: :empty 只对 一点 内容都没有的元素 生效 , 哪怕有一个空格都不行.
CSS Code 复制内容到剪贴板
<style> div:empty { border : 1px solid green ; } </style> <div>我这里有内容</div> <div> <!-- 我这里有一个空格 --></div> <div></div><!-- 我这里任何内容都没有 -->
4.目标选择器 :t arg et
超链接地址, 与id对应
CSS Code 复制内容到剪贴板
<style> .not_show{ dis play : none ; } # test :target{ display : block ; } </style> <h2><a hr ef= "#test" >test</a></h2> <div class= "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><a href= "#pipi" >pipi</a></h2> <div id= "pipi" > content for pipi </div> <h2><a href= "#ruby" >ruby</a></h2> <div id= "ruby" > content for ruby </div> <h2><a href= "#aaron" > br and</a></h2> <div id= "aaron" > content for aaron </div>
5. 第一个与最后一个子元素 : First -child :last-child
CSS Code 复制内容到剪贴板
<style> ul li:first-child a { color : green ; } ul li:last-child a { color : red ; } </style> <ul> <li><a href= "##" >Link1</a></li> <li><a href= "##" >Link2</a></li> <li><a href= "##" >Link3</a></li> <li><a href= "##" >Link4</a></li> <li><a href= "##" >Link5</a></li> </ul>
6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)
CSS Code 复制内容到剪贴板
<style> /*2n 偶数*/ ul li:nth-child(2n) { color : green ; } /* 用关键词 odd, 表示偶数, 效果同上 ul li:nth-child(odd) { color:green; } */ /*2n+1 奇数 */ ul li:nth-child(2n+1) { color : red ; } /* 用关键词 even, 表示奇数, 效果同上 ul li:nth-child(even) { color:red; } */ /* 指定子元素索引 */ ul li:nth-child(5) { background : #08c ; } /* 倒数第五个 */ ul li: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 -t ype last-of-type
CSS Code 复制内容到剪贴板
<style> .wrapper > p:first-of-type { background : green ; } .wrapper > p:last-of-type { background : orange; } </style> <div class= "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> <div class= "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 @H_40_ 126 7@复制内容到剪贴板
<style> .post p:only-child { background : orange; } </style> <div class= "post" > <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class= "post" > <p>我是一个段落</p> </div>
10. 唯一匹配类型的子元素 only-of-type
CSS Code 复制内容到剪贴板
<style> .wrapper > div:only-of-type { background : orange; } </style> <div class= "wrapper" > <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div> </div> <div class= "wrapper" > <div>我是一个Div</div> <ul> <li>我是一个列表项</li> </ul> <p>我是一个段落</p> </div>
11. 可用选择器 :enabled
CSS Code 复制内容到剪贴板
<style> div{ mar gin : 20px ; } input[type= "text" ]:enabled { background : #ccc ; border : 2px solid red ; } </style> <form action= "#" > <div> <label for= "name" >Text Input:</label> <input type= "text" name= "name" id= "name" placeholder= "可用输入框" /> </div> <div> <label for= "name" >Text Input:</label> <input type= "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 : 1px solid orange; border -radius: 3px ; } input[type= "text" ]:disabled { background : rgba(0,0,0,.15); border : 1px solid rgba(0,0,0,.15); color : rgba(0,0,0,.15); } </style> <form action= "#" > <div> <input type= "text" name= "name" id= "name" placeholder= "我是可用输入框" /> </div> <div> <input type= "text" name= "name" id= "name" placeholder= "我是不可用输入框" disabled /> </div> </form>
13. 被选中选择器 :checked
CSS Code 复制内容到剪贴板
<style> form { border : 1px solid #ccc ; padding : 20px ; width : 300px ; margin : 30px auto ; } .wrapper { margin-bottom : 10px ; } .box { display : inline - block ; width : 20px ; h ei ght : 20px ; margin-right : 10px ; position : relative ; border : 2px solid orange; vert ical -align : middle ; } .box input { opacity: 0; positon: absolute ; top :0; left :0; } .box span { position : absolute ; top : - 10px ; right right : 3px ; font -s ize : 30px ; font-weight : bold ; font-f ami ly : Arial ; - webkit -transform: rotate(30 deg ); transform: rotate(30deg); color : orange; } input[type= "checkbox" ] + span { opacity: 0; } input[type= "checkbox" ]:checked + span { opacity: 1; } </style> <form action= "#" > <div class= "wrapper" > <div class= "box" > <input type= "checkbox" checked= "checked" id= "usename" /><span>√</span> </div> <lable for= "usename" >我是选中状态</lable> </div> <div class= "wrapper" > <div class= "box" > <input type= "checkbox" id= "usepwd" /><span>√</span> </div> <label for= "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 : 1px solid #ccc ; margin : 50px auto ; } form > div { margin-bottom : 10px ; } input[type= "text" ]{ border : 1px solid orange; 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> <form action= "#" > <div> <label for= "name" >姓名:</label> <input type= "text" name= "name" id= "name" placeholder= "大漠" /> </div> <div> <label for= "address" >地址:</label> <input type= "text" name= "address" id= "address" value= "中国上海" readonly /> </div> </form>
16. 非只读选择器 :read-write
CSS Code 复制内容到剪贴板
<style> form { width : 300px ; padding : 10px ; border : 1px solid #ccc ; margin : 50px auto ; } form > div { margin-bottom : 10px ; } input[type= "text" ]{ border : 1px solid orange; 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> <form action= "#" > <div> <label for= "name" >姓名:</label> <input type= "text" name= "name" id= "name" placeholder= "大漠" /> </div> <div> <label for= "address" >地址:</label> <input type= "text" name= "address" id= "address" placeholder= "中国上海" readonly= "readonly" /> </div> </form>
总结
以上是 为你收集整理的 CSS3中的常用选择器使用示例整理 全部内容，希望文章能够帮你解决 CSS3中的常用选择器使用示例整理 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3中的常用选择器使用示例整理的详细内容...