【iCSS：布局】使用:not()去除无用属性

icss-not.markdown

【iCSS：布局】使用:not()去除无用属性

A Pen by JowayYoung on CodePen.

License.

index.html

<div class="bruce flex-ct-x">
	<ul class="cleared-attr">
		<li class="first-line">
			<span>A</span>
			<span>B</span>
			<span>C</span>
			<span>D</span>
			<span>E</span>
		</li>
		<li class="second-line">
			<span>A</span>
			<span>B</span>
			<span>C</span>
			<span>D</span>
			<span>E</span>
		</li>
	</ul>
</div>

style.scss

.cleared-attr {
	li {
		height: 40px;
		line-height: 40px;
	}
	span {
		display: inline-block;
		color: #66f;
	}
	.first-line span:not(:last-child)::after {
		content: ",";
	}
	.second-line span:not(:nth-child(-n+3)) {
		display: none;
	}
}

styles

<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />