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处理多表查询时的SQL语句拆分与重新组装

    在自己写框架时候会发现,多表查询组装SQL语句<?php $pre = "pre_"; $aid = "44"; $data = array(" ...

  2. 将Web项目访问的URL项目名设置为"/"

    工具:Eclipse 步骤: 1.鼠标右键项目名--->properties--->Web Project Setting--->Context root. 将Context roo ...

  3. mysql trouble shooting---- 从库停止同步lock_wait_timeout_exceeded_try_restarting_transaction

    问题描述: 数据库从库停止同步. 问题分析: show slave status\G;(也可使用show full processlist) 显示 某个update语句出错,Lock wait tim ...

  4. spring 自动化构建项目

    STS 3.7.0.RELEASE http://spring.io/tools/sts/legacy

  5. 10天学会phpWeChat——第八天：Form类，丰富表单提交的字段类型

    通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中, ...

  6. LoadLibrary失败的原因（转）

    背影: 今天终于把公司的SDK 动态链接库转为Java 可调用的JNI 格式.DLL的编译环境是VS2010,使用Debug 输出时调用正常,而用Release 输出却调用失败.这可把哥搞惨了,开始以 ...

  7. MI & CI

    目前,很多特征选择文献主要是依据对共信息的直观认识使用它,即:正值表示表型的存在使特征间依赖程度增加,是特征间存在相互作用的证据:负值表示表型的存在使特征间冗余性增加:零表示特征是相互独立的,或者说, ...

  8. 各种浏览器开启JavaScript脚本方法

    各种浏览器开启JavaScript脚本方法 随着网站设计技术的发展,为了用户友好体验,大部分网站使用了JavaScript脚本设计,如果您的浏览器禁用或关闭的JavaScript支持,那么可能造成网站 ...

  9. Angular - - $q 承诺与延迟

    $q 一个帮助处理异步执行函数的服务.当他们做完处理时,使用它们的返回值(或异常). 受 Kris Kowa’s Q 的启发,这是一个实现promise/deferred对象的启用. $q的两种方式- ...

  10. Delphi流的操作

    一.流的概念 流简单说是建立在面向对象基础上的一种抽象的处理数据的工具,它定义了一些处理数据的基本操作,如读取数据,写入数据等,程序员只需掌握对流进行操作,而不用关心流的另一头数据的真正流向.其实,流 ...