css 选择器

一、邻接兄弟选择器+

p+img     选中所有紧随p元素之和的img元素

二、通用兄弟关系选择器~

p~ img    选中p元素之和的所有img元素

has()

1、选择所有包含p元素的父元素

:has(p) 

2.选择直接后代元素包含p元素的父元素

:has(>p)

3.选择直接后代元素包含p元素的父级标签名是div父元素

div:has(>p)

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

div:has(+p)

5.选择p元素的前面所有标签名是div的兄弟元素

div:has(~p)

6. :has选择器的且和或

p:has(.a):has(.b)  表示同时包含子元素a和子元素b的元素p

p.has(.a,.b) 表示选择包含子元素a或者包含子元素b的元素p

7.:has()选择器选择一个范围内的元素

<div> <h2>标题开始（选择第一行字体为绿色，最后一行字体为红色）</h2> <p>h2中间第一行</p> <h4>h2中间第二行</h4> <h5>h2中间最后一行</h5> <h2>标题结束</h2> </div>

要求选择第一行字体为绿色，最后一行字体为红色

选择h2中间第一行

h2+:has(~h2){color:green}   //h2+:has(~h2)  选择了H2范围内的第一个元素

选择h2中间最后一行

h2~:has(+h2){color:red}  //h2~:has(+h2) 选择了h2范围内最后一个元素

选择中间所有元素

hr~:has(~hr){color:blue}  

例子：

1.:has()选择器之星级评分

<div> <input type="radio" name="radio" id="radio1"> <label for="radio1"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg> </label> <input type="radio" name="radio" id="radio2"> <label for="radio2"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg> </label> <input type="radio" name="radio" id="radio3"> <label for="radio3"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg> </label> <input type="radio" name="radio" id="radio4"> <label for="radio4"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg> </label> <input type="radio" name="radio" id="radio5"> <label for="radio5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg> </label> </div>

点击时，高亮当前星星

input:checked+label{color:red}

当鼠标移入星星时，高亮当前星星，并且该位置之后的星星取消高亮

label:hover{

        color:glod;

        &·label{color:#ccc!important}

}

让当前位置之前的所有星星也高亮，利用:not

label:not(:hober,:hover~*){color:glod}

只有鼠标滑入时添加这些效果

div:has(label:hover) label:not(:hover,:hover~*){color:gold}

点击星星时，点亮当前选择的之前的所有星星

div:has(input:checked) label:not(input:checked~label){color:glod}

2.css :not和:has()模拟:only-of-type

现要求选择 div 的子元素中只有含有一个类名为 this 的元素（也就是第一个 div 元素块），并且设置其颜色为红色

p:only-of-type{color:red}

has写法

.this:not(:has(~ .this)):not(.this~*){color:red}

3.:has()模仿mac电脑dock栏

.son{

        &:hover{

                background:#67c23a;

                transform:scale(1.4);

                 &+.son{ 

                        transform:scale(1.1)

                }

        }

}

选择存在后一个相邻的被hover的兄弟元素的元素

.son:has(+.son:hover){

        transform:scale(1.2)

}

.box:has(.son:hover) .son:not(:hover,:has(+:hover), .son:hover + *){

        transform:scale(0.8);

        opacity:0.7

}

4.:has()单选题

选择错误选项时，标红当前选项，选择正确选项时标绿