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. iOS开发——应用图标上显示消息数量

    iOS8以前: UIApplication *app = [UIApplication sharedApplication]; app.applicationIconBadgeNumber = num ...

  2. java web系统优化, mysql查询优化

    1. 采用数据库连接池技术 2. 优化sql语句格式, 比如用PreparedStatement代替Statement, 前者避免重复编译, 后者每次都需要对数据库进行解析编译, 降低数据库的访问效率 ...

  3. Android线程之基本用法

    一: 在android中有两种实现线程thread的方法: 一种是,扩展java.lang.Thread类 另一种是,实现Runnable接口 二: Thread类代表线程类,它的两个最主要的方法是: ...

  4. CentOS6.x升级MySQL版本5.1到5.6

    CentOS6.x升级MySQL版本5.1到5.6 分类: Web MySQL 2014-08-04 11:22 2813人阅读 评论(1) 收藏 举报 mysql云服务器升级centos6 有一些虚 ...

  5. MySQL临时表与派生表(简略版)

    MySQL临时表与派生表 当主查询中包含派生表,或者当select 语句中包含union字句,或者当select语句中包含一个字段的order by 子句(对另一个字段的group by 子句)时,M ...

  6. TLD视觉跟踪算法（转）

    源:TLD视觉跟踪算法 TLD算法好牛逼一个,这里有个视频,是作者展示算法的效果,http://www.56.com/u83/v_NTk3Mzc1NTI.html.下面这个csdn博客里有人做的相关总 ...

  7. iOS开发笔记 - 界面调试神器Reveal

    http://blog.csdn.net/jackfrued/article/details/50934092     Reveal是iOS开发工具中的神器之一,它能够在应用程序运行过程中调试应用程序 ...

  8. RabbitMQ消息队列（九）：Publisher的消息确认机制

    在前面的文章中提到了queue和consumer之间的消息确认机制:通过设置ack.那么Publisher能不到知道他post的Message有没有到达queue,甚至更近一步,是否被某个Consum ...

  9. java名词解释，让你更好理解

    Java 开发工具包 (JDK) Java开发工具包是Java环境的核心组件,并提供编译.调试和运行一个Java程序所需的所有工具,可执行文件和二进制文件.JDK是一个平台特定的软件,有针对Windo ...

  10. eclipse中集成svn maven开发手册---maven编译打包

    使用eclipse中maven进行打包. 打好的包在相应的workspace下面会有一个release的文件夹,如图