Html学习之十（CSS选择器的使用--伪类选择器）
伪类选择器
一、基于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选择器的使用--伪类选择器）的更多相关文章
- js进阶 10-10 可见伪类选择器和内容伪类选择器的作用
js进阶 10-10 可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是 四个 包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...
- CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- 用HTML写伪类选择器，结构伪类选择器，伪元素选择器样式
html,css lorem乱序铭文 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil? Lorem ...
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
随机推荐
- Linux系统学习 三、网络基础—虚拟机网络配置
Linux网络基础 Linux的ip地址配置 Linux网络配置文件 常用网络命令 虚拟机网络参数配置 1.配置Linux的IP地址 首先配置一个IP地址,让IP生效. ifconfig查看当前网络配 ...
- Linux下磁盘实战操作命令
企业真实场景由于硬盘常年大量读写,经常会出现坏盘,需要更换硬盘.或者由于磁盘空间不足,需添加新硬盘,新添加的硬盘需要经过格式化.分区才能被 Linux 系统所使用. 虚拟机 CentOS 7 Linu ...
- keepass可以在浏览器中使用吗？
KeePass不提供浏览器扩展,因此当您访问登录页面时,它不会弹出并提示您.您可以将登录信息从KeePass复制粘贴到网页上的相应框中,甚至可以使用拖放操作将用户名和密码移至上方,但这不是最方便的解决 ...
- 科研画图：散点连接并平滑（基于Matlab和Python）
导师要求参照别人论文中的图(下图),将其论文中的图画美观些,网上关于科研画图相关的代码比较少,就自己鼓捣了下. 附上自己整合验证过的代码: 功能:将散点连接并平滑 1)Matlab 效果图: x1=[ ...
- 洛谷 P3373 【模板】线段树 2
洛谷 P3373 [模板]线段树 2 洛谷传送门 题目描述 如题,已知一个数列,你需要进行下面三种操作: 将某区间每一个数乘上 xx 将某区间每一个数加上 xx 求出某区间每一个数的和 输入格式 第一 ...
- linux五天光速入门
第一章: 01 Linux的安装及相关配置 → B站视频链接(p1-p21) 02 UNIX和Linux操作系统概述 → B站视频链接 第二章: 01 Linux命令及获取帮助 → B站视 ...
- 第04组 Alpha冲刺（4/4）
队名:斗地组 组长博客:地址 作业博客:Alpha冲刺(4/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.分配展示任务 2.收集各个组员的进度 3.写博客 展示GitHub当日代码/文 ...
- Paper | Residual Attention Network for Image Classification
目录 1. 相关工作 2. Residual Attention Network 2.1 Attention残差学习 2.2 自上而下和自下而上 2.3 正则化Attention 最近看了些关于att ...
- Python连载6-time包函数简介
一.接连载5中time模块 1.函数:altzone (1)含义:获取当前时间与UTC时间相差的秒数,再有夏令时的情况下. (2)格式:time.altzone 2.函数:daylight (1)含义 ...
- MySQL变量介绍和用法简介
目录 一.用户变量 1.1.用户变量定义 1.2.用户变量用法 二.系统变量 2.1 系统变量简单介绍 2.2 系统变量用法简介 本博客介绍一下MySQL中变量的用法和注意细节 @ 一.用户变量 1. ...