在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. Rails 4.0 移除了 XML 参数解析器。若要使用请加入 actionpack-xml_parser

    拜读了用 Rails 搭建微信公众平台 API之后发现, params[:xml]这个办法在Rails 4里面已经被办掉了,于是就看了一下Rails 4的新特性发现XML Parameter pars ...

  2. [综] Latent Dirichlet Allocation(LDA)主题模型算法

    多项分布 http://szjc.math168.com/book/ebookdetail.aspx?cateid=1&&sectionid=983 二项分布和多项分布 http:// ...

  3. 一款好用且免费的语句分析工具Plan Explorer

    在调优过程中的查询语句优化阶段,分析语句的执行计划是必经之路,一款好的执行计划分析工具确实可以帮助我们事半功倍 小贴士:Plan Explorer是将Plan Explorer 专业版与免费版整合在一 ...

  4. 基础14_转义字符和特殊字符ASCII

    一.摘要 PSQL转义字符 二.PLSQL转义字符 PLSQL对应的字符和序号关系 二.PLSQL特殊字符 PLSQL对应的字符和序号关系 1. 转义字符为' '; )||'%'; --A&B ...

  5. Python基础（二）之模块

    模块:人们写好的一系列用于实现某种功能的代码封装起来,需要使用的时候直接调用即可. 模块分类:标准模块.第三方模块 标准模块:不需要安装,直接调用即可 第三方模块:需要安装后才可使用 注意:自己创建的 ...

  6. udacity google deep learning 学习笔记

    1.为什么要在卷积网络中加入pooling(池化) 如果只利用卷积操作来减少feature map的大小,会失去很多信息.所以想到一种方法,减小卷积时的stride,留下大部分信息,通过池化来减小fe ...

  7. 在线开发工具helper

    发现一个很有用的在线工具大全:http://tool.lu/ 同时,欢迎查看新开i云轩工作室: logo在线制作:http://www.uugai.com/

  8. Android屏幕适配全攻略 (转载)

    http://blog.csdn.net/jdsjlzx/article/details/45891551 https://github.com/hongyangAndroid/AndroidAuto ...

  9. 因为此控件已在 web.config 中注册并且与该页位于同一个目录中

    在web.config文件配置了用户控件 <pages> <controls> <add tagPrefix="my" tagName="l ...

  10. [转]windows 短文件名/短路径名规则

    How Windows Generates 8.3 File Names from Long File Names Windows generates short file names from lo ...