使用 :not() 来精简css代码

最新推荐文章于 2023-12-05 15:01:36 发布

树洞里面的树懒

最新推荐文章于 2023-12-05 15:01:36 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/weixin_53591247/article/details/111603415

版权

CSS选择器 :not() ~ 样式优化代码效率

关键词由CSDN通过智能技术生成

先上代码

// 不使用:not()
.nav li {
  border-right: 1px solid #777;
}
.nav li:last-child {
  border-right: none;
}

// 使用:not()
.nav li:not(:last-child) {
  border-right: 1px solid #777;
}

// 或者使用兄弟选择符~
.nav li:first-child ~ li {
  border-left: 1px solid #777;
}
`在这里插入代码
// 不使用:not()
.nav li {
  border-right: 1px solid #777;
}
.nav li:last-child {
  border-right: none;
}

// 使用:not()
.nav li:not(:last-child) {
  border-right: 1px solid #777;
}

// 或者使用兄弟选择符~
.nav li:first-child ~ li {
  border-left: 1px solid #777;
}