伪类选择器

一、基于a标签。

1、:hover　　选择鼠标滑过的超链接元素

2、:active　　选择鼠标单击中的超链接元素

3、:link　　选择未被访问的超链接元素

4、:visited　　选择已经被访问过的超链接元素

二、基于input标签。

1、:focus　　表示某个input元素被选中的情况。

2、:enable　　启用input元素

3、:disable　　禁用input元素

三、:before和:after伪类选择器

1.:before　　在一个元素之前添加一个元素

2.:after　　在一个元素之后添加一个元素

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>链接伪类</title>

        <style type="text/css">

            a:link,a:visited{                  /*未访问和访问后*/

                color:pink;

                text-decoration:none;         /*清除超链接默认的下划线*/

            }

            a:hover{                             /*鼠标悬停*/

                color:blue;

                text-decoration:underline;  /*鼠标悬停时出现下划线*/

            }

            a:active{ color:#F00;}            /*鼠标点击不动*/

        </style>

    </head>

    <body>

        <a href="#">公司首页</a>

        <a href="#">公司简介</a>

        <a href="#">产品介绍</a>

        <a href="#">联系我们</a>

    </body>

</html>
<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>before选择器的使用</title>

        <style type="text/css">

            p:before{

                 content:"传智播客";

                 color:#c06;

                 font-size: 20px;

                 font-family: "微软雅黑";

                 font-weight: bold;

            }

        </style>

    </head>

    <body>

        <p>专注于Java、.Net、PHP、网页设计和平面设计、IOS、C++工程师的培养，提供的免费视频教程是目前

        覆盖面最广，项目最真实的视频教程之一。</p>

    </body>

</html>

结果：

Html学习之十（CSS选择器的使用--伪类选择器）的更多相关文章

  1. js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

    js进阶 10-10  可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是  四个  包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...

  2. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  3. 用HTML写伪类选择器，结构伪类选择器，伪元素选择器样式

    html,css lorem乱序铭文 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil? Lorem ...

  4. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  6. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  7. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

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

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

  9. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

随机推荐

  1. Django—版本和环境的搭建

    1.安装 virtualenv virtualenvwrapper [root@localhost ~]# pip install virtualenv virtualenvwrapper 2.查找 ...

  2. Linux—chattr 命令详解

    chattr命令的用法:chattr [ -RV ] [ -v version ] [ mode ] files…最关键的是[mode]部分,[mode]部分是由+-=和[ASacDdIijsTtu] ...

  3. CodeForces - 1263E（线段树维护前缀和最值）

    题意 https://vjudge.net/problem/CodeForces-1263E 您要设计一个只有一行的打字机,这一行的长度是无限大,一开始可以认为每个字符都是空.您的打字机有一个光标只指 ...

  4. React 创建一个自动跟新时间的组件

    componentDidMount声明周期函数 表示组件渲染完成后 componentWillUnmount声明周期函数 组件将要卸载 通常用于(为了防止内存泄漏 清除定时器) 11==>创建组 ...

  5. 201871010113-刘兴瑞《面向对象程序设计（java）》第十一周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>htt ...

  6. 最近公共祖先（LCA）基础模板(倍增法)

    之前在澡堂学过这么个东西,听课时理解非常透彻,然后做题时是这种状态: 因为并没有切板子题,最近切掉以后看同桌,他默默地说了一句话: 我是什么时候A的来着... 我当时就心态爆炸... 现在来进行简单整 ...

  7. python 学习（day1）

    初识python python的创始人为吉多*范罗苏姆(Guido van Rossum).1989年圣诞节期间,开发出来的脚本解释程序. python是⼀⻔什么样的语言 python 是一门解释型语 ...

  8. IT兄弟连 Java语法教程 数组 多维数组 二维数组的初始化

    二维数组的初始化与一位数组初始化类似,同样可以使用静态初始化或动态初始化. 1)静态初始化 静态初始化的格式如下: 数组名字 = new 数组元素的类型[][]{new 数组元素的类型[]{元素1,元 ...

  9. SpringBoot系列之配置文件加载位置

    SpringBoot系列之配置文件加载位置 SpringBoot启动会自动扫描如下位置的application.properties或者application.yml文件作为Springboot的默认 ...

  10. laravel中使用FormRequest进行表单验证，验证异常返回JSON

    通常在项目中,我们会对大量的前端提交过来的表单进行验证,如果不通过,则返回错误信息. 前端为了更好的体验,都使用ajax进行表单提交,虽然 validate() 方法能够根据前端的不同请求方式,返回不 ...