那些你可能不知道又好用的css属性

1. 伪类选择器 focus-within

它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。 这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。

例子

<div class="formBox">
	 <div class="formBox_input">
	     <input type="text" placeholder="userName" class="g_input" >
	 </div>
	 <div class="g-formBox_input">
	     <input type="text" placeholder="password" class="g_input" >
	 </div>
</div>

//css
.formBox {
    padding: 10px;
    border: 1px solid #eee;
    transition: all .3s;
}
.formBox_input {
    padding :15px;
    transition: 0.3s;
}
.g_input {
    border: none;
    outline: none;
    width: 20vw;
    padding: 15px;
    font-size: 18px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    overflow: hidden;
    transition: 0.3s;
}
.g_input:focus {
        border-color: hsl(199, 98%, 48%);
    }
p {
    display: none;
    text-indent: 0px;
    color: red;
    padding: 10px 0;
}
.formBox:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 0 10px #ddd;
    border-color: hsl(199, 98%, 48%);
}

如图，点击第一个输入框，加了:focus-within的外框也变了

先放一个，待更新，各位博友要是有什么好玩的又好用的css属性，欢迎评论区留言。