伪类

最新推荐文章于 2020-09-11 10:35:49 发布

aomize

最新推荐文章于 2020-09-11 10:35:49 发布

阅读量170

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/aomize/article/details/76582246

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css 1中的伪类

:link 未被访问

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        a:link {
            color: #333;
        }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
        <a href="https://www.sogou.com/">搜狗</a>
    </body>
</html>

效果展示如下：

注：所有主流浏览器都支持 :link 选择器

:visited 已被访问

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        a:visited {
            color: #00f;
        }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
        <a href="https://www.sogou.com/">搜狗</a>
    </body>
</html>

效果展示如下：

注：所有主流浏览器都支持 :visited 选择器

:active 选择访问

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        a:active {
            color: #0f0;
        }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
        <a href="https://www.sogou.com/">搜狗</a>
    </body>
</html>

效果展示如下：

这里写图片描述

点击搜狗时，颜色变为绿色

注：所有主流浏览器都支持 :active 选择器

:hover 鼠标经过

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        a:hover {
            color: #00f;
        }
        </style>
    </head>
    <body>
        <a href="www.baidu.com">百度</a>
        <a href="https://www.sogou.com/">搜狗</a>
    </body>
</html>

效果展示如下：

这里写图片描述

当鼠标经过的时候，颜色变为蓝色

注：所有主流浏览器都支持 :hover 选择器

:first-letter 首字母

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        p:first-letter {
            background: #00f;
        }
        </style>
    </head>
    <body>
        <div>
            <p>hello world! </p>
        </div>
    </body>
</html>

效果展示如下：
这里写图片描述

注：所有主流浏览器都支持 :first-letter 选择器

:first-line //首行

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        p:first-line {
            background: #00f;
        }
        </style>
    </head>
    <body>
        <div>
            <p>
                hello world!<br />
                hello web!
            </p>
        </div>
    </body>
</html>

效果展示如下：
这里写图片描述

注：所有主流浏览器都支持 :first-line 选择器

css 2中的伪类

:focus //获得焦点

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        input:focus {
            box-shadow: 1px 1px 8px 1px #006633; 
            border: 1px solid #00f;
        }
        </style>
    </head>
    <body>
        <input type="text" />
    </body>
</html>

效果展示如下：

这里写图片描述

当点击输入框时，输入框出现阴影

注：所有主流浏览器都支持 :focus 选择器。如果 :focus 用于 IE8 ，则必须声明

:first-child 第一个子元素

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        p:first-child {
            background: #00f;
        }
        </style>
    </head>
    <body>
        <div>
            <p>段落一</p>
            <p>段落二</p>
            <p>段落三</p>
        </div>
    </body>
</html>

效果展示如下：
这里写图片描述
注：所有主流浏览器都支持 :first-child 选择器。对于 IE8 及更早版本的浏览器中的 :first-child，必须声明

:before 在元素之前插入内容

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        div:before {
            content: "hello ";
            background: #00f;
        }
        </style>
    </head>
    <body>
        <div>world!</div>
        <div>web!</div>
    </body>
</html>

效果展示如下：
这里写图片描述

注：所有主流浏览器都支持 :before 选择器。对于 IE8 及更早版本中的 :before，必须声明

:after 在元素之后插入内容

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        div:after {
            content: "hello ";
            background: #00f;
        }
        </style>
    </head>
    <body>
        <div>world!</div>
        <div>web!</div>
    </body>
</html>

效果展示如下：
这里写图片描述

注：所有主流浏览器都支持 :after 选择器。对于 IE8 及更早版本中的 :after，必须声明

:lang(language) 以 “language” 开头的 lang 属性

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        p:lang(en) {
            background: #00f;
        }
        </style>
    </head>
    <body>
        <p lang="en">hello world!</p>
        <p>hello web!</p>
    </body>
</html>

效果展示如下：
这里写图片描述

css3中的伪类

:first-of-type

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        p:first-of-type {
            background: #00f;
        }
        </style>
    </head>
    <body>
        <p>hello world!</p>
        <p>hello web!</p>
    </body>
</html>

效果展示如下：

这里写图片描述

注：所有主流浏览器均支持 :first-of-type 选择器，除了 IE8 及更早的版本

:last-of-type //

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        p:last-of-type {
            background: #00f;
        }
        </style>
    </head>
    <body>
        <p>hello world!</p>
        <p>hello web!</p>
    </body>
</html>

效果展示如下：
这里写图片描述

:only-of-type //

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

only-child //唯一子元素

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        p:only-child {
            background: #00f;
        }
        </style>
    </head>
    <body>
        <div>
            <p>hello world!</p>
        </div>
        <div>
            <p>hello</p>
            <p>web!</p>
        </div>
    </body>
</html>

效果展示如下：
这里写图片描述

注：所有主流浏览器均支持 :only-child 选择器，除了 IE8 及更早的版本

:nth-child(n)

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

:nth-last-child(n) //

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

:nth-of-type(n) //

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

:nth-last-of-type(n) //

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

:last-child //最后一个子元素

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        div:last-child {
            background: #00f;
        }
        </style>
    </head>
    <body>
        <div>
            <p>段落一</p>
            <p>段落二</p>
            <p>段落三</p>
        </div>
    </body>
</html>

效果展示如下：
这里写图片描述

:root //根元素

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        :root {
            background: #00f;
        }
        </style>
    </head>
    <body>
        <p>hello world!</p>
        <p>hello web!</p>
    </body>
</html>

效果展示如下：
这里写图片描述

:empty //没有子元素

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

:target //当前活动的目标元素

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

:enabled //启用

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

:disabled //禁用

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

:checked //被选中

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        input:checked {
            font-size: 18px;
        }
        </style>
    </head>
    <body>
        <input type="checkbox" />自动登录
        <input type="checkbox" />忘记密码
    </body>
</html>

效果展示如下：

注意：只有 Opera 支持 :checked 选择器

:not(selector) //非selector元素

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

::selection //被用户选取的元素部分

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

效果展示如下：

（完）

aomize

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪类

伪类:hover //:visited //:active//:first-letter//首字母:first-line //首行:focus//:after//之后插入内容:before//之前插入内容:not(selector)//:checked//:disabled//:enabled//
复制链接

扫一扫

专栏目录