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

时间：2022-03-16 04:42:12

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初学篇章&lowbar;2（伪类选择符）

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

  3. CSS &colon;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 定位&amp&semi;浮动&amp&semi;水平对齐&amp&semi;组合选择符&amp&semi;伪类&amp&semi;伪元素

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

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

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

  9. &num;8&period;10&period;16总结&num; 属性选择符 伪对象选择符 CSS的常用样式

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

随机推荐

  1. Django~automated tests

    def xx(): 冒号下一行要缩进 ATD http://blog.csdn.net/doupei2006/article/details/7657547 http://www.jb51.net/a ...

  2. Correspondence &sol; ˏkɔris&&num;39&semi;pɔndәns &sol; dictionary10-800&period;doc

    I have taken courses in office administration, typing,reports and correspondence writing. Correspond ...

  3. BZOJ1367 &lbrack;Baltic2004&rsqb;sequence

    现学的左偏树...这可是道可并堆的好题目. 首先我们考虑z不减的情况: 我们发现对于一个区间[l, r],里面是递增的,则对于此区间最优解为z[i] = t[i]: 如果里面是递减的,z[l] = z ...

  4. Django admin的一些有用定制

    Model实例,myapp/models.py: from django.db import models class Blog(models.Model): name = models.CharFi ...

  5. gson使用详解

    昨天读一篇文章,看到gson这个词,一开始还以为作者写错了,问了度娘之后才发现是我才疏学浅,于是大概了解了一下gson用法,总体来说还是很简单的. Gson.jar下载 JavaBean转json / ...

  6. 开启&sol;关闭ubuntu防火墙

    LInux原始的防火墙工具iptables由于过于繁琐,所以ubuntu系统默认提供了一个基于iptable之上的防火墙工具ufw.而UFW支持图形界面操作,只需在命令行运行ufw命令即能看到一系列的 ...

  7. block为什么要用copy，runtime的简单使用

    分享一篇文章:link

  8. Android 查看通讯录Contacts是否发生变化

    目的:确定通讯录是否发生变化 根据:參见ContactsContract.RawContacts类中的VERSION常量,该值是仅仅读的,当通讯录发生变化时,都会使该值变化 方法:version值是相 ...

  9. NLog使用整理

    NLog使用中碰到的问题整理 1,日志写mysql数据库报错, 原因: 在sql语句中使用了mysql的函数now() 导致插入失败, 解决办法: 使用参数代替now(). 在nlog配置文件中设置  ...

  10. IDEA2017及DataGrip2017注册码

    访问http://idea.lanyus.com/,网页中有相关说明,最简单的方式是将“0.0.0.0 account.jetbrains.com”添加到hosts文件中,然后点击页面底部的“获得注册 ...

相关文章