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

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.      <!--hover、focus、active-->
  7.      <style>
  8.          /*鼠标经过时，输入框会变成如下颜色*/
  9.          input[type="text"]:hover{
  10.              background-color: red;
  11.          }
  12.          /*鼠标点击过后，会变成如下颜色*/
  13.          input[type="text"]:focus{
  14.              background-color: gold;
  15.          }
  16.          /*鼠标按下，会变成如下颜色*/
  17.          input[type="text"]:active{
  18.              background-color: green;
  19.          }
  20.  
  21.          /*选中checkbox后，checkbox会有黄色边框*/
  22.          input[type="checkbox"]:checked{
  23.              outline: 2px solid gold;
  24.          }
  25.      </style>
  26.  </head>
  27.  <body>
  28.      <input type="text" name="name">
  29.      <input type="text" name="age">
  30.  
  31.      <input type="checkbox">阅读
  32.      <input type="checkbox">旅游
  33.      <input type="checkbox">电影
  34.      <input type="checkbox">上午
  35.  </body>
  36.  </html>

enabled和disable选择器的例子：

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.      <!--enabled,disabled-->
  7.      <style>
  8.          /*可用的状态为金色，不可用的状态为灰色*/
  9.          input[type="text"]:enabled{
  10.              background-color: gold;
  11.          }
  12.          input[type="text"]:disabled{
  13.              background-color: gray;
  14.          }
  15.      </style>
  16.  </head>
  17.  <body>
  18.      <script>
  19.          function radio_change(){
  20.              var radio1 = document.getElementById("radio1");
  21.              var radio2 = document.getElementById("radio2");
  22.              var text=document.getElementById("text");
  23.              if(radio1.checked){
  24.                  text.disabled="";
  25.              }else {
  26.                  text.value = "";
  27.                  text.disabled = "disabled";
  28.              }
  29.          }
  30.      </script>
  31.      <input type="radio" id="radio1" name="radio" onchange="radio_change()">可用
  32.      <input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用
  33.      <input type="text" id="text" disabled>
  34.  </body>
  35.  </html>

2、通用兄弟元素选择器　　

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

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

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.      <style>
  7.          /*下面指的是子级中的div元素~把与他相邻的P元素，指定为黄色*/
  8.          div~p{
  9.              background-color: gold;
  10.          }
  11.      </style>
  12.  </head>
  13.  <body>
  14.      <div>
  15.          <div>
  16.              <p>P元素为div的子元素</p>
  17.              <p>P元素为div的子元素</p>
  18.              <p>P元素为div的子元素</p>
  19.          </div>
  20.          <!--以下的P元素，相对上面的div元素，是兄弟的关系-->
  21.          <p>P元素为div的子元素</p>
  22.          <p>P元素为div的子元素</p>
  23.          <p>P元素为div的子元素</p>
  24.      </div>
  25.  </body>
  26.  </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. JAV基础语法之---数据类型转换

    数制转换": 1.string 转 byte[] String str = "Hello";byte[] srtbyte = str.getBytes(); 2.byte ...

  2. ZOJ 3940 Modulo Query

    0--M对某个数字取模,相当于把0--M区间进行切割,每次暴力切割一下.结果的算的时候二分一下即可... 看了官方题解才会... #include<cstdio> #include< ...

  3. JMS连接WMQ及收发消息

    因为对JMS的了解也只算入门级,有些概念也很模糊,不过,卤煮会尽可能去介绍的.另外,sample code都调试过可以跑. 1.神马是JMS? jms即Java消息服务(Java Message Se ...

  4. MongoDB 3.0 WiredTiger Compression and Performance

    MongoDB3.0中的压缩选项 在MongoDB 3.0中,WiredTiger为集合提供三个压缩选项: 无压缩 Snappy(默认启用) – 很不错的压缩,有效利用资源 zlib(类似gzip) ...

  5. PHP的几种排序算法的比较

    这里列出了几种PHP的排序算法的时间比较的结果,,希望对大家有所帮助 /* * php 四种排序算法的时间与内置的sort排序比较 * 3000个元素,四种算法的排序所用的时间比较 * 冒泡排序 85 ...

  6. Vue.js实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 })

  7. HIDKomponente使用读写Hid设备（转）

    源:HIDKomponente使用读写Hid设备一瞥 HIDKomponente 是delphi中使用的第三方Hid控件库,可以检测.控制连接到电脑的Hid设备.一般情况下多为usb设备. HIDKo ...

  8. [转载] python利用psutil遍历进程名字和exe所在目录

    本文转载自: http://www.duanzhihe.com/1594.html http://www.jianshu.com/p/64e265f663f6 import psutil,os,tim ...

  9. css（四）-- 盒子模型和定位

    盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离. 盒子模型主要是用于操作内边距(padding)与外边距(mar ...

  10. Python3基础 使用id() 查询变量的存储位置

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...