在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. Python入门4

    函数 函数其实在日常的编码过程中,你都在使用,比如print().input().len()等函数,只不过这些都是python给你写好的内置函数,供你是用,内置的函数数量有限,想让python为我们做 ...

  2. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

  3. Hibernate5.2关联关系之单向多对一(二)

    Hibernate5.2之单向一对多(二) 一. 简介 在本篇博文中笔者会在上一篇博客的代码基础上进行修改,本篇文章将介绍单向的一对多. 二. hbm文件的方式 Customer.hbm.xml &l ...

  4. HDU 1789 Doing Homework again(贪心)

    Doing Homework again 这只是一道简单的贪心,但想不到的话,真的好难,我就想不到,最后还是看的题解 [题目链接]Doing Homework again [题目类型]贪心 & ...

  5. 总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。（转）

    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie-->< ...

  6. 每天一个 Linux 命令（18）：locate 命令

    locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...

  7. webkit.net 浏览器开发

    webkit.net 浏览器开发: http://www.cnblogs.com/linyijia/p/4045333.html

  8. [python实现设计模式]-2.模板方法模式---把大象关进冰箱.

    平时大家上班都很累,为了增加工作中的欢乐气氛,黄页组准备搞个游戏. 游戏的名字是把大象关进冰箱.游戏很简单,需要把指定的物品放进冰箱. 我们都知道,把大象放进冰箱,分3步. 第一步,打开冰箱门,第二步 ...

  9. 安装MySQL5.7

    安装方式:绿色安装(使用压缩文件) 文件版本:MySQL Community Server 5.7.13(x86 &x64) 大部分过程同<安装MySQL5.5>,本篇只写不同部分 ...

  10. 常用的.Net 知识点

    1.Replace C#:(using System.Text.RegularExpressions;) string txt = Regex.Replace(txtLog.Text.ToString ...