着重写一下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. Android适配API23之后权限的动态申请

    一.权限介绍 对于6.0以下的权限及在安装的时候,根据权限声明产生一个权限列表,用户只有在同意之后才能完成app的安装,造成了我们想要使用某个app,就要默默忍受其一些不必要的权限(比如是个app都要 ...

  2. Matlab图像处理(03)-基本概念

    概念定义 动态范围:灰度跨跃的值域称为动态范围.上限取决于饱和度,下限取决于噪声. 对比度:一幅图像中最高和最低灰度级间的灰度差. 空间分辨率:图像中可辨别的最小细节的度量.常用度量每单位距离线对数和 ...

  3. 话说文件系统——aufs源码分析(三)【转】

    本文转载自:http://www.cnblogs.com/xie0812/p/8848185.html 1. linux中设备驱动的入口都是:module_init(xxx_init);里面注册的函数 ...

  4. Mac OS 配置Maven

    步骤: 1. 下载Maven tar包 https://maven.apache.org/download.cgi?Preferred=http%3A%2F%2Fmirrors.tuna.tsingh ...

  5. linux中查找用户账户信息和登录信息的11中方法

    摘自:开源中国 微信公众号 1. id 2. groups 3. finger 4.getent 5. grep 6. lslogins 7..users 8. who 9. w 10. last或者 ...

  6. IDEAL葵花宝典:java代码开发规范插件 p3c

    前言: P3C插件 是阿里巴巴p3c项目组进行研发.这个项目组是阿里巴巴开发爱好者自发组织形成的虚拟项目组,根据<阿里巴巴Java开发规范>转化而成的自动化插件,并且实现了部分自动编程. ...

  7. js_调试_01_14 个你可能不知道的 JavaScript 调试技巧

    更快更高效地调试你的 JavaScript 了解你的工具在完成任务时有很重要的意义. 尽管 JavaScript 是出了名的难以调试,但是如果你掌握了一些小技巧,错误和 bug 解决起来就会快多了. ...

  8. C/C++的四大内存分区和常量的存储位置

    原文:https://blog.csdn.net/k346k346/article/details/45592329 正确的理解C/C++程序的内存分区,是合格程序猿的基本要求. 网络上流形两大版本内 ...

  9. VC++动态链接库(DLL)编程深入浅出:Q&A(原创)

    Q1:extern “C” 是做什么用的? A1:一种情况是多个文件中,变量声明或者函数声明,需要extern “C”,这种情况在这里不做讨论. 在dll工程中,被extern "C&quo ...

  10. Gym - 101673:B Craters (几何,求凸包)

    题意:给定几个圆,求最短的围合,把这几个包围起来,而且到圆的距离都不小于10. 思路:把每个圆的半径+10,边等分5000份,然后求凸包即可. #include<bits/stdc++.h> ...