CSS之not巧妙使用

2018.11.16 220 0

煜子平时在写列表的时候,通常用行分隔线,那么在最后一行中,分隔线是不需要的,所以需要删除。我们一般的写法是普通的,如果使用not来解决呢,大大减少了CSS代码,也能实现效果。请看下面

:not 的使用

列表分割线,去掉最后一行分割线,使用:not解决,使css简单又方便

普通写法

  1. .list li {
  2.     border-bottom: 1px solid #eee;
  3.     margin: .5rem;
  4.     padding: .5rem;
  5. }
  6. .list li:last-of-type {
  7.     border-bottom: 0px;
  8. }

简单写法

  1. .list li:not(:last-of-type) {
  2.     border-bottom: 1px solid #eee;
  3.     margin: .5rem;
  4.     padding: .5rem;
  5. }
400

全部评论 0


    抢沙发