zoukankan      html  css  js  c++  java
  • css伪类选择器

    什么是伪类选择器?

    伪类选择器用来表示元素的一种特殊样式。
    比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框。
    当我们需要为处于这些特殊状态的元素设置状态时,就可以使用伪类。

    伪类链接:link和visited

    link:为没有访问过的链接设置一个颜色为红色需要用到伪类选择器a:link{}。link普通链接的意思。
    visited:为访问过的链接设置一个颜色为红色需要用a:visited{}。visited表示访问过的链接。因为隐私问题在大多浏览器里面只能设置颜色。

    如下所示:

    <style type="text/css">
    a:link{color: yellowgreen;}
    a:visited{color: red;}

    </style>
    </head>
    <body>

    <a href="http://www.baidu.com">我是一个超链接</a>
    <a href="http://www.baidu123456.com">我是一个超链接</a>

    </body>
    </html>

    访问过的链接会显示红色没有访问过的则为绿色。

    伪类链接:hover

    hover表示鼠标移入链接时,链接所表示的状态!

    如下所示:

    <style type="text/css">
    a:link{color: yellowgreen;}
    a:visited{color: red;}
    a:hover{color: skyblue;}
    </style>
    </head>
    <body>

    <a href="http://www.baidu.com">我是一个超链接</a>
    <a href="http://www.baidu123456.com">我是一个超链接</a>

    </body>

    鼠标放第一个上去链接,链接就成蓝色!

    伪类链接:active

    active表示链接被点击的状态

    如下所示

    <head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
    a:link{color: yellowgreen;}
    a:visited{color: red;}
    a:hover{color: skyblue;}
    a:active{color: black;}
    </style>
    </head>
    <body>

    <a href="http://www.baidu.com">我是一个超链接</a>
    <a href="http://www.baidu123456.com">我是一个超链接</a>

    </body>
    </html>

    鼠标点击到第一个链接上面,链接就会变成黑色。

    伪类链接:focus

    focus获取焦点以后,修改背景颜色为黄色

    如下所示

    <head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
    a:link{color: yellowgreen;}
    a:visited{color: red;}
    a:hover{color: skyblue;}
    a:active{color: black;}
    input:focus{background-color: yellow;}
    </style>
    </head>
    <body>

    <a href="http://www.baidu.com">我是一个超链接</a>
    <a href="http://www.baidu123456.com">我是一个超链接</a>
    <input type="text" name="">

    </body>

    伪类链接::selection

    ::selection为p标签中选中的内容使用样式

    如下所示

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
    a:link{color: yellowgreen;}
    a:visited{color: red;}
    a:hover{color: skyblue;}
    a:active{color: black;}
    input:focus{background-color: yellow;}
    p::selection{background-color: yellow;}
    </style>
    </head>
    <body>

    <a href="http://www.baidu.com">我是一个超链接</a>
    <a href="http://www.baidu123456.com">我是一个超链接</a>
    <input type="text" name="">
    <p>为p标签中选中的内容使用样式</p>

    </body>
    </html>

    被选中的p标签背景颜色为黄色

    上面一些就是经常遇到的一些伪类标签!

     

  • 相关阅读:
    bind函数
    尾置返回类型
    lambda表达式
    C++谓词
    capacity和size
    容器操作可能会使迭代器失效
    特殊的forward_list操作
    向顺序容器添加元素
    swap与assign
    迭代器
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11312586.html
Copyright © 2011-2022 走看看