CSS3新特性值逻辑选择器
1. :is
解释::is() CSS伪类函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。
例如
- 对于多个不同父容器的同个子元素的一些共性样式设置,传统写法如下
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
有了:is之后可以这么写
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
2. :where 伪类选择器
解释:与:is类似,:where 同样是将选择器列表作为其参数,并选择可以由该列表中的选择器之一选择的任何元素。与:is的区别就是 :where优先级总为0
例如
- html代码如下
<div>
<p>where & is test</p>
</div>
- css代码如下
:is(div) p {
color: red;
}
:where(div) p {
color: green;
}
正常按我们的理解而言,:is(div) p 和 :where(div) p 都可以转化为 div p,由于 :where(div) p 后定义,所以文字的颜色,应该是 green 绿色,但是,实际的颜色表现为 color: red 红色:
这是因为,:where() 和 :is() 的不同之处在于,:where() 的优先级总是为 0 ,但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。
3.:not 伪类选择器
解释::not 伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。
例如:
- html如下
<div class="a">div.a</div>
<div class="b">div.b</div>
<div class="c">div.c</div>
<div class="d">div.d</div>
div:not(.b) {
color: red;
}
div:not(.b) 它可以选择除了 class 为 .b 元素之外的所有 div 元素:
tips:继承性属性可能会失效 注意!!!!
4.:has 伪类选择器
解释::has 伪类接受一个选择器组作为参数,该参数相对于该元素的 :scope 至少匹配一个元素。
例如
div>
<p>div -- p</p>
</div>
<div>
<p class="g-test-has">div -- p.has</p>
</div>
<div>
<p>div -- p</p>
</div>
div:has(.g-test-has) {
border: 1px solid #000;
}
我们通过 div:has(.g-test-has) 选择器,意思是,选择 div 下存在 class 为 .g-test-has 的 div 元素。
- :has() 父选择器 -- 嵌套结构的父元素选择
<div>
<span>div span</span>
</div>
<div>
<ul>
<li>
<h2><span>div ul li h2 span</span></h2>
</li>
</ul>
</div>
<div>
<h2><span>div h2 span</span></h2>
</div>
div:has(>h2>span) {
margin-left: 24px;
border: 1px solid #000;
}
这里,要求准确选择 div 下直接子元素是 h2,且 h2 下直接子元素有 span 的 div 元素。注意,选择的最上层使用 :has() 的父元素 div。
- :has() 父选择器 -- 同级结构的兄元素选择
<div class="has-test">div + p</div>
<p>p</p>
<div class="has-test">div + h1</div>
<h1>h1</h1>
<div class="has-test">div + h2</div>
<h2>h2</h2>
<div class="has-test">div + ul</div>
<ul>ul</ul>
我们想找到兄弟层级关系中,后面接了h2元素的 .has-test 元素,可以这样写:
.has-test:has(+ h2) {
margin-left: 24px;
border: 1px solid #000;
}
tips::has() 兼容性不太好,给时间一点时间
更多例子可以参考:https://zhuanlan.zhihu.com/p/516155516
CSS3新特性值逻辑选择器的更多相关文章
- css3新增加的选择器
css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...
- CSS3新添加的选择器
---条件选择器:--- .ccc[cusid*= value] { backgroud-color:#0094ff; } //表示使用了class="ccc"元素自定义属性cus ...
- HTML5新规范和CSS3新特性
1.HTML5最新规范(HTML5是HTML.XHTML以及HTML.DOM的新标准) ①用于绘画canvas元素 ②用于媒介回放的video和audio元素 ③对本地离线存储的更好支持 ④新的特俗内 ...
- css3新的选择器
CSS3新的选择器 ele[att^="val"] /*属性att的值以val开头的元素*/ ele[att$="val"] /*属性att的值以val结尾的元 ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
随机推荐
- docker命令、简单创建镜像、dockerfile实战、Dockerfile语法、镜像分层、Volume介绍
docker的常用命令: docker pull 获取imagedocker build 创建imagedocker images 列出imagedocker run 运行containerdocke ...
- 【Delphi7官方镜像版】delphi_7_ent_en官方镜像 阿里云盘
[Delphi7官方镜像版]「delphi_7_ent_en官方镜像.iso.exe」https://www.aliyundrive.com/s/Du9C4XfZfwG 点击链接保存,或者复制本段内容 ...
- C++ 用运算符重载 实现复数相加
#include "stdafx.h" #include <iostream> using namespace std; class Complex {public: ...
- nuttx理解
操作系统:为啥要引入操作系统,个人的理解是为了实时性(即及时的响应性). 没有操作系统下多个任务都只能以前后台的方式排队执行,对某个任务的输入不能得到及时的响应:虽然后台有中断,但不能把所有的任务都放 ...
- Verilog语法+:的说明
"+:"."-:"语法看到这个语法的时候是在分析AXI lite 总线源码时碰见的,然后查阅了资料,做出如下解释. 1.用处这两个应该算是运算符,运用在多位的变 ...
- cmd 下运行pyhon文件.py
第一步: wind+R打开[运行],输入cmd,点击确定 第二步: ①输入:[cd]指定pyhon文件目录 ② cd C:\Users\pc\Desktop\test ③在指定目录下输入pyhon文件 ...
- Mac Idea2018.1.6版 利用脚本激活安装详解
下载安装包:链接: https://pan.baidu.com/s/1W4alLXUeQ6xazkNEtB8I9w 提取码: w6rg 下载脚本:链接: https://pan.baidu.com/s ...
- CF 1272 D. Remove One Element
D. Remove One Element time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- 【Win11】Win11家庭版升级专业版
1.将已激活的Win11家庭版升级成未激活的Win11专业版:输入密钥[BCQNW-3VWYB-4V7QD-M6R2B-7MH26] 2.将未激活的Win11专业版升级成已激活的专业版 :输入密钥[6 ...
- STM32F103使用FSMC对接正点原子3.5寸TFTLCD屏幕
fsmc的使用算是32里面有点绕的一个知识点,但是想明白了其实也没啥了. 首先我先放32个0在这儿: 0000 0000 0000 0000 0000 0000 0000 0000 [3 ...