伪类选择器

常用的几种伪类选择器。

伪类选择器一般会用在超链接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. Zabbix--02 自定义监控主机

    目录 一. Zabbix 监控基础架构 二. zabbix 快速监控主机 1.安装zabbix-agent 2.配置zabbix-agent 3.启动zabbix-agent并检查 4.zabbix- ...

  2. Listview四种视图VIEW

    http://wenku.baidu.com/link?url=65Ac8WL6j8KZwDlN8LyoxqFF5Jynvg80LnKc4jqTPQTY-59wwRDKhqGySYwxf6gZ9_6T ...

  3. Codeforces 907 矩阵编号不相邻构造 团操作状压DFS

    A. #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #de ...

  4. java代码实现H5页面

    public void getH5(HttpServletResponse response){ StringBuffer res=new StringBuffer(); res.append(&qu ...

  5. wepy相关

    1.根据官方文档: $ npm install @wepy/cli -g # 全局安装 WePY CLI 工具 $ wepy init standard myproj # 使用 standard 模板 ...

  6. Qt学习笔记-Widget布局管理

    Qt学习笔记4-Widget布局管理       以<C++ GUI Programming with Qt 4, Second Edition>为参考 实例:查找对话框 包含三个文件,f ...

  7. jetSonNano darknet ubdefined reference to 'pow',undefined reference to 'sqrtf'....

    我在用CMakelist编译工程时,遇到了这个一连串基础数学函数找不到的问题,如下图所示: 我当时在工程中明明引用了 #include "math.h"头函数,这是因为你的工程在预 ...

  8. POJ 2456 Aggressive cows ( 二分 && 贪心 )

    题意 : 农夫 John 建造了一座很长的畜栏,它包括N (2 <= N <= 100,000)个隔间,这些小隔间依次编号为x1,...,xN (0 <= xi <= 1e9) ...

  9. 软件安装——internal error2503/2502

    安装新的软件后先报internal error 2503,随后报internal error 2502.就是不让我装新的软件,提示说发生严重错误,然后安装失败. Solution for intern ...

  10. DOS命令里面的EQ、NE、GT、LT、GE、LE分别是什么意思

    EQ 就是 EQUAL等于NQ 就是 NOT EQUAL不等于 GT 就是 GREATER THAN大于 LT 就是 LESS THAN小于 GE 就是 GREATER THAN OR EQUAL 大 ...