首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS3中的常用选择器使用示例整理

所属分类： 网页制作 / CSS 阅读数： 925
收藏 0 赞 0 分享

1. 根选择器 :root
:root{}就等同于html{}, 一般来说, 推荐使用:root{}.

CSS Code复制内容到剪贴板
  1. <style>   
  2. :root {   
  3.   background:green;   
  4. }   
  5. </style>   
  6.   
  7. <div>:root选择器的演示</div>  

2. 否定选择器 :not
否定选择器, 就是除此之外的

CSS Code复制内容到剪贴板
  1. <style>   
  2. input:not([type="submit"]) {   
  3.     border: 1px solid red;   
  4. }   
  5. </style>   
  6.   
  7. <form action="#">   
  8.     <div>   
  9.         <label for="name">账号:</label>   
  10.         <input type="text" name="name" id="name" placeholder="请填写账号" />   
  11.     </div>   
  12.     <div>   
  13.         <label for="password">密码:</label>   
  14.         <input type="password" name="password" id="password" placeholder="请填写密码" />   
  15.     </div>   
  16.     <div>   
  17.         <input type="submit" value="Submit" />   
  18.     </div>   
  19. </form>   

3. 空选择器 :empty
注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.

CSS Code复制内容到剪贴板
  1. <style>   
  2. div:empty {   
  3.     border: 1px solid green;   
  4. }   
  5. </style>   
  6.   
  7. <div>我这里有内容</div>   
  8. <div> <!-- 我这里有一个空格 --></div>   
  9. <div></div><!-- 我这里任何内容都没有 -->  

4.目标选择器 :target
超链接地址, 与id对应

CSS Code复制内容到剪贴板
  1. <style>   
  2. .not_show{   
  3.     display: none;   
  4. }   
  5.   
  6. #test:target{   
  7.     display:block;   
  8. }   
  9. </style>   
  10.   
  11.   
  12. <h2><a href="#test">test</a></h2>   
  13. <div class="not_show" id="test">   
  14.     这是一个测试   
  15. </div>   
  16. <style>   
  17.     #pipi:target {   
  18.       background: orange;   
  19.       color: #fff;   
  20.     }   
  21.     #ruby:target {   
  22.       background: blue;   
  23.       color: #fff;   
  24.     }   
  25.     #aaron:target {   
  26.       background: red;   
  27.       color: #fff;   
  28.     }   
  29. </style>   
  30.   
  31. <h2><a href="#pipi">pipi</a></h2>   
  32. <div id="pipi">   
  33.     content for pipi   
  34. </div>   
  35.   
  36. <h2><a href="#ruby">ruby</a></h2>   
  37. <div id="ruby">   
  38.     content for ruby   
  39. </div>   
  40.   
  41. <h2><a href="#aaron">Brand</a></h2>   
  42. <div id="aaron">   
  43.     content for aaron   
  44. </div>  

5. 第一个与最后一个子元素 :first-child :last-child

CSS Code复制内容到剪贴板
  1. <style>   
  2. ul li:first-child a {   
  3.     color:green;   
  4. }   
  5.   
  6. ul li:last-child a {   
  7.     color:red;   
  8. }   
  9.   
  10. </style>   
  11. <ul>   
  12.   <li><a href="##">Link1</a></li>   
  13.   <li><a href="##">Link2</a></li>   
  14.   <li><a href="##">Link3</a></li>   
  15.   <li><a href="##">Link4</a></li>   
  16.   <li><a href="##">Link5</a></li>   
  17. </ul>  

6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)

CSS Code复制内容到剪贴板
  1. <style>   
  2.     /*2n 偶数*/  
  3.     ul li:nth-child(2n) {   
  4.         color:green;   
  5.     }   
  6.   
  7.     /* 用关键词 odd, 表示偶数, 效果同上  
  8.     ul li:nth-child(odd) {  
  9.         color:green;  
  10.     }  
  11.     */  
  12.   
  13.     /*2n+1 奇数*/  
  14.     ul li:nth-child(2n+1) {   
  15.         color:red;   
  16.     }   
  17.   
  18.     /* 用关键词 even, 表示奇数, 效果同上  
  19.     ul li:nth-child(even) {  
  20.         color:red;  
  21.     }  
  22.     */  
  23.   
  24.     /* 指定子元素索引 */  
  25.     ul li:nth-child(5) {   
  26.         background: #08c;   
  27.     }   
  28.   
  29.     /* 倒数第五个 */  
  30.     ul li:nth-last-child(5){   
  31.         background: yellow;   
  32.     }   
  33. </style>   
  34. <ul>   
  35.     <li>item1</li>   
  36.     <li>item2</li>   
  37.     <li>item3</li>   
  38.     <li>item4</li>   
  39.     <li>item5</li>   
  40.     <li>item6</li>   
  41.     <li>item7</li>   
  42.     <li>item8</li>   
  43.     <li>item9</li>   
  44.     <li>item10</li>   
  45. </ul>  


7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type

CSS Code复制内容到剪贴板
  1. <style>   
  2.     .wrapper > p:first-of-type {   
  3.         background: green;   
  4.     }   
  5.   
  6.     .wrapper > p:last-of-type {   
  7.         background: orange;   
  8.     }   
  9. </style>   
  10.   
  11. <div class="wrapper">   
  12.     <div>我是一个块元素，我是.wrapper的第一个子元素</div>   
  13.     <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>   
  14.     <p>我是一个段落元素</p>   
  15.     <div>我是一个块元素</div>   
  16. </div>  

8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)

CSS Code复制内容到剪贴板
  1. <style>   
  2.     .wrapper > p:nth-of-type(2n){   
  3.         background: orange;   
  4.     }   
  5. </style>   
  6.   
  7. <div class="wrapper">   
  8.     <div>我是一个Div元素</div>   
  9.     <p>我是一个段落元素</p>   
  10.   
  11.     <div>我是一个Div元素</div>   
  12.     <p>我是一个段落</p>   
  13.   
  14.     <div>我是一个Div元素</div>   
  15.     <p>我是一个段落</p>   
  16.   
  17.     <div>我是一个Div元素</div>   
  18.     <p>我是一个段落</p>   
  19.   
  20.     <div>我是一个Div元素</div>   
  21.     <p>我是一个段落</p>   
  22.   
  23.     <div>我是一个Div元素</div>   
  24.     <p>我是一个段落</p>   
  25.   
  26.     <div>我是一个Div元素</div>   
  27.     <p>我是一个段落</p>   
  28.   
  29.     <div>我是一个Div元素</div>   
  30.     <p>我是一个段落</p>   
  31. </div>  

9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素

CSS Code复制内容到剪贴板
  1. <style>   
  2.     .post p:only-child {   
  3.       background: orange;   
  4.     }   
  5. </style>   
  6.   
  7. <div class="post">   
  8.     <p>我是一个段落</p>   
  9.     <p>我是一个段落</p>   
  10. </div>   
  11. <div class="post">   
  12.     <p>我是一个段落</p>   
  13. </div>  

10. 唯一匹配类型的子元素 only-of-type

CSS Code复制内容到剪贴板
  1. <style>   
  2.     .wrapper > div:only-of-type {   
  3.         background: orange;   
  4.     }   
  5. </style>   
  6.   
  7. <div class="wrapper">   
  8.     <p>我是一个段落</p>   
  9.     <p>我是一个段落</p>   
  10.     <p>我是一个段落</p>   
  11.     <div>我是一个Div元素</div>   
  12. </div>   
  13. <div class="wrapper">   
  14.     <div>我是一个Div</div>   
  15.     <ul>   
  16.         <li>我是一个列表项</li>   
  17.     </ul>   
  18.     <p>我是一个段落</p>   
  19. </div>  

11. 可用选择器 :enabled

CSS Code复制内容到剪贴板
  1. <style>   
  2.     div{   
  3.         margin: 20px;   
  4.     }   
  5.     input[type="text"]:enabled {   
  6.         background: #ccc;   
  7.         border: 2px solid red;   
  8.     }   
  9. </style>   
  10.   
  11. <form action="#">   
  12.     <div>   
  13.         <label for="name">Text Input:</label>   
  14.         <input type="text" name="name" id="name" placeholder="可用输入框"  />   
  15.     </div>   
  16.     <div>   
  17.         <label for="name">Text Input:</label>   
  18.         <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />   
  19.     </div>   
  20. </form>  

12. 不可用选择器 :disabled

CSS Code复制内容到剪贴板
  1. <style>   
  2. form {   
  3.     margin: 50px;   
  4. }   
  5.   
  6. div {   
  7.     margin-bottom: 20px;   
  8. }   
  9.   
  10. input {   
  11.     background: #fff;   
  12.     padding: 10px;   
  13.     border: 1px solid orange;   
  14.     border-radius: 3px;   
  15. }   
  16.   
  17. input[type="text"]:disabled {   
  18.     background: rgba(0,0,0,.15);   
  19.     border: 1px solid rgba(0,0,0,.15);   
  20.     color: rgba(0,0,0,.15);   
  21. }   
  22. </style>   
  23. <form action="#">   
  24.     <div>   
  25.         <input type="text" name="name" id="name" placeholder="我是可用输入框" />   
  26.     </div>   
  27.     <div>   
  28.         <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />   
  29.     </div>   
  30. </form>  

13. 被选中选择器 :checked

CSS Code复制内容到剪贴板
  1. <style>   
  2.     form {   
  3.       border: 1px solid #ccc;   
  4.       padding: 20px;   
  5.       width: 300px;   
  6.       margin: 30px auto;   
  7.     }   
  8.   
  9.     .wrapper {   
  10.       margin-bottom: 10px;   
  11.     }   
  12.   
  13.     .box {   
  14.       display: inline-block;   
  15.       width: 20px;   
  16.       height: 20px;   
  17.       margin-right: 10px;   
  18.       position: relative;   
  19.       border: 2px solid orange;   
  20.       vertical-align: middle;   
  21.     }   
  22.   
  23.     .box input {   
  24.       opacity: 0;   
  25.       positon: absolute;   
  26.       top:0;   
  27.       left:0;   
  28.     }   
  29.   
  30.     .box span {   
  31.       position: absolute;   
  32.       top: -10px;   
  33.       rightright: 3px;   
  34.       font-size: 30px;   
  35.       font-weight: bold;   
  36.       font-family: Arial;   
  37.       -webkit-transform: rotate(30deg);   
  38.       transform: rotate(30deg);   
  39.       color: orange;   
  40.     }   
  41.   
  42.     input[type="checkbox"] + span {   
  43.       opacity: 0;   
  44.     }   
  45.   
  46.     input[type="checkbox"]:checked + span {   
  47.       opacity: 1;   
  48.     }   
  49. </style>   
  50.   
  51. <form action="#">   
  52.     <div class="wrapper">   
  53.         <div class="box">   
  54.           <input type="checkbox" checked="checked" id="usename" /><span>√</span>   
  55.         </div>   
  56.         <lable for="usename">我是选中状态</lable>   
  57.     </div>   
  58.   
  59.     <div class="wrapper">   
  60.         <div class="box">   
  61.           <input type="checkbox"  id="usepwd" /><span>√</span>   
  62.         </div>   
  63.         <label for="usepwd">我是未选中状态</label>   
  64.     </div>   
  65. </form>  

14. 被鼠标选中, 高亮选择器 ::selection

CSS Code复制内容到剪贴板
  1. <style>   
  2. ::-moz-selection {   
  3.     background: red;   
  4.     color: green;   
  5. }   
  6. ::selection {   
  7.     background: red;   
  8.     color: green;   
  9. }   
  10. </style>   
  11. <p>拿鼠标选中我, 试试看!</p>  

15. 只读选择器 :read-only

CSS Code复制内容到剪贴板
  1. <style>   
  2. form {   
  3.     width: 300px;   
  4.     padding: 10px;   
  5.     border: 1px solid #ccc;   
  6.     margin: 50px auto;   
  7. }   
  8. form > div {   
  9.     margin-bottom: 10px;   
  10. }   
  11.   
  12. input[type="text"]{   
  13.     border: 1px solid orange;   
  14.     padding: 5px;   
  15.     background: #fff;   
  16.     border-radius: 5px;   
  17. }   
  18.   
  19. input[type="text"]:-moz-read-only{   
  20.     border-color: #ccc;   
  21. }   
  22. input[type="text"]:read-only{   
  23.     border-color: #ccc;   
  24. }   
  25. </style>   
  26.   
  27. <form action="#">   
  28.     <div>   
  29.         <label for="name">姓名:</label>   
  30.         <input type="text" name="name" id="name" placeholder="大漠" />   
  31.     </div>   
  32.     <div>   
  33.         <label for="address">地址:</label>   
  34.         <input type="text" name="address" id="address" value="中国上海" readonly />   
  35.     </div>   
  36. </form>  

16. 非只读选择器 :read-write

CSS Code复制内容到剪贴板
  1. <style>   
  2. form {   
  3.     width: 300px;   
  4.     padding: 10px;   
  5.     border: 1px solid #ccc;   
  6.     margin: 50px auto;   
  7. }   
  8. form > div {   
  9.     margin-bottom: 10px;   
  10. }   
  11.   
  12. input[type="text"]{   
  13.     border: 1px solid orange;   
  14.     padding: 5px;   
  15.     background: #fff;   
  16.     border-radius: 5px;   
  17. }   
  18.   
  19. input[type="text"]:-moz-read-only{   
  20.     border-color: #ccc;   
  21. }   
  22. input[type="text"]:read-only{   
  23.     border-color: #ccc;   
  24. }   
  25.   
  26. input[type="text"]:-moz-read-write{   
  27.     border-color: #f36;   
  28. }   
  29. input[type="text"]:read-write{   
  30.     border-color: #f36;   
  31. }   
  32. </style>   
  33.   
  34. <form action="#">   
  35.     <div>   
  36.         <label for="name">姓名:</label>   
  37.         <input type="text" name="name" id="name" placeholder="大漠" />   
  38.     </div>   
  39.     <div>   
  40.         <label for="address">地址:</label>   
  41.         <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />   
  42.     </div>   
  43. </form>  
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

　　利用CSS配合JavaScript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

　　想要打造并拥有一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 　　通过许多实际项目，
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间，但由于它控制参数较多，在实际应用时，为了确定一组合适的参数值，不得不反复调整修改，在编辑窗口和预览窗口来回倒腾，甚是麻烦，本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”，在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程：li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位（position）

　　使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 　　其实，要想控制好层的绝对定位，只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

　　在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。 　　相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

　　水平对齐（text-align），用以设定元素内文本的水平对齐方式。 　　1.语法 　　text-align具体参数如下： 语法：text-align:left|right|center|justify 说明：设定元素内文本的水平对齐方式。 参数：left:左
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22