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的联用的更多相关文章

  1. 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的 ...

  2. <a>链接的四个伪类顺序

    <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...

  3. (HTML)A标签伪元素选择器的继承关系

    ①如果a:link{}也存在,那么不管a{}放到哪里,a{}和a:link{}冲突的属性都会采用a:link{}的,不冲突的属性若存在a{}中,会被a:link{}. a:visited{} .a:h ...

  4. CSS选择器大全48式

    00.CSS选择器 CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器.类选择器.id选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...

  5. 利用 Serial Over Lan(SOL)搭建 XEN 的调试信息输出环境

    如有转载,请注明出处与本文连接,谢谢! 修改XEN的源码实现额外的功能,需要有一个调试环境来得到XEN的调试信息(有关源码编译并安装 XEN 请阅读我以前的博文:在CentOS下源码安装 Xen并搭建 ...

  6. DG的Switchover切换

    用户可以使用角色管理服务,进行主.备库的计划中的角色切换,这个叫switchover,或者是非计划中的角色切换,叫failover. 目的:实现主库(orcl)和从库(standby)的切换 主库参数 ...

  7. CSS 笔记五(Combinators/Pseudo-classes/Pseudo-elements)

    CSS Combinators Four different combinators in CSS3 descendant selector (space) child selector (>) ...

  8. Python开发【第二章】:Python的数据类型

    基本数据类型 一.整型 如: 18.73.84 整型具备如下功能: class int(object): """ int(x=0) -> int or long i ...

  9. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

随机推荐

  1. Winform中实现批量文件复制(附代码下载)

    场景 效果 将要批量复制的文件拖拽到窗体中,然后点击下边选择目标文件夹,然后点击复制按钮. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公 ...

  2. 深入理解 Spring Cloud 核心组件与底层原理

    一.Spring Cloud核心组件:Eureka Netflix Eureka Eureka详解 1.服务提供者 2.服务消费者 3.服务注册中心 二.Spring Cloud核心组件:Ribbon ...

  3. Python: simple code

    # !/usr/bin/env python3.6 # -*- coding: utf-8 -*- # visual studio 2017 # 2019 10 12 Geovin Du print ...

  4. Things 3 for Mac是什么?如何使用?

    为大家介绍一款实用的效率管理软件“Things 3 for Mac”,它通过使用标签和智能过滤条,东西结合了强大的功能和简单性,Leopard风格的来源列表可以快速轻松地进行对焦.与一个美丽的用户界面 ...

  5. android studio 常见编译问题及解决思路总结

    问题一:编译运行成功后放置一段时间后再运行会报错 这个问题让我纠结了不少时间,最后才发现遇到类似的错误,clear一下project就好了.这个一般是上次生成的临时文件和这次的有冲突造成的. 问题二: ...

  6. MyBatis操作Oracle批量插入 ORA-00933: SQL 命令未正确结束

    最近在使用MyBatis操作Oracle数据库的时候,进行批量插入数据,思路是封装一个List集合通过Myabtis 的foreach标签进行循环插入,可是搬照Mysql的批量插入会产生 异常 ### ...

  7. JVM学习分享-练习题

    package org.fenixsoft.clazz; public class TestClass { private int m; public int inc() { return m + 1 ...

  8. 微店APP协议简要分析

    1.通过抓包软件charles进行抓包,点击微信收款后,抓包内容都是加密处理过  2.加载分析定位这些字段的加密函数. WDTNThorParameterProcessor HTTPBody:task ...

  9. InnoDB On-Disk Structures(四)--Doublewrite Buffer (转载)

    转载.节选于 https://dev.mysql.com/doc/refman/8.0/en/innodb-doublewrite-buffer.html The doublewrite buffer ...

  10. linux 执行 javac 报错 javac: command not found

    bash: javac: command not found java 版本 1.8 [root@localhost home]# java -version openjdk version &quo ...