在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. 【转】STM32中的抢占优先级、响应优先级概念

    STM32(Cortex-M3)中有两个优先级的概念--抢占式优先级和响应优先级,有人把响应优先级称作'亚优先级'或'副优先级',每个中断源都需要被指定这两种优先级. 具有高抢占式优先级的中断可以在具 ...

  2. 循环写入Insert 与 SqlBulkcopy

    /* Insert by Loop */ cmd.CommandText = "insert into BizSharedStore (BizSharedStoreId,BizSharedI ...

  3. module

    扯淡的人 http://www.cnblogs.com/yuanchenqi/articles/5732581.html 不被调用的    要写在这下面 1 if __name__=="__ ...

  4. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  5. 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序

    1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...

  6. 01-C#入门（函数一）

    只有在动手写代码的时候,才能真正理解到代码的逻辑思想,所以,开始写代码吧. 函数的意义:降低相同功能的代码重复编写,提高重复代码的维护效率. 函数 一个文件由命令空间(namespace).类(cla ...

  7. apache配置Allow详解及25个常见问题

    http://www.cnblogs.com/top5/archive/2009/09/22/1571709.html apache常见25个问题:http://blog.csdn.net/keda8 ...

  8. 转来的emacs配置文件，自动安装插件

    网上转来的emacs配置文件,便于自动安装插件,收藏起来 http://www.gogae.org/post-7/ EMACS是一个伪装成代码编辑器的操作系统. EMACS是一个非常强大的代码编辑器, ...

  9. Mono登录界面记住密码的控件

    <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_co ...

  10. C++11引用临时变量的终极解析

    工作中遇到一个引用临时变量的问题,经过两天的学习,私以为:不仅弄明白了这个问题,还有些自己的独到见解. 这里使用一个简单的例子来把自己的学习过程和理解献给大家,如果有什么问题请不吝指正.   **** ...