CSS选择符-----伪类选择符

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选择符-----伪类选择符的更多相关文章

CSS Pseudo-Element Selectors伪对象选择符
一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...
CSS3初学篇章_2（伪类选择符）
id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...
CSS :hover伪类选择定义和用法
伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...
说说ID选择符、类选择符和HTML标记选择符的优先级顺序
ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如: p{color:#f ...
CSS Pseudo-classes（伪类）
CSS Pseudo-classes(伪类) CSS伪类是用来添加一些选择器的特殊效果. 一.语法伪类的语法: selector:pseudo-class {property:value;} CSS ...
CSS属性、伪类选择器，CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素
CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中静态定位的元素不会受到top,bottom,left,right影 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
#8.10.16总结# 属性选择符伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

随机推荐

PSU/OPATCH/OJVM下载页面及安装方式(最实用版)
中文版:数据库 PSU,SPU(CPU),Bundle Patches 和 Patchsets 补丁号码快速参考 (文档 ID 1922396.1) Download Reference for Or ...
Struts2中.properties文件放置路径(classpath)
一.web应用的classpath简介 classpath路径,即WEB-INF下面的classes目录,所有src目录下面的java.xml.properties等文件编译后都会在此. Stru ...
easyui中多级表头，主表头不能添加field字段，否则不居中
<th field="" width="120" align="center" align="center" co ...
vue关于html页面id设置问题
vue是一个前端框架,类似于angularJS等,vue在编写的时候需要在html页面指定id,但是不是都可以实现的,一般放在id需在div设置里才可以实现. (一) 在html里设置id: < ...
Spring 测试
1. pom.xml ==> Depency  <dependency> <groupId>junit</groupId> ...
tensorflow入门笔记（五） name_scope和variable_scope
一.上下文管理器(context manager) 上下文管理器是实现了上下文协议的对象,主要用于资源的获取与释放.上下文协议包括__enter__.__exit__,简单说就是,具备__enter_ ...
一步步搭建 Spring Boot maven 框架的工程
摘要:让Spring应用从配置到运行更加快速,演示DIY Spring Boot 框架时,如何配置端口号,如何添加日志. Spring Boot 框架帮助开发者更容易地创建基于Spring的应用程序和 ...
批量增删改"_bulk"
除了delete以外,每个操作需要两个json字符串,语法如下:{"action":{"metadata"}}{"data"}bulk ap ...
前端HTML目录
前端 HTML 简介前端 HTML文档结构介绍前端 HTML文档详解前端 HTML 注释前端 HTML标签介绍前端 HTML的规范前端 HTML 常用标签 head标签相关内容前端 H ...
yarn client中的一个BUG的修复
org.apache.spark.deploy.yarn.Client.scala中的monitorApplication方法: /** * Report the state of an applic ...