【a标签的伪元素的应用——link，hover，visited，active】的更多相关文章

转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色 单个颜色实现 hover 和 active 时的明暗变化效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…

a标签的伪元素的应用——link，hover，visited，active

a标签应用中,一般有四个状态: 鼠标未移入前(link),鼠标移入时(hover), 鼠标点击时(active),鼠标点击后(visited). <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-sca…

css 伪类: 1)a:link , a:visited, a:hover, a:active 2):first-child

1. 链接伪类: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类</title> <style type="text/css"> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /*…

转载 【CSS进阶】伪元素的妙用--单标签之美

1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 3.增强用户体验,使用伪元素实现增大点击热区.适合用在点击区域较小的移动端,PC端看上去是…

【CSS进阶】伪元素的妙用--单标签之美

最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看).采用单标签完成各种图案,许多图案与本文有关. 也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 . 正文从这里开始,本文主要讲述一下 伪元素 before 和 after 各种妙用.    :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和…

关于css中伪类及伪元素的总结

css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落的第一行"."文章首字母"之类的选择器,而这在一些出版场景里又是必须的,这一情况下出现的.引用标准中的话: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting…

前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用CSS2.1也可以用CSS3.XHTML骨架中可以用CSS3的样式. 在学习CSS之前都是学习选择器,在CSS2中有class.id.标签选择器等. CSS3赋予了强大的选择器. CSS3没有颠覆传统CSS的写法,依然是: 选择器{ k:v; k:v; } CSS有一个特点,遇见自己不认识的选择器.…

常用伪元素及content属性值的使用

1.常用伪元素有 after.before,使用方法,如下 a:after{ display:block; content:''; } 2. content: "/\00a0";//表示斜杆 3. a标签的四个伪类: link /* 未被访问的链接 */ visited  /* 已被访问的链接 */ hover /* 鼠标指针移动到链接上 */ active /* 正在被点击的链接 */----------------------可用于其他标签 4.伪元素有六个,分别是 ::after…

css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在某个元素之前插入一些内容: ::after/:after 在某个元素之后插入一些内容: ::first-letter/:first-letter 为某个元素中的文字的首字母或第一个字使用样式: ::first-line/:first-line 为某个元素的第一行文字使用样式: ::selection…

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文章: [CSS进阶]伪元素的妙用–单标签之美,看完本文觉得有意思的可以再去看看上一篇,分享了一些伪元素的妙用. 正文从这里开始: 哪些标签不支持伪元素? 我也是才知道这个姿势.为了不误导读者,就赶紧补充一下. 伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的.…