着重写一下after和before的用法:

css样式搞定:标签元素+伪类after

a.'class名':after{//我的样式名称是这个,可以写成你自己的样式名称
  content: '已打包';
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  margin-left: 2px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  background-color: #009bdb;
  border-radius: 10px;
}

有时可以用来和checkbox绑定,如果我们想做勾选了复选框有什么变化就可以用

css3兄弟选择器:input:checked+label:after{css样式},只要被选中,label标签就会有相应的样式变化;

before是放在元素的前面,用法与after相似

浅谈css常用伪类用法的更多相关文章

  1. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  2. css常用伪类记录

    1.超链接使用css伪类设置颜色 a:link {color: #000000} /* 未访问的链接 */a:visited {color: #d90a81} /* 已访问的链接 */a:hover ...

  3. CSS常用伪类

    css伪类 :after 在元素后面插入内容 :hover 鼠标移入时进行 :before 在元素前面插入内容 :link 未选中的链接 :active 点击后产生什么变化 :nth-child 匹配 ...

  4. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  5. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  6. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  7. css中伪类/伪元素详解

    一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...

  8. CSS :first-child 伪类

    CSS :first-child 伪类  向元素的第一个子元素添加样式,示例如下:   例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...

  9. CSS :focus 伪类

    :focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...

随机推荐

  1. mac 在 finder 当前 路径下 打开 terminal 的办法

    1. 在:系统偏好设置 -> 键盘 -> 服务 或者 finder -> 服务偏好设置, 如下: 建议配合快捷键使用,本人使用的快捷键: 在 terminal 新建标签 contro ...

  2. importlib模块 反射字符串的对象

    通过 importlib模块 反射字符串的对象 Python 3.5.2 (default, Nov 17 2016, 17:05:23) [GCC 5.4.0 20160609] on linux ...

  3. Appium——元素定位

    首先介绍两种定位元素的工具,appium自带的 Inspector 和 android SDK自带的 uiautomatorviewer 1.UIAutomator Viewer比较简单,在模拟器打开 ...

  4. Warning: Cannot send session cookie – headers already sent…

    相信大多数人在写PHP代码的时候,都遇到过类似 "Warning: Cannot send session cookie – headers already sent…“或者”Cannot ...

  5. 轻量级RPC框架开发

    nio和传统io之间工作机制的差别 自定义rpc框架的设计思路 rpc框架的代码运行流程 第2天 轻量级RPC框架开发 今天内容安排: 1.掌握RPC原理 2.掌握nio操作 3.掌握netty简单的 ...

  6. Lua调用C,C++函数案例

    该程序主要是C++与Lua之间的相互调用示例.执行内容:(1)新建一个lua_State(2)打开常用库,如io,os,table,string等(3)注册C函数(4)导入程序所在目录下所有*.lua ...

  7. BZOJ 3043 IncDec Sequence:反向差分

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3043 题意: 给定一个长度为n的数列a[i],每次可以选择一个区间[l,r],使这个区间内 ...

  8. SpringBoot_Exception_01_No plugin found for prefix 'spring-boto' in the current project

    一.异常现象 spingbott项目在eclipse中执行maven命令:spring-boot:run, 出现异常: No plugin found for prefix 'spring-boto' ...

  9. .DS_Store 文件是什么?Mac下面如何禁止.DS_Store生成

    .DS_Store是Mac OS保存文件夹的自定义属性的隐藏文件,如文件的图标位置或背景色,相当于Windows的desktop.ini. 1,禁止.DS_store生成:打开 “终端” ,复制黏贴下 ...

  10. thinkjs,promise

    thinkjs是奇舞团开源的一款NodejsMVC框架,该框架底层基于Promise来实现,很好的解决了Nodejs里异步回调的问题. 可参考: http://www.thinkjs.org/ htt ...