css开发技巧总结（CSS穿透、一像素边框、:valid和:invalid表单即时验证、::selection美化选中文本）
一、用:valid和:invalid来做表单即时校验
html5丰富了表单元素，提供了类似required,email,tel等表单元素属性。同样的，我们可以利用:valid和:invalid来做针对html5表单属性的校验。
:required伪类指定具有required 属性的表单元素:valid伪类指定一个通过匹配正确的所要求的表单元素:invalid伪类指定一个不匹配指定要求的表单元素
<div class="container">
<div class="row" style="margin-top: 2rem;">
<form>
<div class="form-group">
<label>name</label>
<input type="text" required="" placeholder="请输入名称">
</div>
<div class="form-group">
<label>email</label>
<input type="email" required="" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label>homepage</label>
<input type="url" placeholder="请输入博客url">
</div>
<div class="form-group">
<label>Comments</label>
<textarea required=""></textarea>
</div>
</form>
</div>
</div>
.form-group {
width: 32rem;
padding: 1rem;
border: 1px solid transparent;
&:hover {
border-color: #eee;
-webkit-transition: border .2s;
transition: border .2s;
}
label {
display: block;
font-weight: normal;
}
input,
textarea {
display: block;
width: 100%;
line-height: 2rem;
padding: .5rem .5rem .5rem 1rem;
border: 1px solid #ccc;
outline: none;
&:valid {
border-color: #429032;
box-shadow: inset 5px 0 0 #429032;
}
&:invalid {
border-color: #D61D1D;
box-shadow: inset 5px 0 0 #D61D1D;
}
}
}
用::placeholder来美化占位符
::placeholder用来修饰input/textarea等表单元素placeholder属性的样式。
<input type="text" placeholder="我是自定义的placeholder" />
@mixin placeholder {
&::-webkit-input-placeholder {
@content
}
&::-moz-placeholder {
@content
}
&:-ms-input-placeholder {
@content
}
}
input, textarea {
@include placeholder {
color: #f00;
}
}
/*编译后的css*/
input::-webkit-input-placeholder{
color: #f00;
}
input::-moz-placeholder{
color: #f00;
}
input:-ms-input-placeholder{
color: #f00;
}
用::selection来美化选中文本
就像你用鼠标选中这段话看到的那样，::selection用来设置选中文本的样式，从而改变浏览器一成不变的文本选中色（蓝色）。
::selection{
color: #fff;
background-color: #6bc30d;
}
/*指定范围*/
.list li a::selection{
color: #fff;
background-color: #6bc30d;
}
利用 CSS 穿透覆盖默认样式
常见发生场景：假如我们需要通过 input，type="file"来上传文件，而这个 input 的默认样式，可以说是非常地丑。所以我们希望通过一张图片，与这个 input 大小一样，位置一致地盖在上面。这个时候，显然，这个时候点击图片，input 是不会起作用的。就是因为 img 隔绝了 click 的穿透，而我们希望的是，这个 img 只是视觉上遮挡了 input 的样式，但是点击的时候还是点击到 input。所以，只要让 img 可穿透即可。
img {
pointer-events: none;
}
兼容 IE 浏览器的透明度处理
.ui {
width: 100%;
height: 100%;
opacity: 0.4;
filter: Alpha(opacity=40); //兼容IE浏览器的处理
}
一像素边框设置
很多时候，想保持边框的大小在任何设置上都是 1px，但是因为 1px 使用 2dp 渲染，也就是说会显示为 2px 大小。所以，要采用 css3 缩放一下。
.folder li {
position: relative;
padding: 5px;
}
.folder li + li:before {
position: absolute;
top: -1px;
left: 0;
content: " ";
width: 100%;
height: 1px;
border-top: 1px solid #ccc;
-webkit-transform: scaleY(0.5);
}
用:target来实现折叠面板
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
:target是文档的内部链接，即 URL 后面跟有锚名称 #，指向文档内某个具体的元素。
利用 :target 的特性可以实现以前只能使用JavaScript实现的显示隐藏或者Collapse 折叠面板。
<div class="container">
<div class="row" style="margin-top: 2rem;">
<div class="t-collapse">
<a class="collapse-target" href="#modal1">target 1</a>
<div class="collapse-body" id="modal1">
<a class="collapse-close" href="#">target 1</a>
<p>
在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇文章，将继续在CSS技巧方面进行探讨，不同于前两篇的是，本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于:hover,
:active, :focus之类的，因为这些在平常的项目中太常用了（然而我目前依然见过还有用js去添加.hover类来变化背景色的同学😴）。而伪元素如:before,
:after相信大家也用的烂熟了。 当然对于比较常见的伪类（元素）不在本文的讨论范围类，本文主要介绍一些生僻的但是又非常实用的伪类(元素)。CSS的世界已经变天了，抛开过去，拥抱变化吧~
</p>
</div>
</div>
<div class="t-collapse"><a class="collapse-target" href="#modal2">target 2</a>
<div class="collapse-body" id="modal2">
<a class="collapse-close" href="#">target 2</a>
<p>
在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇文章，将继续在CSS技巧方面进行探讨，不同于前两篇的是，本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于:hover,
:active, :focus之类的，因为这些在平常的项目中太常用了（然而我目前依然见过还有用js去添加.hover类来变化背景色的同学😴）。而伪元素如:before,
:after相信大家也用的烂熟了。 当然对于比较常见的伪类（元素）不在本文的讨论范围类，本文主要介绍一些生僻的但是又非常实用的伪类(元素)。CSS的世界已经变天了，抛开过去，拥抱变化吧~
</p>
</div>
</div>
<div class="t-collapse">
<a class="collapse-target" href="#modal3">target 3</a>
<div class="collapse-body" id="modal3">
<a class="collapse-close" href="#">target 3</a>
<p>
在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇文章，将继续在CSS技巧方面进行探讨，不同于前两篇的是，本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于:hover,
:active, :focus之类的，因为这些在平常的项目中太常用了（然而我目前依然见过还有用js去添加.hover类来变化背景色的同学😴）。而伪元素如:before,
:after相信大家也用的烂熟了。 当然对于比较常见的伪类（元素）不在本文的讨论范围类，本文主要介绍一些生僻的但是又非常实用的伪类(元素)。CSS的世界已经变天了，抛开过去，拥抱变化吧~
</p>
</div>
</div>
</div>
</div>
.t-collapse {
border: 1px solid #ccc;
margin-top: -1px;
&:first-child {
margin-top: 0;
}
.collapse-target,
.collapse-close {
cursor: pointer;
height: 3rem;
line-height: 2rem;
padding: .5rem 2rem;
text-decoration: none;
user-select: none;
background: #eee;
}
>.collapse-target {
display: block;
}
>.collapse-body {
position: relative;
display: none;
padding: 2rem;
.collapse-close {
display: none;
position: absolute;
top: -3rem;
width: 100%;
left: 0;
}
&:target {
display: block;
.collapse-close {
display: block;
border-bottom: 1px solid #ddd;
}
}
}
}
