着重写一下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. ES禁用_source不会影响聚合

    From Elasticsearch's website: The _source field contains the original JSON document body that was pa ...

  2. L98

    If there's one thing to be taught, it's dreams are made to be caught.唯有一事值得谨记,有梦想就要奋力追逐Capital punis ...

  3. linux C++ scandir 的使用

    () 头文件 #include <dirent.h> () 函数定义 int scandir(const char *dir,struct dirent **namelist,int (* ...

  4. ISO文件怎么安装

    iso是光盘映像文件,打开iso文件有几种方法:1.使用光盘映像工具软件或者虚拟光驱才能打开iso文件.像软碟通(UItraISO)就是一个很好的光盘映像工具软件,使用它就可以打开iso文件,提取里面 ...

  5. ubuntu关闭cups服务

    本人使用的ubuntu10.10每次开机时使用nmap扫描127.0.0.1的时候总是能发现一个631端口开启,在/etc/services找到 631端口是网络打印机服务,但对于我一个普通用户来说这 ...

  6. 设计四个线程,其中两个线程每次对j加1,另外两个线程每次对j减1

    public class ManyThreads2 { private int j = 0; public synchronized void inc() { j++; System.out.prin ...

  7. SQL Server 将查询的结果生成insert语句

    1.将查询的结果插入到一张新表(yangTest 表系统会自动生成)select Area, District, RoadName, StationName, PathDirection, Stati ...

  8. Code:获取指定汉字的首字母

    ylbtech-Code:获取指定汉字的首字母 1.获取指定汉字的首字母返回顶部 1. /// <summary> /// 获取指定汉字的首字母 /// </summary> ...

  9. java 基础知识学习 priorityQueue

      ArrayList:动态扩容(相对于数组),数组实现查询非常快但要求连续内存空间. 双向队列LinkedList:不需要像ArrayList一样创建连续的内存空间,它以链表的形式连接各个节点,但是 ...

  10. CS231n 2016 通关 第五、六章 Dropout 作业

    Dropout的作用: cell  1 - cell 2 依旧 cell 3 Dropout层的前向传播 核心代码: train 时: if mode == 'train': ############ ...