关于hover与after,before已及first-letter,first-line的联用
0920自我总结
关于hover与after,before已及first-letter,first-line的联用
一.写法
元素:hover::after{样式}
元素:hover::before{样式}
二.使用
元素:hover::after{样式}与元素:after{content:'插入的内容'}联用
元素:hover::before{样式}与元素:before{content:'插入的内容'}联用
:before
在元素之前添加内
:after
在元素之后添加内容
没法用来修改原元素的样式
三.补充伪类:first-letter已及:first-line
伪类 | 解释 |
---|---|
:first-letter | 向文本的第一个字母添加特殊样式 |
:first-line | 向文本的首行添加特殊样式。 |
同理:first-letter与:first-line联用写法一直不过他只修改样式,而不能
对元素中内容进行新增内容
已及新增内容样式的修改
关于hover与after,before已及first-letter,first-line的联用的更多相关文章
- a与a:link、a:visited、a:hover、a:active
原文地址http://www.cnblogs.com/exmyth/p/3226654.html a与a:link.a:visited.a:hover.a:active 起因: a与a:link的 ...
- <a>链接的四个伪类顺序
<a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...
- (HTML)A标签伪元素选择器的继承关系
①如果a:link{}也存在,那么不管a{}放到哪里,a{}和a:link{}冲突的属性都会采用a:link{}的,不冲突的属性若存在a{}中,会被a:link{}. a:visited{} .a:h ...
- CSS选择器大全48式
00.CSS选择器 CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器.类选择器.id选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...
- 利用 Serial Over Lan(SOL)搭建 XEN 的调试信息输出环境
如有转载,请注明出处与本文连接,谢谢! 修改XEN的源码实现额外的功能,需要有一个调试环境来得到XEN的调试信息(有关源码编译并安装 XEN 请阅读我以前的博文:在CentOS下源码安装 Xen并搭建 ...
- DG的Switchover切换
用户可以使用角色管理服务,进行主.备库的计划中的角色切换,这个叫switchover,或者是非计划中的角色切换,叫failover. 目的:实现主库(orcl)和从库(standby)的切换 主库参数 ...
- CSS 笔记五(Combinators/Pseudo-classes/Pseudo-elements)
CSS Combinators Four different combinators in CSS3 descendant selector (space) child selector (>) ...
- Python开发【第二章】:Python的数据类型
基本数据类型 一.整型 如: 18.73.84 整型具备如下功能: class int(object): """ int(x=0) -> int or long i ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
随机推荐
- Winform中实现批量文件复制(附代码下载)
场景 效果 将要批量复制的文件拖拽到窗体中,然后点击下边选择目标文件夹,然后点击复制按钮. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公 ...
- 深入理解 Spring Cloud 核心组件与底层原理
一.Spring Cloud核心组件:Eureka Netflix Eureka Eureka详解 1.服务提供者 2.服务消费者 3.服务注册中心 二.Spring Cloud核心组件:Ribbon ...
- Python: simple code
# !/usr/bin/env python3.6 # -*- coding: utf-8 -*- # visual studio 2017 # 2019 10 12 Geovin Du print ...
- Things 3 for Mac是什么?如何使用?
为大家介绍一款实用的效率管理软件“Things 3 for Mac”,它通过使用标签和智能过滤条,东西结合了强大的功能和简单性,Leopard风格的来源列表可以快速轻松地进行对焦.与一个美丽的用户界面 ...
- android studio 常见编译问题及解决思路总结
问题一:编译运行成功后放置一段时间后再运行会报错 这个问题让我纠结了不少时间,最后才发现遇到类似的错误,clear一下project就好了.这个一般是上次生成的临时文件和这次的有冲突造成的. 问题二: ...
- MyBatis操作Oracle批量插入 ORA-00933: SQL 命令未正确结束
最近在使用MyBatis操作Oracle数据库的时候,进行批量插入数据,思路是封装一个List集合通过Myabtis 的foreach标签进行循环插入,可是搬照Mysql的批量插入会产生 异常 ### ...
- JVM学习分享-练习题
package org.fenixsoft.clazz; public class TestClass { private int m; public int inc() { return m + 1 ...
- 微店APP协议简要分析
1.通过抓包软件charles进行抓包,点击微信收款后,抓包内容都是加密处理过 2.加载分析定位这些字段的加密函数. WDTNThorParameterProcessor HTTPBody:task ...
- InnoDB On-Disk Structures(四)--Doublewrite Buffer (转载)
转载.节选于 https://dev.mysql.com/doc/refman/8.0/en/innodb-doublewrite-buffer.html The doublewrite buffer ...
- linux 执行 javac 报错 javac: command not found
bash: javac: command not found java 版本 1.8 [root@localhost home]# java -version openjdk version &quo ...