一、邻接兄弟选择器+
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()单选题
选择错误选项时,标红当前选项,选择正确选项时标绿