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

　　1.hover、focus、active 和 checked

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css3选择器</title>

    <style type="text/css">

        input[type="text"]:hover{/*鼠标滑过时*/

            background-color: pink;

        }

        input[type="text"]:focus{/*选中时*/

            background-color: lightblue;

        }

        input[type="text"]:active{/*鼠标按住时*/

            background-color: yellowgreen;

        }

        input[type="checkbox"]:checked{/*选中时*/

            outline: 2px solid gold;

        }

    </style>

</head>

<body>

    <input type="text" name="name">

    <input type="text" name="age">

    <br/>

    <input type="checkbox">阅读

    <input type="checkbox">旅游

    <input type="checkbox">上网

</body>

</html>

2.enabled 和 disabled

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css3选择器</title>

    <style type="text/css">

        input[type="text"]:enabled{

            background-color: gold;

        }

        input[type="text"]:disabled{

            background-color: grey;

        }

    </style>

    <script type="text/javascript">

        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>

</head>

<body>

    <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>

3.通用兄弟元素选择器

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css3选择器</title>

    <style type="text/css">

        div ~ p{

            background-color: pink;

        }

    </style>

</head>

<body>

    <div>

        <div>

            <p>p元素为div的子元素</p>

            <p>p元素为div的子元素</p>

            <p>p元素为div的子元素</p>

            <p>p元素为div的子元素</p>

        </div>

        <p>p元素为div的兄弟元素</p>

        <p>p元素为div的兄弟元素</p>

        <p>p元素为div的兄弟元素</p>

        <p>p元素为div的兄弟元素</p>

    </div>

</body>

</html>

效果：


CSS3常用选择器（三）的更多相关文章

  1. CSS3常用选择器（一）

    在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在c ...

  2. CSS3常用选择器

    一.基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father > Children)兼容性:IE8+.FireFox.Chrome.S ...

  3. CSS3常用选择器（二）

    本文继续介绍css3新增的选择器. 1.选择器 first-child.last-child.nth-child 和 nth-last-child 利用这几个选择器能够针对一个父元素中的第一个子元素. ...

  4. CSS3 常用选择器

    p:last-of-type{background-color: red;} 选择p中最后一项 p:nth-of-type(2n){background-color: red;} 隔行变色里面也可以填 ...

  5. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  6. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  7. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  8. 01-css的引入方式和常用选择器

    一.css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  9. CSS3选择器02—CSS3部分选择器

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...

随机推荐

  1. sqlserver 对字符串的SUM

    select id,keyword ,max(Confidence) as confidence, TimeRange=stuff((select ','+rtrim(begintime)+'-'+r ...

  2. rails下自动更新静态文件的gem包

    https://github.com/guard/guard-livereload gemfile group :development do gem 'guard-livereload', '~&g ...

  3. hive与hbase整合过程

    实现目标 Hive可以实时查询Hbase中的数据. hive中的表插入数据会同步更新到hbase对应的表中. 可以将hbase中不同的表中的列通过 left 或 inner join 方式映射到hiv ...

  4. git reset revert 回退回滚取消提交返回上一版本

    git reset revert 回退回滚取消提交返回上一版本 总有一天你会遇到下面的问题. (1)改完代码匆忙提交,上线发现有问题,怎么办? 赶紧回滚. (2)改完代码测试也没有问题,但是上线发现你 ...

  5. linux下tomcat的安装和配置

    安装前要求: 1. 安装java环境. 2. 配置java环境变量 开始了: 1. 在官网下载tomcat:http://tomcat.apache.org/ 2. linux环境选择.zip或者.t ...

  6. Wampserver2.5配置虚拟主机出现403 Forbidden的处理方案

    WampServer是一款由法国人开发的Apache Web服务器.PHP解释器以 及MySQL数据库的整合软件包.免去了开发人员将时间花费在繁琐的配置环境过程,从而腾出更多精力去做开发.在windo ...

  7. asp.net webform 中使用Microsoft ASP.NET Web Optimization压缩js及css

    使用静态资源压缩可以合并静态资源文件减少客户端请求数量,压缩文件大小,减少网络流量的损耗. 注:只有通过web.config关闭调试功能,压缩才会生效 <system.web> <c ...

  8. ArcGIS Engine渲染

    符号化之Renderer( 渲染)体系 ArcGIS Engine9.3对GIS数据的符号化分为矢量数据渲染和栅格数据渲染两大类.接下来分别介绍FeatureRender和RasterRender. ...

  9. Linux文件权限

    Permission deny 权限 拒绝   查看权限 ls -a ls -la expression 查看文件夹里边东西的权限   用户群的分类 组群:一个操作系统可能几个人同时用 方便小组的文件 ...

  10. Python基础篇【第5篇】: Python内置模块(二)

    内置模块 1. OS os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell ...