在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. [zz]谱聚类

    了凡春秋USTC 谱聚类 http://chunqiu.blog.ustc.edu.cn/?p=505 最近忙着写文章,好久不写博客了.最近看到一个聚类方法--谱聚类,号称现代聚类方法,看到它简洁的公 ...

  2. 如何在 Delphi 中静态链接 SQLite

    搞了我几个小时,终于成功在 Delphi 中静态链接了 SQLite (v3.5.4),下一步就是研究加密了,呵呵中间其实遇到很多问题,今天累了,就不说了,改天补上 下载测试工程 下面说说方法 1.当 ...

  3. laravel/lumen 单元测试

    Testing Introduction Application Testing Interacting With Your Application Testing JSON APIs Session ...

  4. [经验交流] Kubernetes Nginx Ingress 安装与使用

    Ingress 介绍 Kubernetes 上部署的微服务运行在它的私有网络中, 通过Pod实例的hostPort或Service实例的NodePort可以暴露到主机端口上,便于用户访问.但这样的方法 ...

  5. storm基础系列之一----storm并发度概念剖析

    前言: 学了几天storm的基础,发现如果有hadoop基础,再理解起概念来,容易的多.不过,涉及到一些独有的东西,如调度,如并发度,还是很麻烦.那么,从这一篇开始,力争清晰的梳理这些知识. 在正式学 ...

  6. js加解密

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. mvc ajax提交数组参数(转)

    http://blog.csdn.net/lonestar555/article/details/10192595/ 在action中的参数以数组方式接收数据 一.表单方式 1.提交Form < ...

  8. jQuery-表单流程导航

    前言:以前做过一个项目,里面牵涉到流程相关的业务,需要用到流程页面导航的效果,完整的工作流相关的项目以前也做过,需要用到第三方插件,当然这里记录的业务需求没这个麻烦,仅仅需要能有一个页面导航的标题栏, ...

  9. HandlerThread和IntentService

    HandlerThread 为什么要使用HandlerThread? 我们经常使用的Handler来处理消息,其中使用Looper来对消息队列进行轮询,并且默认是发生在主线程中,这可能会引起UI线程的 ...

  10. 【SSM 5】Mybatis分页插件的使用

    一.添加maven依赖项 <span style="font-family:KaiTi_GB2312;font-size:18px;"><dependency&g ...