• 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标签背景颜色为黄色

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

     

  • 相关阅读:
    Leetcode#104. Maximum Depth of Binary Tree(二叉树的最大深度)
    Leetcode#70. Climbing Stairs(爬楼梯)
    Leetcode#88. Merge Sorted Array(合并两个有序数组)
    美团2019秋招后台开发编程题题解
    Leetcode#191. Number of 1 Bits(位1的个数)
    Leetcode#461. Hamming Distance(汉明距离)
    Leetcode#13. Roman to Integer(罗马数字转整数)
    Leetcode#521. Longest Uncommon Subsequence I(最长特殊序列 Ⅰ)
    Leetcode#557. Reverse Words in a String III(反转字符串中的单词 III)
    带你剖析WebGis的世界奥秘----瓦片式加载地图
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11312586.html
Copyright © 2020-2023  润新知