sass嵌套样式选中最后一个li元素，使用伪类、伪元素

心若向阳(*￣︶￣)

已于 2022-04-08 16:08:52 修改

阅读量7.7k

点赞数 3

分类专栏： css 个人项目文章标签： vue.js css scss 伪类伪元素

于 2020-08-14 09:39:31 首次发布

本文链接：https://blog.csdn.net/agua001/article/details/107997545

版权

个人项目同时被 2 个专栏收录

144 篇文章 5 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

html
<ul class="mingxing">
	<li class="huge">胡歌</li>
	<li class="huge">江疏影</li>
</ul>
css
.mingxing{
	.huge {
		margin-bottom: 10px;
		&:last-child {
	       color: red;
	    }
	}
}

另一种写法

.mingxing{
	.huge {
		margin-bottom: 10px;
	    &:nth-child(2) {
	      color: green;
	    }
	}
}

鼠标移入li元素

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  border-radius: 4px;
  margin-bottom: 6px;
  cursor: pointer;
  &:hover {
    background: #E8EFFA;
  }
}

.active类名的伪元素

.active {
  background: #E8EFFA;
  &:after {
    content: "√";
    width: 16px;
    height: 16px;
    line-height: 16px;
    color: #fff;
    text-align: center;
    background: #1890FC;
    opacity: 1;
    border-radius: 8px;
  }
}

沉淀自己