一、伪类:

属性 描述
: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篇)第四课:选择器补充(伪类与伪元素)的更多相关文章

  1. 后端码农谈前端(CSS篇)第三课:选择器

    一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...

  2. 后端码农谈前端(CSS篇)第二课:CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  3. 后端码农谈前端(CSS篇)第八课:继承与层叠

    一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属 ...

  4. 后端码农谈前端(CSS篇)第七课:定位与浮动

    一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...

  5. 后端码农谈前端(CSS篇)第六课:盒子模型

    元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边 ...

  6. 后端码农谈前端(CSS篇)第五课:CSS样式

    一.背景: CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 1.背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 例如: ...

  7. 后端码农谈前端(CSS篇)第一课:CSS概述

    一.从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可 ...

  8. 后端码农谈前端(HTML篇)第三课:常见属性

    一.HTML全局属性 1.核心属性 属性 描述 id 设置元素的唯一 id. class 设置元素的一个或多个类名(引用样式表中的类). style 设置元素的行内样式(CSS内联样式). title ...

  9. 后端码农谈前端(HTML篇)第二课:常见元素

    一.根元素 <doctype> 定义文档类型. <html> 定义 HTML 文档. 二.元数据元素 <head> 定义关于文档的信息. <meta> ...

随机推荐

  1. &lt;canvas&gt;设置宽高遇到的问题

    在使用<canvas>元素时必须设置宽度和高度,指定可以绘画的区域大小.但是这里设置宽度和高度的时候有一个小问题. 样例代码: <!DOCTYPE html> <html ...

  2. 跨平台的WatiForSingleObject实现

    移植win32程序时,有一个难点就是涉及到内核对象的操作,需要模拟win32的实现. 其中比较奇葩的一个是WaitForSingleObject系列. Linux中没有类似的timeout实现,模拟这 ...

  3. jquery 让指定导航隐藏

    $(function(){ var aLink=$('.nav-content .nav li a'); // 选中所有a var aText=['星网服务','在线搭配','星网学院','推客联盟' ...

  4. 异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.

    出现这个异常说明了跳转页面的url无对应的值. 原因1: Application启动类的位置不对.要将Application类放在最外侧,即包含所有子包 原因:spring-boot会自动加载启动类所 ...

  5. ABP官方文档翻译 3.8 数据过滤器

    数据过滤器 介绍 预定义过滤器 ISoftDelete 何时使用? IMustHaveTenant 何时使用? IMayHaveTenant 何时使用 禁用过滤器 关于using语句 关于多租户 全局 ...

  6. iOS12

    ios 12 中的新特性. 已经有很多文章写得很好,这里不再赘述,直接给大家几个传送门: https://sspai.com/post/47168 https://post.smzdm.com/p/7 ...

  7. devm_kzalloc【转】

    本文转载自:https://blog.csdn.net/liuhuahan/article/details/42145507 看内核代码的时候看到这个函数不理解它的具体作用然后就上网上查,但是网上只查 ...

  8. C# ORM修改实体层

    实体层:[数据库中是么以偶Contents2这个字段的],之所以在实体层添加一个Contents2,是因为: 所以在添加之后: 返回json形式,就用Contents,后台添加就用Contents2. ...

  9. 浅析HTTPS与SSL原理

    版权声明:本文由盛旷 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/134 来源:腾云阁 https://www.qclo ...

  10. 批量修改图像的大小 Python PIL

    #-*-coding:utf-8-*- import os import os.path from PIL import Image import time def ResizeImage(filei ...