伪类选择器

常用的几种伪类选择器。

伪类选择器一般会用在超链接a标签中

没有访问的超链接a标签样式：

a:link {

  color: blue;

}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box ul li.item1 a:link{

            color: red;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li class="item1">

                <a href="#">jack</a>

            </li>

            <li class="item2">

                <a href="#">ben</a>

            </li>

            <li class="item3">

                <a href="#">peter</a>

            </li>

        </ul>

    </div>

</body>

</html>

访问过的超链接a标签样式：

a:visited {

  color: gray;

}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box ul li.item1 a:visited{

            color: green;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li class="item1">

                <a href="#">jack</a>

            </li>

            <li class="item2">

                <a href="#">ben</a>

            </li>

            <li class="item3">

                <a href="#">peter</a>

            </li>

        </ul>

    </div>

</body>

</html>

点击jack字体， jack字体变成绿色

鼠标悬停时在元素上应用样式

a:hover {

  background-color: #eee;

}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box ul li.item1 a:hover{

            color: green;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li class="item1">

                <a href="#">jack</a>

            </li>

            <li class="item2">

                <a href="#">ben</a>

            </li>

            <li class="item3">

                <a href="#">peter</a>

            </li>

        </ul>

    </div>

</body>

</html>

鼠标悬停时在 a标签jack上面 jack字体马上变成绿色

鼠标点住瞬间的样式：

a:active {

  color: green;

}

鼠标点住CSS样式改变，鼠标一放手就恢复原来的CSS样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .box ul li.item1 a:active{

            color: red;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li class="item1">

                <a href="#">jack</a>

            </li>

            <li class="item2">

                <a href="#">ben</a>

            </li>

            <li class="item3">

                <a href="#">peter</a>

            </li>

        </ul>

    </div>

</body>

</html>

前端 CSS的选择器 伪类选择器的更多相关文章

  1. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  2. CSS属性、伪类选择器，CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  3. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  4. 前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类

    a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...

  5. CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法

    一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...

  6. CSS选择器之伪类选择器（元素）

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  7. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  8. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  9. CSS选择器之伪类选择器（交互）

    :link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...

随机推荐

  1. string遍历

    #include <iostream>#include <string> using namespace std;int main(int argc, const char * ...

  2. word2007导出pdf带书签

    1.关闭所有word文档 2.下载Word_2007_SaveAsPDFandXPS_12.0_XiaZaiBa.exe安装 3.如果出错请重启PC

  3. 【GDOI2014模拟】雨天的尾巴

    题目 深绘里一直很讨厌雨天. 灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切. 虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了几座老房子,几棵老树被连 根拔起,以及田地里 ...

  4. 6392. 【NOIP2019模拟2019.10.26】僵尸

    题目描述 题解 吼题但题解怎么这么迷 考虑一种和题解不同的做法(理解) 先把僵尸离散化,h相同的钦(ying)点一个大小 (可以发现这样每种情况只会被算正好一次) 计算完全被占领的方案,然后1-方案/ ...

  5. 如何解决DEDE织梦友情链接字数限制与链接个数限制的问题?

    如何解决DEDE织梦友情链接字数限制与链接个数限制的问题!织梦网站非常适合网站搭建以及网站优化,而友情链接是做优化必不可少的模块,我们经常搭建织梦网站发现织梦系统的友情链接模板有时候会限制字数不显示以 ...

  6. Flink Batch SQL 1.10 实践

    Flink作为流批统一的计算框架,在1.10中完成了大量batch相关的增强与改进.1.10可以说是第一个成熟的生产可用的Flink Batch SQL版本,它一扫之前Dataset的羸弱,从功能和性 ...

  7. .Net手动实现ORM及代码生自动成器

    序言 代码生成器 同时提供便捷的开发管理功能和多项开发工作中常用到的辅助工具功能,您可以很方便轻松地进行项目开发,让软件开发变得轻松而快乐!帮您快速开发项目,缩短开发周期,减少开发成本,大大提高了企业 ...

  8. ASCII 、UTF-8、Unicode编码

    1.各种编码的由来 1.1.计算机编码的由来 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.所以只能是用一些数字来表示文本,这就是编码的由来.最早的计算机在设计时采用8个比 ...

  9. luogu 5468 [NOI2019]回家路线 最短路/暴力

    想写一个 70 pts 算法,结果数据水,直接就切了 最短路: // luogu-judger-enable-o2 #include<bits/stdc++.h> using namesp ...

  10. POJ 1363 Rails（栈）

    题目代号:POJ 1363 题目链接:http://poj.org/problem?id=1363 题目原题: Rails Time Limit: 1000MS   Memory Limit: 100 ...