我该如何使用伪类来查询多个选择器呢？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用CSS伪类选择器

document.querySelectorAll()[4]返回所有匹配的HTML元素，这些元素位于类数组NodeList[5]中。伪类选择器根据HTML元素的当前状态来定位它们。...MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。你经常需要在不止一个元素上面应用相同的样式。...该特性已被所有现代浏览器支持[7]（IE除外）。 :is(article, section, aside) p { color: #444; } 单个选择器可以包含任意数量的:is()伪类。...*/ h2 { margin-block-start: 2em; } :has()伪类选择器 :has()选择器使用了类似于:is()和:where()的语法，但它的目标是一个包含其他元素的元素。...它在Safari 15.4+[11]和Chrome 105+[12]可用，但是到2023年应该可以广泛使用。总结 :is() 和 :where() 伪类选择器简化了 CSS 语法。

2.2K4 0

CSS入门8-三大特性之层叠特性与优先级

样式作用情况元素的样式该如何去展现呢，首先看一下某个元素某个属性可能作用样式的情况：没有指定样式（没有内联样式也没有选择器选中指定样式）有唯一指定样式（有内联样式或者选择器选中，且只有一个规则作用于该属性...）有多个样式规则（有内联样式或者选择器选中，且不只一个规则作用于该属性）下面我们来详细分析一下这三种情况。...首先我们来看只引入其中一种类型的情况下，出现冲突该如何解决。...将选择器分为四类: 常用选择器，包括元素选择器，类选择器，id选择器和属性选择我器伪类选择器和伪元素选择器关系选择器通配选择器 3.2.1.2.1 常用选择器 3.2.1.2.1.1 同一类选择器...3.2.1.2.2.2 伪元素选择器伪元素，说是元素，但又不是真实的元素，是一个虚拟的元素。如何详细理解这段话呢，我们来看一下下面这个例子。 <!

9483 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS的讲解

CSS有丰富的样式定义，可以让我们的网页更加美观，用户体验更好CSS可以多页面使用，可以多次重复应用到多种HTML页面中，减少程序员重复的工作量结构清晰，易于修改，方便程序员编写网页那么CSS是如何工作的呢.../style.css">CCS的选择器当我们要使用CSS样式的时候，首先第一步就是要去选择我们要设置的元素。那怎么去选择我们的元素呢？这里我们就要用到我们的CSS选择器了。...在CSS中，有五种常用的选择器，分别是：简单选择器（根据名称、id、类来选取元素）组合器选择器（根据它们之间的特定关系来选取元素）伪类选择器（根据特定状态选取元素）伪元素选择器（选取元素的一部分并设置其样式...（根据它们之间的特定关系来选取元素） aaa .a p { background-color: aqua; }伪类选择器...最后给大家推荐两个好用的CSS学习/查询网站MDN：developer.mozilla.org/zh-CN/docs/…Learn CSS :https://web.dev/learn/css/我正在参与

1500 0

【CSS】381- 提升你的CSS选择器技巧

我已经使用CSS多年了，但直到最近我才深入研究了一下CSS选择器。我为什么要这样做呢？...我们都知道选择器，但麻烦的是随着时间的推移，很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情。...用户界面选择器如果你处理过表单样式，那么你之前一定遇到过这些伪类选择器： :enabled 启用状态(可激活或获取焦点)的元素。 :disabled 禁用状态的元素。...还有要注意一点是伪类选择器是可以组合使用，例如： :required:invalid。接下来的两个伪类选择器匹配拥有取值范围（支持 min 和 max 属性）的元素。...结构选择器中使用参数来做匹配的选择器如下： :nth-child() 正序匹配某个元素的一个或多个子元素。 :nth-last-child() 倒序匹配某个元素的一个或多个子元素。

1.1K4 0

深入解析CSS样式优先级

这个在CSS样式的编写中用的算是最多的一种，因为一个标签可以添加多个类名，不像ID只能添加一个，编写不同的类名来控制不同的样式显示，同时根据权重来控制样式的覆盖。...然后是标签选择器，这个在开发中也是不建议使用，更多的是建议添加一个类名来控制，以实现复用，同时方便控制。最后是通配符选择器，这个选择器的使用一般就是初始化文档结构。...经过这样的测试，我们可以猜想，在一个元素使用了ID选择器修饰了样式以后，如果在使用类选择器，这时候是是没有办法使相同的样式属性生效，生效的依然是那个ID选择器修饰的样式。为什么权重值大也没有用呢？...我猜或许是因为写了太多类名的时候再和ID相比的话，浏览器会自己去判断，选择最优的那个，毕竟10多个类名在实际的开发中是不存在的。...所以，属性选择的权重 = 类的权重 = 伪类的权重。三者是相等的，都是(0, 0, 1, 0); 伪元素选择器(::) 伪元素作为一种特殊的存在，我认为它不应该放在优先级里面同其他的选择器相比。

1.8K1 0

CSS快速入门（一）

因为同一个页面上有很多相似的标签并且这些标签在不同的位置有不同的样式所以为了能够区分，我们肯定先需要学习如何查找指定的标签 ---- 选择器列表如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个...例如，如果我的h1和.special类有相同的CSS，那么我可以把它们写成两个分开的规则。...，那么使用分组和嵌套可以减少代码的冗余；匹配标签之间用逗号隔开，标签与标签是或的关系；并列写可以标签和标签、标签和选择器、意思就是可以多个相同选择器或多个不同选择器都可以并列使用； /*并列的情况...*/ /* 多个相同选择器并列使用*/ div,span,p { /*查找div或者span或者p*/ color: red; } /*多个不同选择器并列使用...a[title] { } 标签属性选择器伪类选择器 p:first-child { } 伪类伪元素选择器 p::first-line { } 伪元素后代选择器 article p 后代运算符子代选择器

9492 0

css选择器攻略

前言很多小伙伴对css选择器表示不屑，觉得很简单没必要学习，其实你究竟了解多少呢？当面试官问你的时候，你能分出哪些是css3新增的选择器，他们兼容如何？又该如何处理呢？...css3选择器分类 css3选择器在最新的版本中作为一个独立的模块分离了出来，而css选择器有哪些呢？又该如何分类，请看下图。 ?...，e~f 之后的所有，卡可以选择多个；后面三个兼容ie7+ 目标伪类选择器 e:target 针对连接到的部分，兼容ie9+ 动态伪类：linked,:visited,:active,:hover...，慎重使用，比如针对ie8+ ，可以使用的有基本选择器，层次选择器，动态伪类选择器，语言伪类选择器，伪元素，属性选择器；针对ie6 建议只使用基本选择器以及简单的伪类、伪元素、后代选择器；针对现代浏览器...整体建议还是不要为了使用新的选择器而使用，要找到对应的使用场景，多使用基本选择器能避免低版本ie的适配问题。使用适配的脚本文件，实现让ie6-8ie6-8支持属性选择器，伪类选择器和伪元素。

1.1K3 0

26 个 CSS 面试的高频考点助力金三银四

CSS 中有四类可以授权选择器的特异性级别：内联样式 ID 类，属性和伪类元素和伪元素问题12：CSS有什么缺点 CSS的缺点有: 版本太多 – 与HTML或Javascript等其他参数相比，...Fragmentation - 使用 CSS，可能无法在一个浏览器上使用另一浏览器。因此，在网站上线之前，Web 开发人员必须通过在多个浏览器上运行程序来测试兼容性。...问题 20：如何在CSS中定义一个伪类?它们是用来干什么的 CSS伪类是用来添加一些选择器的特殊效果。...在复杂情况下，可以使用选择器和分组方法来应用样式。无需额外下载。嵌入式样式表的缺点：无法控制多个文档。问题 23：列出使用的各种媒体类型。不同的介质不区分大小写，因此它们具有不同的属性。...该指令告诉浏览器如何在HTML页面上渲染特定元素。它由一个选择器和一个遵循规则集的声明块组成。选择器可以附加到其他选择器，以通过规则集进行标识。问题 26：什么是 CSS 框架？

2K2 0

CSS 让网页动起来：美化与布局的终极指南

两者分离使代码更理解完什么是CSS和CSS的核心作用，那么改该怎么使用CSS呢？也就是说CSS的语法是什么？ 3....一个类可以被多个标签使用，一个标签也可以使用多个类（多个类名使用空格分割）不要使用纯数字、中文、标签名来命名类。...id选择器的值和html标签中的id相同。 id是唯一得的，不能被多个标签使用加粗的字体是和类选择器最大的区别。如果要比喻的话，类就是人的姓名可以重复，id就是身份证不能重复。...伪类选择器可以分为两种：链接伪类选择器 force伪类选择器链接伪类选择器 a：link 选择未被访问的链接。...使用伪类链接选择器时，选哟安装LVHA顺序书写，也就是link、visited、hover,active的顺序。 force伪类选择器作用：选取获取焦点的input表单元素。

2211 0

CSS笔记(20) 非常重要

CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素属性选择器结构伪类选择器伪元素选择器属性选择器: 属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者id...现在我们有一个需求,将下面4个icon小图标改成红色,该怎么做呢?...结构伪类选择器结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素(第三个是重点!)...,odd奇数 n可以使公式:常见的公式如下(如果n是公式,则从0jisuan,但是第0个元素的个数会被忽略) 比如说,我们想做一个隔行变色的效果,该怎么实现呢?...权重问题.类选择器,伪类选择器,属性选择器的权重都是10. 伪元素选择器(重点) 伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构.

4692 0

关于其他选择器以及选择器优先级详解

分析：选中类名为wrap的所有子代，因为“我在第三个标签里面”该标签不是它的子代，所以没有出现边框的样式；子代和后代选择器的区别子代和后代的区别在于，后代选择器，只要都是父级的后代...分析：代码23行的标签不是类名为outer标签的子代，而是属于后代，所以.outer > .box没有被选中该标签；伪类选择器基本语法：选择器：hover { }。...以上这些就是我们今天要给大家补充介绍的CSS选择器了，大家可以看着我们给出的代码例子，自己动手尝试使用一下，以实战的方式来掌握这些常见选择器的使用规则。...那我们现在暂时把思路返回到之前讲解的三种基本选择器上，假设我们现在对同一个div分别使用标签名选择器、类名选择器、id选择器设置不同的文字颜色，这时候页面最终会展示出来的是哪个颜色呢？...通常我们是以四位数 0 0 0 0 分别比较大小来计算优先级的。而这4位数分别对应的就是标签内书写（这个不属于选择器）、id选择器、类名选择器、标签名选择器。

1.1K8 0

别忘了前端是靠什么起家的

我追问。 “没有，就这个作用。有问题吗？”他回答。我继续探询：“不使用isFocus状态，我们还能达到同样的效果吗？” 他思考了一会儿：“如果不添加类名来标识输入框的聚焦状态，我们怎么区分呢？”...我提出了另一种方案：“我们能不能仅用CSS来实现这个效果？” 他迟疑了一下：“但是CSS怎么能识别输入框是否聚焦呢？” 我提醒他：“你有没有试过使用伪类选择器？” “伪类？我通常只用类选择器。”...我解释道：“我们可以使用:focus伪类来实现这个效果。你可以先回去继续你的工作。” 四、审查他另外的代码我继续审查了这位同事的其他代码，发现他对CSS的理解似乎并不深入。...示例假设我们想为一个列表中的第一个项目添加特殊样式，我们可以使用子选择器和伪类选择器的组合来实现这一点： ul > li:first-child { color: red; } 这个示例展示了如何使用组合选择器来精确选择并样式化特定的元素...，而无需为该元素添加额外的类或ID。

1041 0

如何正确使用:has和:nth-last-child

介绍:nth-last-child 这篇文章的主要要素之一是:nth-last-child伪类。我们可以使用该选择器来模拟计算子元素。来看看它是如何工作的。我将尽可能用直白的话来解释。...不可能根据元素的数量来设计父元素的样式想象一下，当有5个或更多的项时，我们需要为每个添加display: flex。我们不能用 :nth-last-child 伪类选择器来做这个。...CSS :nth-last-child伪类是构建条件性布局的关键。通过将它与CSS :has选择器相结合，我们可以检查一个父元素是否至少有特定数量的项，并对其进行相应的样式设计。...我们可以添加一个布尔CSS变量，当标题有4个或更多的项目时，它将被切换，然后使用样式查询来改变标题。...仅仅通过使用数量查询，我们就可以最低限度的实现，也就是：添加负间距（互相堆叠头像）。当有多个头像时，缩小头像的尺寸。

2183 0

CSS元素选择器及其优先算法

CSS 选择器这一块可以说是很基础了，只有用选择器选中元素，才能使样式生效元素选择器(标签选择器) 直接选中原生 html 标签名，该选择器可以说是优先级最低的了，在没有其它类型选择器时才会考虑它...div { width: 100px; height: 50px; } id选择器选中标签定义的 id 名字，该选择器高于类选择器但是低于内联样式 #great { width...可以根据元素的状态来进行样式的改变伪元素 :first-line 匹配元素的第一行 :first-letter 匹配元素的第一个字母 :before 在元素之前插入生成的内容...:nth-child(n) 父元素下第 n 个子元素选择器优先级算法众多类型的选择器方式，还可以组合使用，那么如何区分呢优先级由 A，B，C，D 四个值确定，计算规则如下存在内联样式...，A = 1，否则 A = 0 B 的值等于 ID选择器出现的次数; C 的值等于类选择器 + 属性选择器 + 伪类出现的总次数; D 的值等于标签选择器 + 伪元素出现的总次数将四个值当成一个序列

8812 0

【CSS】636- 你必须记住的30个css选择器

用于选取X元素下子元素Y，要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li...如果我们希望匹配href包含css9.net的所有链接该怎么做呢？看下一个选择器。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 12....在属性选择器中使用$，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。（注意，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）...让我们使用:first-child和:last-child伪类来解决此问题。...Item 3 List Item 4 在上面的html代码中，如果我们希望仅匹配List Item 2列表项该如何做呢

8793 0

深入解析CSS样式优先级

在编写样式的时候，我们一般都不会使用ID选择器来控制样式，同时也不会在HTML文档中添加过多的ID选择器。ID选择器一般更多的是用于获取元素，而不是用来控制CSS样式。再者是类选择器。...这个在CSS样式的编写中用的算是最多的一种，因为一个标签可以添加多个类名，不像ID只能添加一个，编写不同的类名来控制不同的样式显示，同时根据权重来控制样式的覆盖。...然后是标签选择器，这个在开发中也是不建议使用，更多的是建议添加一个类名来控制，以实现复用，同时方便控制。最后是通配符选择器，这个选择器的使用一般就是初始化文档结构。...经过这样的测试，我们可以猜想，在一个元素使用了ID选择器修饰了样式以后，如果在使用类选择器，这时候是是没有办法使相同的样式属性生效，生效的依然是那个ID选择器修饰的样式。为什么权重值大也没有用呢？...我猜或许是因为写了太多类名的时候再和ID相比的话，浏览器会自己去判断，选择最优的那个，毕竟10多个类名在实际的开发中是不存在的。

1K2 0

1.5 万字 CSS 基础拾遗（核心知识、常见需求）

选择器 CSS 选择器无疑是其核心之一，对于基础选择器以及一些常用伪类必须掌握。下面列出了常用的选择器。想要获取更多选择器的用法可以看 MDN CSS Selectors[5]。...)； [attr|=val]：属性以指定值(完整单词)开头的元素(不推荐使用)；组合选择器相邻兄弟选择器：A + B 普通兄弟选择器：A ~ B 子选择器：A > B 后代选择器：A B 伪类条件伪类...important； 01000：内联样式； 00100：ID 选择器； 00010：类选择器、伪类选择器、属性选择器； 00001：元素选择器、伪元素选择器； 00000：通配选择器、后代选择器、兄弟选择器...透明关键字有什么应用场景呢？实现三角形下面这个图是用 4 条边框填充的正方形，看懂了它你大概就知道该如何用 CSS 写三角形了。 ?...父元素高度一旦坍塌将对后面的元素布局造成影响，为了解决这个问题，所以需要清除浮动，让父元素恢复高度，那该如何做呢？这里介绍两种方法：通过 BFC 来清除、通过 clear 来清除。

1.4K2 0

每个前端都需要知道这些面向未来的CSS技术

使用 :is() 减少重复你可以使用 :is() 伪类来删除选择器列表中的重复项。...使用 :where() 来保持低特殊性 :where() 伪类与 :is() 具有相同的语法和功能。...:where() 伪类及其任何参数都不对选择器的特殊性有所帮助，它的特殊性始终为零此功能对于应易于覆盖的样式很有用。...; } 复制代码由于其较高的特殊性（B = 1，C = 1），网站无法使用单个类选择器（B = 1）覆盖此声明，并且被迫添加 !...最早通过标签来引用图标（每个图标一个文件）为了节省请求，提出了Sprites的概念，即将多个图标合并在一起，使用一个图片文件，借助background相关的属性来实现图标图片毕竟是位图，面对多种设备终端

7653 0

这些CSS的新特性还是有必要进来瞧瞧的

使用 :is() 减少重复你可以使用 :is() 伪类来删除选择器列表中的重复项。...使用 :where() 来保持低特殊性 :where() 伪类与 :is() 具有相同的语法和功能。...:where() 伪类及其任何参数都不对选择器的特殊性有所帮助，它的特殊性始终为零此功能对于应易于覆盖的样式很有用。...; } 由于其较高的特殊性（B = 1，C = 1），网站无法使用单个类选择器（B = 1）覆盖此声明，并且被迫添加 !...最早通过标签来引用图标（每个图标一个文件）为了节省请求，提出了Sprites的概念，即将多个图标合并在一起，使用一个图片文件，借助background相关的属性来实现图标图片毕竟是位图，面对多种设备终端

8052 0

1.5 万字 CSS 基础拾遗（核心知识、常见需求）

选择器 CSS 选择器无疑是其核心之一，对于基础选择器以及一些常用伪类必须掌握。下面列出了常用的选择器。想要获取更多选择器的用法可以看 MDN CSS Selectors[5]。...)； [attr|=val]：属性以指定值(完整单词)开头的元素(不推荐使用)；组合选择器相邻兄弟选择器：A + B 普通兄弟选择器：A ~ B 子选择器：A > B 后代选择器：A B 伪类条件伪类...important； 01000：内联样式； 00100：ID 选择器； 00010：类选择器、伪类选择器、属性选择器； 00001：元素选择器、伪元素选择器； 00000：通配选择器、后代选择器、兄弟选择器...透明关键字有什么应用场景呢？实现三角形下面这个图是用 4 条边框填充的正方形，看懂了它你大概就知道该如何用 CSS 写三角形了。...父元素高度一旦坍塌将对后面的元素布局造成影响，为了解决这个问题，所以需要清除浮动，让父元素恢复高度，那该如何做呢？这里介绍两种方法：通过 BFC 来清除、通过 clear 来清除。

1.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭