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. elasticsearch-head的安装和使用

    (一) 安装nodeJS, 下载nodejs安装包,直接下一步就可以,运行node -v 和npm -v有如下结果,表示安装成功. (二) 安装git(安装过程略过), 1.git clone git ...

  2. falsk 与 django 过滤器的使用与区别

    1,flask中内置的过滤器模板中常用方法: {#过滤器调用方式{{变量|过滤器名称}} #} <!-- safe过滤器,可以禁用转义 --> {{'<strong>hello ...

  3. Qt获取QObject对应的类名并把它转为真实类型（使用obj->metaObject()->className() ）

    QObject是有窗口类的父类,比如QWidget,QLabel,QPushButton等都直接或间接继承自QObject类.如果把某个窗口中的所有控件都装到一个QList<QObject*&g ...

  4. ajax 上传文件，显示进度条，进度条100%，进度条隐藏，出现卡顿就隐藏进度条，显示正在加载，再显示上传完成

    <form id="uploadForm" method="post" enctype="multipart/form-data"&g ...

  5. GBDT原理学习

    首先推荐 刘建平 的博客学习算法原理推导,这位老师的讲解都很详细,不过GBDT的原理讲解我没看明白, 而是1.先看的https://blog.csdn.net/zpalyq110/article/de ...

  6. C# Asp.net使用FormData对象实现ajax提交表单及上传图片

    1.html代码: <form id="postForm"> 文件名:<input type="text" name="filena ...

  7. 10.3-uC/OS-III内部任务管理（TCB）

    任务控制块 TCB 1.任务控制块是被uC/OS-III用于维护任务的一个结构体.每个任务都必须有自己的 TCB. uC/OS-III 在 RAM 中分配 TCB.当调用uC/OS-III提供的与任务 ...

  8. QPS、PV 、RT（响应时间）之间的关系

    QPS.PV .RT(响应时间)之间的关系 在进行系统性能压测和系统性能优化的时候,会涉及到QPS,PV,RT相关的概念,本文总结一下QPS,PV,RT之间的关系,放在博客备忘,本文参考了之前在淘宝工 ...

  9. SVN服务的模式和多种访问方式 多种访问原理图解与优缺点

    SVN企业应用场景 SVN任是当前企业的主流.git正在发展,未来会成为主流.如果大家精力足够,建议同时掌握. 1.4运维人员掌握版本管理 对于版本管理系统,运维人员需要掌握的技术点: 1.安装.部署 ...

  10. 用A标签实现页面内容定位 点击链接跳到具体位置

    经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了.实例参考微信营销理论手册的目录. 首先用A标签定义目录的链接. & ...