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. Python一个文件调用另外一个文件的方法

    from common.Log import MyLog as Log 写法不完善修改为 import common.Log.MyLog as Log 即可

  2. opencv图片拼接报错cv::Stitcher::ERR_NEED_MORE_IMGS (1)

    #include "opencv2/imgcodecs.hpp" #include "opencv2/highgui.hpp" #include "o ...

  3. 对web标准化（或网站重构）知道哪些相关的知识，简述几条你知道的Web标准？

    网页主要有三部分组成:结构(Structrue).表现(Presentation)和行为(Behavior).对应的网站标准也分为三方面: 1.结构化标准语言,主要包括XHTML和XML: 2.表现标 ...

  4. 日志监控工具安装：windows上安装elk

    Elasticsearch + Kibana + logstash   for     windows   安装 https://blog.csdn.net/u011781521/article/de ...

  5. MySQL忘记root密码--不重启mysqd重置root密码

    先提个问题:如何不重启mysqld,且没有权限修改用户账号和权限的情况下,如何重新设置root密码?不知道没关系,在此之前我也是不知道如何操作的,先看看下面的几种重置root密码的方法. 1.skip ...

  6. docker+Nexus Repository Manager 搭建私有docker仓库

    使用容器安装Nexus3 1.下载nexus3的镜像: docker pull sonatype/nexus3 2.使用镜像启动一个容器: docker run -d -p 8081:8081 -p ...

  7. Tensorflow安装记录

    一.安装Ubantu环境 下载ios 网址:http://cn.ubuntu.com/download/ 2.配合虚拟机进行安装环境 虚拟机直接百度下载即可 虚拟机采用 具体安装,虚拟机百度中很多记录 ...

  8. C#编程基础

    1..NET与C# A..NET 是 Microsoft XML Web services 平台.XML Web services 允许应用程序通过 Internet 进行通讯和共享数据,而不管所采用 ...

  9. JavaScript基础学习2

    /* 1.把函数作为参数.匿名函数作为参数传递到函数 */ function dogEat(food) { console.log("dog eat " + food); } fu ...

  10. Java的HashMap是如何实现的？

    以下内容转自:http://blog.csdn.net/vking_wang/article/details/14166593 1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储 ...