Element:hover

E:hover { sRules }  设置元素在其鼠标悬停时的样式

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            h1 {

                font-size: 16px;

            }

            a,

            div {

                display: block;

                margin-top: 10px;

                padding: 10px;

                border: 1px solid #ddd;

            }

            a:hover {

                display: block;

                background: #ddd;

                color: #f00;

            }

            div:hover {

                background: #ddd;

                color: #f00;

            }

        </style>

    </head>

    <body>

        <h1>请将鼠标分别移动到下面2个元素上</h1>

        <a href="?">我是一个a</a>

        <div>我是一个div</div>

    </body>

</html>

Element:focus

E:focus { sRules }  设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式，webkit内核浏览器会默认给:focus状态的元素加上outline的样式

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            h1 {

                font-size: 16px;

            }

            ul {

                list-style: none;

                margin: 0;

                padding: 0;

            }

            input:focus {

                background: #f6f6f6;

                color: #f60;

                border: 1px solid #f60;

                outline: none;

            }

        </style>

    </head>

    <body>

        <h1>请聚焦到以下输入框</h1>

        <form action="#">

            <ul>

                <li><input value="姓名" /></li>

                <li><input value="单位" /></li>

                <li><input value="年龄" /></li>

                <li><input value="职业" /></li>

            </ul>

        </form>

    </body>

</html>

   Element:checked

E:checked { sRules }  匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            input:checked+span {

                background: #f00;

            }

            input:checked+span:after {

                content: " 我被选中了";

            }

        </style>

    </head>

    <body>

        <form method="post" action="#">

            <fieldset>

                <legend>选中下面的项试试</legend>

                <ul>

                    <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>

                    <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>

                    <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>

                </ul>

            </fieldset>

            <fieldset>

                <legend>选中下面的项试试</legend>

                <ul>

                    <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>

                    <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>

                    <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>

                </ul>

            </fieldset>

        </form>

    </body>

</html>

   Element:enabled和Element:disabled

E:enabled { sRules }  匹配用户界面上处于可用状态的元素E

E:disabled { sRules }  匹配用户界面上处于禁用状态的元素E

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            li {

                padding: 3px;

            }

            input[type="text"]:enabled {

                border: 1px solid #090;

                background: #fff;

                color: #000;

            }

            input[type="text"]:disabled {

                border: 1px solid #ccc;

                background: #eee;

                color: #ccc;

            }

        </style>

    </head>

    <body>

        <form method="post" action="#">

            <fieldset>

                <legend>E:enabled与E:disabled</legend>

                <ul>

                    <li><input type="text" value="可用状态" /></li>

                    <li><input type="text" value="可用状态" /></li>

                    <li><input type="text" value="禁用状态" disabled="disabled" /></li>

                    <li><input type="text" value="禁用状态" disabled="disabled" /></li>

                </ul>

            </fieldset>

        </form>

    </body>

</html>

CSS选择符-----伪类选择符的更多相关文章

  1. CSS Pseudo-Element Selectors伪对象选择符

    一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...

  2. CSS3初学篇章_2（伪类选择符）

    id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...

  3. CSS :hover伪类选择定义和用法

    伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...

  4. 说说ID选择符、类选择符和HTML标记选择符的优先级顺序

    ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如:       p{color:#f ...

  5. CSS Pseudo-classes（伪类）

    CSS Pseudo-classes(伪类) CSS伪类是用来添加一些选择器的特殊效果. 一.语法 伪类的语法: selector:pseudo-class {property:value;} CSS ...

  6. CSS属性、伪类选择器，CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  7. 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素

    CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...

  8. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  9. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

随机推荐

  1. SQL[Err]ORA-00XXX: missing 相关

    1.[Err]ORA-00936: missing expression 造成这个错误的原因是:选取的最后一个字段与from之间有逗号 解决方法:将字段与from之间的逗号去掉. 2.[Err] OR ...

  2. 批处理DOS基础命令

    批处理(Batch),也称为批处理脚本.顾名思义,批处理就是对某对象进行批量的处理.批处理文件的扩展名为bat. 批处理文件,或称为批处理程序,是由一条条的DOS命令组成的普通文本文件,可以用记事本直 ...

  3. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  4. 如何进行Django单元测试

    如何进行Django单元测试 Django的单元测试使用python的unittest模块,这个模块使用基于类的方法来定义测试.类名为django.test.TestCase,继承于python的un ...

  5. IAM：亚马逊访问权限控制

    IAM的策略.用户->服务器(仓库.业务体) IAM:亚马逊访问权限控制(AWS Identity and Access Management )IAM使您能够安全地控制用户对 AWS 服务和资 ...

  6. centos安装Django之二:pip3安装

    前面我们说到了centos安装Django之一:安装openssl,现在我们进入第二阶段pip3安装.两步实现:安装setuptools(pypi),安装pip,下面就和ytkah一起看看配置吧 1. ...

  7. Amazon SQS(Simple Queue Service) 简单介绍

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hongchangfirst/article/details/25877059 SQS即Simple ...

  8. 看大师解说Android高速开发框架EasyAndroid

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010966622/article/details/37601789 前几天做了小应用.感觉小有成就 ...

  9. TCP接收缓存大小的手动调整

    给出了几个可调节的参数,它们可以帮助您提高 Linux TCP/IP 栈的性能. 表 1. TCP/IP 栈性能使用的可调节内核参数 可调节的参数 默认值 选项说明 /proc/sys/net/cor ...

  10. spring——事务管理

    1.spring支持编程式事务管理和声明式事务管理. 编程式事务管理:编程式事务管理使用TransactionTemplate或者直接使用最底层的PlatformTransactionManager. ...