伪类选择器

一、基于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. optix之纹理使用

    1.在OpenGL中生成纹理texture optix中的纹理直接使用OpenGL纹理的id,不能跨越OpenGL纹理,所以我们先在OpenGL环境下生成一张纹理. 这个过程就很熟悉了: void W ...

  2. Codeforces Round #586 (Div. 1 + Div. 2)

    传送门 A. Cards 记录一下出现的个数就行. Code #include <bits/stdc++.h> #define MP make_pair #define fi first ...

  3. 2019 SDN上机第5次作业

    2019 SDN上机第5次作业 1.浏览RYU官网学习RYU控制器的安装和RYU开发入门教程,提交你对于教程代码的理解,包括但不限于: 描述官方教程实现了一个什么样的交换机功能? 答:官方教程实现了一 ...

  4. hdu6464 线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=6464 题意 一个空序列,q次操作,一种是往序列后插入x个y,另一种是查询序列中第x小到第y小的数字之和 题解 线 ...

  5. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) E. Arson In Berland Forest 二分 前缀和

    E. Arson In Berland Forest The Berland Forest can be represented as an infinite cell plane. Every ce ...

  6. Codeforces Round #599 (Div. 1) A. Tile Painting 数论

    C. Tile Painting Ujan has been lazy lately, but now has decided to bring his yard to good shape. Fir ...

  7. 前端优化,包括css,jss,img,cookie

    前端优化,来自某懒观看麦子学院视频的笔记. 尽可能减少HTTP的请求数 使用CDN 添加Expirs头,或者Cache-control Gzip组件压缩文件内容 将CSS放在页面上方 将脚本放到页面下 ...

  8. Java13 闪亮来袭,你是否还停留在 Java8

    近期 Java 界好消息频传.先是 Java 13 发布,接着 Eclipse 也发布了新版本表示支持新版本的 Java 特性. 本文介绍了 Java 13 的新特性并展示了相关的示例. 2019 年 ...

  9. IT兄弟连 Java语法教程 算符运算符

    Java提供了丰富的运算符环境.可以将大部分Java运算符划分为4组:算术运算符.位运算符.关系运算符以及逻辑运算符.Java还定义了一些用于处理某些特定情况的附加运算符.本章将介绍除类型比较运算符i ...

  10. 为何我建议1-3年的Java程序员仔细看看这篇文章

    此文的目的是为了督促自己去不断学习,让自己有更明确的方向去提升自己.以技能树为基础,以面试要点为大纲,我觉得比抓住什么看什么要更有目的,更能坚持下去.世界瞬息万变,我们要时刻准备着.时刻提高着自己,才 ...