1、UI元素状态伪类选择器

在CSS3的选择器中，除了结构性伪类选择器外，还有一种UI元素伪类选择器。这些选择器的共同特征是：指定的样式只有当元素处于某种状态时才起作用，在默认状态下不起作用。在CSS3中，共有17种UI元素伪类选择器，分别是：

E:hover, E:active, E:focus, E:disabled, E:read-only, E:checked, E:default, E:indeterminate, E:selection, E:invalid, E: valid, E:required, E:optional, E:in-range

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <!--hover、focus、active-->
     <style>
         /*鼠标经过时，输入框会变成如下颜色*/
         input[type="text"]:hover{
             background-color: red;
         }
         /*鼠标点击过后，会变成如下颜色*/
         input[type="text"]:focus{
             background-color: gold;
         }
         /*鼠标按下，会变成如下颜色*/
         input[type="text"]:active{
             background-color: green;
         }

         /*选中checkbox后，checkbox会有黄色边框*/
         input[type="checkbox"]:checked{
             outline: 2px solid gold;
         }
     </style>
 </head>
 <body>
     <input type="text" name="name">
     <input type="text" name="age">

     <input type="checkbox">阅读
     <input type="checkbox">旅游
     <input type="checkbox">电影
     <input type="checkbox">上午
 </body>
 </html>

enabled和disable选择器的例子：

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <!--enabled,disabled-->
     <style>
         /*可用的状态为金色，不可用的状态为灰色*/
         input[type="text"]:enabled{
             background-color: gold;
         }
         input[type="text"]:disabled{
             background-color: gray;
         }
     </style>
 </head>
 <body>
     <script>
         function radio_change(){
             var radio1 = document.getElementById("radio1");
             var radio2 = document.getElementById("radio2");
             var text=document.getElementById("text");
             if(radio1.checked){
                 text.disabled="";
             }else {
                 text.value = "";
                 text.disabled = "disabled";
             }
         }
     </script>
     <input type="radio" id="radio1" name="radio" onchange="radio_change()">可用
     <input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用
     <input type="text" id="text" disabled>
 </body>
 </html>

2、通用兄弟元素选择器　　

通用兄弟元素选择器，用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

div~p：表示div和P元素位于同一个父元素，为这个div之后的p元素，指定样式

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         /*下面指的是子级中的div元素~把与他相邻的P元素，指定为黄色*/
         div~p{
             background-color: gold;
         }
     </style>
 </head>
 <body>
     <div>
         <div>
             <p>P元素为div的子元素</p>
             <p>P元素为div的子元素</p>
             <p>P元素为div的子元素</p>
         </div>
         <!--以下的P元素，相对上面的div元素，是兄弟的关系-->
         <p>P元素为div的子元素</p>
         <p>P元素为div的子元素</p>
         <p>P元素为div的子元素</p>
     </div>
 </body>
 </html>

[CSS3] 学习笔记-选择器详解（三）的更多相关文章

  1. [CSS3] 学习笔记-选择器详解（二）

    1.选择器first-child.last-child.nth-child和nth-last-child 利用first-child.last-child.nth-child和nth-last-chi ...

  2. CSS3 基础(1)——选择器详解

    CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 ...

  3. Angular6 学习笔记——路由详解

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  4. Angular6 学习笔记——组件详解之组件通讯

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  5. Angular6 学习笔记——组件详解之模板语法

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  6. JavaScript学习笔记-实例详解-类（一）

    实例详解-类(一): //每个javascript函数(除了bind())都自动拥有一个prototype对象// 在未添加属性或重写prototype对象之前,它只包含唯一一个不可枚举属性const ...

  7. Android学习笔记-Dialog详解

    1.对话框的使用 1.1AlertDialog的显示 简单对话框以及监听的设置:重点掌握三个按钮(也就是三上单词): PositiveButton(确认按钮);NeutralButton(忽略按钮) ...

  8. JavaScript学习笔记-实例详解-类（二）

    实例详解-类(二)   //===给Object.prototype添加只读\不可枚举\不可配置的属性objectId(function(){ Object.defineProperty(Object ...

  9. 【转载】自定义View学习笔记之详解onMeasure

    网上对自定义View总结的文章都很多,但是自己还是写一篇,好记性不如多敲字! 其实自定义View就是三大流程,onMeasure.onLayout.onDraw.看名字就知道,onMeasure是用来 ...

随机推荐

  1. php中serialize、unserialize与json_encode、json_decode比较

    性能比较 同一个变量编码或解码10000次,每个函数执行10000次所需时间 php5.2.13 json : 190 serialize : 257 json_encode : 0.08364200 ...

  2. Android非常实用的开源项目框架

    我将文章中所描述的项目都集成在一个apk中,可以直接运行查看效果,2.2以上的机器都可以运行.因为不让直接上传apk文件,我压缩成了zip包 1. Universal-Image-Loader 实现异 ...

  3. iBATIS 3 试用手记 - The FUTURE - ITeye技术网站

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  4. Java 的Object类

    1.toString()是Objectde的方法,如果不重写,直接输出对象或者用对象调用toString()输出是会输出包名.类名@对象哈希码的无符号十六进制表示 子类如果重写了这个方法,可以隐式调用 ...

  5. iOS开发之监听键盘高度的变化

    最近做的项目中,有一个类似微博中的评论转发功能,屏幕底端有一个输入框用textView来做,当textView成为第一响应者的时候它的Y值随着键盘高度的改变而改变,保证textView紧贴着键盘,但又 ...

  6. windows server 2012 AD 活动目录部署系列（五）备份和还原域控制器

    在前篇博文中,我们介绍了用户资源的权限分配,用户只要在登录时输入一次口令,就能访问基于该域所分配给他的所有资源. 但是我们需要考虑一个问题:万一域控制器坏了怎么办?!如果这个域控制器损坏了,那用户登录 ...

  7. 以太网数据包、IP包、TCP/UDP 包的结构（转）

    源:以太网数据包.IP包.TCP/UDP 包的结构 版本号(Version):长度4比特.标识目前采用的IP协议的版本号.一般的值为0100(IPv4),0110(IPv6). IP包头长度(Head ...

  8. STM32-USB详细使用说明（转）

    源:STM32-USB详细使用说明 附件HID的双向通信 亮点STM32开发板充实了USBHID数据发送和接收例程(STM32固件库3.5 USB库3.4)

  9. 64脚和小于64脚的STM32进行AD时注意，参照电源处理方法（转）

    源:64脚和小于64脚的STM32进行AD时注意,参照电源处理方法 请注意,ADC_IN17上没有内部基准,将其说成基准电压概念不对. 所以横线以下的理解不对,如果将其做为参考,则其电压假定按1.2V ...

  10. MVC分页控件的使用

    1. 引用 using Webdiyer.WebControls.Mvc; 2. using Webdiyer.WebControls.Mvc; ) { )); } 3.数据来源 public cla ...