CSS 知识点记录

CSS 选择器

focus-within

它表示一个元素获得焦点，或该元素的后代元素获得焦点时触发。

<div class="g-username">
    <input type="text" placeholder="user name" class="g_input" >
</div>

例如当输入框聚焦时，想给父盒子 g-username 修改样式

.g-container:focus-within {
    background: #000
}

has

表示一个元素，作为前面元素的条件补充。例如：

.test:has(p){}

选择所有包含 <p>元素的 .test 元素

div:has(+ p){}

选择 <p> 元素的相邻的前一个标签名是 div的兄弟元素