后端码农谈前端(CSS篇)第四课:选择器补充(伪类与伪元素)
一、伪类:
属性 | 描述 |
:active | 向被激活的元素添加样式。 |
:focus | 向拥有键盘输入焦点的元素添加样式。 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 |
:link | 向未被访问的链接添加样式。 |
:visited | 向已被访问的链接添加样式。 |
:first-child | 向元素的第一个子元素添加样式。 |
:lang | 向带有指定 lang 属性的元素添加样式。 |
例如:
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
二、伪元素:
属性 | 描述 |
:first-letter | 向文本的第一个字母添加特殊样式。 |
:first-line | 向文本的首行添加特殊样式。 |
:before | 在元素之前添加内容。 |
:after | 在元素之后添加内容。 |
例如:使用"first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
后端码农谈前端(CSS篇)第四课:选择器补充(伪类与伪元素)的更多相关文章
- 后端码农谈前端(CSS篇)第三课:选择器
一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...
- 后端码农谈前端(CSS篇)第二课:CSS的5个来源
0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...
- 后端码农谈前端(CSS篇)第八课:继承与层叠
一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属 ...
- 后端码农谈前端(CSS篇)第七课:定位与浮动
一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...
- 后端码农谈前端(CSS篇)第六课:盒子模型
元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边 ...
- 后端码农谈前端(CSS篇)第五课:CSS样式
一.背景: CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 1.背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 例如: ...
- 后端码农谈前端(CSS篇)第一课:CSS概述
一.从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可 ...
- 后端码农谈前端(HTML篇)第三课:常见属性
一.HTML全局属性 1.核心属性 属性 描述 id 设置元素的唯一 id. class 设置元素的一个或多个类名(引用样式表中的类). style 设置元素的行内样式(CSS内联样式). title ...
- 后端码农谈前端(HTML篇)第二课:常见元素
一.根元素 <doctype> 定义文档类型. <html> 定义 HTML 文档. 二.元数据元素 <head> 定义关于文档的信息. <meta> ...
随机推荐
- python socket server源码学习
原文请见:http://www.cnblogs.com/wupeiqi/articles/5040823.html 这里就是自己简单整理一下: #!/usr/bin/env python # -*- ...
- toad的基本操作
1.把鼠标停在sql所在行,然后ctrl+Enter直接执行当前sql. 2.解决Toad对中文显示乱码问题(如果数据库所在主机的NLS_LANG是AMERICAN_AMERICA.WE8ISO885 ...
- runtime记录
前言: 最初对于runtime的了解其实只停留在,知道这是一组C的方法,知道消息机制中会把方法调用转成objc_msgSend(theObject,@selector(objectMethod)).随 ...
- 利用html5 canvas实现纯前端上传图片的裁剪
今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...
- iOS网络基础知识
iOS网络基础知识 1.一次HTTP请求的完整过程 (1)浏览器或应用发起Http请求,请求包含Http请求Http(请求),地址(url),协议(Http1.1)请求为头部 (2)web服务器接收到 ...
- bat运行时不弹出那个黑框框的完美解决方案
批处理文件运行时经常出现讨厌的黑框,以下的方法,即可以解决 保存为run.vbs运行即可: set ws = createobject("wscript.shell") ws. ...
- 你好,欢迎来到我的博客,我是博主royalmice
你好,欢迎来到我的博客,我是博主royalmice
- 使用Inno Setup函数修改文件内容
0.inno打开文件操作&字符串操作所需函数原型及解释 function LoadStringsFromFile(const FileName: String; var S: TArrayOf ...
- 灰色预测原理及JAVA实现
最近在做项目时,用户不想使用平均值来判断当前数据状态,想用其他的方式来分析数据的变化状态,在查找了一些资料后,想使用灰色预测来进行数据的预测.下面的内容是从网上综合下来的,java代码也做了一点改动, ...
- [.NET领域驱动设计实战系列]专题三:前期准备之规约模式(Specification Pattern)
一.前言 在专题二中已经应用DDD和SOA的思想简单构建了一个网上书店的网站,接下来的专题中将会对该网站补充更多的DDD的内容.本专题作为一个准备专题,因为在后面一个专题中将会网上书店中的仓储实现引入 ...