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. phpstrom 2016.2 注册服务器地址

    无意中发现的,亲测可用:http://114.215.133.70:41017

  2. 控制流之continue

    continue语句continue语句被用来告诉Python跳过当前循环块中的剩余语句,然后 继续 进行下一轮循环.使用continue语句~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  3. 关于CH340在STM32实现一键下载电路的研究（转）

    源:关于CH340在STM32实现一键下载电路的研究 在做基于STM32的多功能MP3播放器的课题时,在程序下载这部分时借鉴了正点原子开发板上的一键下载电路,采用CH340G这款芯片设计. 在画PCB ...

  4. 微信公众号支付开发全过程 --JAVA

    按照惯例,开头总得写点感想 ------------------------------------------------------------------ 业务流程 这个微信官网说的还是很详细的 ...

  5. LPC2478的GPIO使用详解

    GPIO使用 LPC2478的GPIO是不能断开时钟的,上电就连接.处理GPIO主要就下面几步 1.      设置为普通IO模式 2.      设置输入输出方向 3.      设置值 以下寄存器 ...

  6. Memcached源码分析之memcached.h

    //memcached.h //返回在item中data字段key的地址,即把指针指向key #define ITEM_key(item) (((char*)&((item)->data ...

  7. NewTonJson.Net的使用

    1.引用“Newtonsoft.Json” 4.0 版本 2.基础类 using System; using System.Collections.Generic; using System.Linq ...

  8. 【转】安卓必备Java基础

    [转]http://www.zhihu.com/question/19937886(里面提到的知识点的链接) 1. Java 语言基础 谈到Java 语言基础学习的书籍,大家肯定会推荐Bruce Ec ...

  9. EF的 JOIN操作

    ef join 用法 var customers = DB.Customer.Join(DB.Commission, cst => cst.CommissionId,               ...

  10. jquery中html()或text()方法获取或设置p标签的值

    html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容 html()方法 此方法类似于JavaScript中的innerHTML属性,可 ...