浅谈css常用伪类用法

着重写一下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相似

 

posted @ 2018-05-11 10:29  ~西门紫凌~  阅读(139)  评论(0编辑  收藏  举报