• E：enabled伪类选择器和E：disabled伪类选择器

E:enabled伪类选择器用来指定元素处于可用状态的样式。

E:disabled伪类选择器用来指定当元素处于不可用状态时的样式。

当一个表单中的元素经常在可用状态与不可用状态之间进行切换的时候，通常会将E:disabled伪类选择器与E:enabled伪类选择器结合使用，用E:disabled伪类选择器来设置该元素处于不可用状态时的样式，用E:enabled选择器来设置该元素处于可用状态的样式。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>E:disabled伪类选择器与E:enabled伪类选择器结合使用示例</title>
  6.     <style>
  7.         input[type="text"]:enabled {
  8.             background-color: yellow;
  9.         }
  10.  
  11.         input[type="text"]:disabled {
  12.             background-color: purple;
  13.         }
  14.     </style>
  15.     <script>
  16.         function radio_onchange(){
  17.             var radio=document.getElementById("radio1");
  18.             var text=document.getElementById("text1");
  19.             if(radio.checked){
  20.                 text.disabled="";
  21.             }else{
  22.                 text.value="";
  23.                 text.disabled="disabled";
  24.             }
  25.         }
  26.     </script>
  27. </head>
  28. <body>
  29. <form>
  30.    <input type="radio" id="radio1" name="radio" onchange="radio_onchange()"/>可用
  31.     <input type="radio" id="radio2" name="radio" onchange="radio_onchange()"/>不可用
  32.     <br/>
  33.     <input type="text" id="text1" disabled/>
  34. </form>
  35. </body>
  36. </html>
  • E:checked、E:default和E:indeterminate

E:checked伪类选择器用来指定当前表单中的radio单选框或checkbox复选框处于选取状态时的样式。例如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>E:checked伪类选择器使用示例</title>
  6.     <style>
  7.         input[type="checkbox"]:checked {
  8.             outline: 2px solid blue;
  9.         }
  10.  
  11.         input[type="checkbox"]:-moz-checked {
  12.             outline:2px solid blue;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <form>
  18.   兴趣：<input type="checkbox"/>阅读
  19.     <input type="checkbox"/>旅游
  20.     <input type="checkbox"/>看电影
  21.     <input type="checkbox"/>上网
  22. </form>
  23. </body>

E:default选择器用来指定当前页面打开时默认处于选取状态的单选或复选框控件的样式。注意：即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效。例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>E:default选择器的使用示例</title>
  6.     <style>
  7.         input[type="checkbox"]:default {
  8.             outline: 2px solid blue;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <form>
  14.   兴趣：<input type="checkbox" checked/>阅读
  15.     <input type="checkbox"/>旅游
  16.     <input type="checkbox"/>看电影
  17.     <input type="checkbox"/>上网
  18. </form>
  19. </body>
  20. </html>

E:infeterminate伪类选择器用来指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定，到目前为止，只有Opera浏览器对这个选择器提供支持。

  • E::selection伪类选择器

E::selection伪类选择器用来指定当前元素处于选择状态时的样式。例子如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>E::selection伪类选择器使用示例</title>
  6.     <style>
  7.         p::selection{
  8.             background: red;
  9.             color: #ffffff;
  10.         }
  11.         p::-moz-selection{
  12.             background: red;
  13.             color:#ffffff;
  14.         }
  15.         input[type="text"]::selection{
  16.             background: gray;
  17.             color:#ffffff;
  18.         }
  19.         input[type="text"]::-moz-selection{
  20.             background: gray;
  21.             color: #ffffff;
  22.         }
  23.         td::selection{
  24.             background:green;
  25.             color: #ffffff;
  26.         }
  27.         td::-moz-selection{
  28.             background: green;
  29.             color:#ffffff;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <p>这是一段测试文字</p>
  35. <input type="text" value="这是一段测试文字。"/>
  36. <table border="1" cellspacing="0" cellpadding="0">
  37.     <tr>
  38.         <td>测试文字</td>
  39.         <td>测试文字</td>
  40.     </tr>
  41.     <tr>
  42.         <td>测试文字</td>
  43.         <td>测试文字</td>
  44.     </tr>
  45. </table>
  46. </body>
  47. </html>
  • 通用兄弟元素选择器

它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，它的使用方法如下：

<子元素>-<子元素之后的同级兄弟元素>{

//指定样式

}

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>通用兄弟元素选择器E-F</title>
  6. </head>
  7. <body>
  8. <div style="width: 733px;border: 1px solid #666;padding:5px">
  9.     <div>
  10.         <p>p元素为div元素的子元素</p>
  11.         <p>p元素为div元素的子元素</p>
  12.     </div>
  13.     <hr/>
  14.     <p>p元素为div元素的兄弟元素</p>
  15.     <p>p元素为div元素的兄弟元素</p>
  16.     <hr/>
  17.     <p>p元素为div元素的兄弟元素</p>
  18.     <hr/>
  19.     <div>p元素为div元素的子元素</div>
  20.     <hr/>
  21.     <p>p元素为div元素的兄弟元素</p>
  22. </div>
  23. </body>
  24. </html>

CSS3学习系列之选择器（三）的更多相关文章

  1. css3学习系列之选择器（一）

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  2. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  3. CSS3学习系列之选择器（四）

    使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...

  4. css3学习总结1--CSS3选择器

    CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...

  5. [CSS3] 学习笔记-CSS选择器

    CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...

  6. CSS3学习系列之字体

    给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...

  7. CSS3学习系列之盒样式（二）

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  8. CSS3学习系列之背景相关样式（二）

    在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...

  9. CSS3学习系列之动画

    Transitions功能使用方法 在css3中,transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能,可通过transitions属性来使用t ...

随机推荐

  1. 为linux安装xen-tools提示/dev/xvdd does not exist

    看样子百度还是不如google啊.百度上找到的信息完全无用.google上却给我找到了... 1:当/dev/xvdd does not exist错误出现时,可以尝试下 mount /dev/cdr ...

  2. bzoj4800 [Ceoi2015]Ice Hockey World Championship

    Description 有n个物品,m块钱,给定每个物品的价格,求买物品的方案数. Input 第一行两个数n,m代表物品数量及钱数 第二行n个数,代表每个物品的价格 n<=40,m<=1 ...

  3. Ubuntu16.04安装opencv for python/c++

    Ubuntu16.04安装opencv for python/c++ 网上关于opencv的安装已经有了不少资料,但是没有一篇资料能让我一次性安装成功,因此花费了大量时间去解决各种意外,希望这篇能给一 ...

  4. iOS 使用 UIMenuController 且不隐藏键盘的方法

    iOS 使用 UIMenuController 且不隐藏键盘的方法 在键盘显示的时候使用 UIMenuController 弹出菜单,保持键盘显示且可输入的状态. 实现方法有 修改响应链(推荐) 遵循 ...

  5. es6英文文档翻译

    ECMA-262英文文档翻译,github地址: https://github.com/zhoushengmufc/es6 ECMA-262英文文档翻译,在线地址: http://zhoushengf ...

  6. Ajax理解总结

    前端开发拿数据页面实时更新是离不开Ajax这个技术的 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建 ...

  7. vue视频学习笔记07

    video 7 vue问题:论坛http://bbs.zhinengshe.com------------------------------------------------UI组件别人提供好一堆 ...

  8. IO多路复用深入浅出

    前言 从零单排高性能问题,这次轮到异步通信了.这个领域入门有点难,需要了解UNIX五种IO模型和 TCP协议,熟练使用三大异步通信框架:Netty.NodeJS.Tornado.目前所有标榜异步的通信 ...

  9. 【wannacry病毒之暗网】-如何访问"暗网"（慎入）

    心里能力不强的人,请别看. 有些事情还是不要接触比较好, 社会最恶一面不是随随便便就能接触到的, 也不是你能理解的 你想要用暗网做什么是你考虑的一个问题 什么是暗网? 所谓的"暗网" ...

  10. 安卓TextView限定行数最大值，点击按钮显示所有内容

    问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...