css的几个小技巧

1、使用:not()去除无用属性

要点：通过:not()排除指定元素不使用设置样式
场景：符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)

html部分：
<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>
css部分：
.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;
	}
}

2、使用+或~美化选项框

要点：<label>使用+或~配合for绑定radio或checkbox的选择行为
场景：选项框美化、选中项增加选中样式

html部分：
<div class="bruce flex-ct-x">
	<ul class="beauty-selection">
		<li>
			<input type="radio" name="radioName" id="fed-engineer" hidden>
			<label for="fed-engineer"></label>
			<span>前端工程师</span>
		</li>
		<li>
			<input type="radio" name="radioName" id="bed-engineer" hidden>
			<label for="bed-engineer"></label>
			<span>后端工程师</span>
		</li>
		<li>
			<input type="radio" name="radioName" id="fsd-engineer" hidden>
			<label for="fsd-engineer"></label>
			<span>全栈工程师</span>
		</li>
	</ul>
</div>
css部分：
.beauty-selection {
	display: flex;
	li {
		display: flex;
		align-items: center;
		margin-left: 20px;
		&:first-child {
			margin-left: 0;
		}
	}
	input:checked + label {
		background-color: #f90;
	}
	label {
		margin-right: 5px;
		padding: 2px;
		border: 1px solid #f90;
		border-radius: 100%;
		width: 18px;
		height: 18px;
		background-clip: content-box;
		cursor: pointer;
		transition: all 300ms;
		&:hover {
			border-color: #09f;
			background-color: #09f;
			box-shadow: 0 0 7px #09f;
		}
	}
	span {
		font-size: 16px;
	}
}

3、使用::scrollbar改变滚动条样式

要点：通过scrollbar的scrollbar-track和scrollbar-thumb等属性来自定义滚动条样式
场景：主题化、页面滚动

<div class="bruce flex-ct-x">
	<div class="scroll-indicator">
		<div class="article">
			<article>
				<h3>hello</h3>
				<p>hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
	<p>hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
<p>hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
			</article>
		</div>
	</div>
</div>
css部分：
.scroll-indicator {
	position: relative;
	overflow: hidden;
	border: 1px solid #66f;
	width: 500px;
	height: 300px;
	&::after {
		position: absolute;
		left: 0;
		right: 5px;
		top: 2px;
		bottom: 0;
		background-color: #fff;
		content: "";
	}
}
.article {
	overflow: auto;
	height: 100%;
	&::-webkit-scrollbar {
		width: 5px;
	}
	&::-webkit-scrollbar-track {
		background-color: #f0f0f0;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 2px;
		background-color: #66f;
	}
	article {
		padding: 0 20px;
		background: linear-gradient(to right top, #f66 50%, #f0f0f0 50%) no-repeat;
		background-size: 100% calc(100% - 298px + 5px);
		> * {
			position: relative;
			z-index: 9;
		}
	}
	h1 {
		line-height: 40px;
		text-align: center;
		font-weight: bold;
		font-size: 20px;
	}
	p {
		margin-top: 20px;
		line-height: 20px;
		text-indent: 2em;
	}
}

4、使用selection选择器自定义文本选区的高亮样式

<div class="cleared-attr">
   <h3>hello</h3>
   <p>hellohelo</p>
</div>

::selection{
  color: #fff;
  background:red;

}

h1::selection{
background:lightcyan;
}

5、target选择器

html部分：
<a href="#news1">1</a>
<a href="#news2">2</a>
<a href="#news3">3</a>

<div id="news1"></div>
<div id="news2"></div>
<div id="news3"></div>
css部分：
div{
 width: 30px;
 height: 30px;
 margin: 5rem;
 background:lightcyan;
 transition: flex 1s;
}

div:target{
 flex:1 ;
 background: lightpink; 
}