css-selectors 相关问题

选择器是与文档树中的元素匹配的模式。在CSS规则中,它们用于为与模式匹配的元素定义样式。

CSS 选择器是否包含类似于 xpath 的文本?

在 Selenium 中,是否有任何带有“contains”的 CSS 选择器选项,类似于 Xpath,我们使用 contains[text(),....] 进行检查。 在下面的示例中,我给出了 CSS 和 Xpath &...

回答 3 投票 0

是否可以有一个基于 CSS 属性(及其值)的 CSS 选择器?

例如,我想要一个适用于所有具有 CSS Overflow:auto; 的 div 元素的 CSS 选择器。财产。是否有可能有这样的选择器?

回答 3 投票 0

CSS - 不同的第 n 种类型

我确信这是可能的,但我不知道如何通过 CSS 实现它。 我想在第一次找到该组时定位一个类的第三个实例,并在第二次找到该组时定位第二个实例...

回答 1 投票 0

如何使用 css 更改辅助字体的大小而不更改后备(主要)字体的大小?

我正在尝试将一组特定的 h1 标题更改为与我为 h1 定义的普通字体不同的字体,因此我创建了一个类,将 h1 字体系列定义为该类的 Font2 - 但如果

回答 1 投票 0

当焦点位于另一个元素时更改元素的样式

当焦点位于另一个div上时,我需要更改div的样式。我尝试了以下代码,但没有用 我的 css 文件看起来像这样 #一 { 背景... 当焦点位于另一个 div 上时,我需要更改 div 的样式。我尝试了以下代码,但没有工作 <div id="one"> <div id="two"> 我的CSS文件看起来像这样 #one { background-color:red; } #two:focus #one { background-color:green; } 非常感谢任何帮助! 如果您的意思是 :hover 而不是 :focus,则使用相邻的选择器,使用 + 将在 #two 的 :hover 上选择您的 #one #one:hover + #two { color: red; } 演示 注意:您有一个拼写错误,例如 if 而不是 id,另外,请关闭您的 div 元素。 正如您所说,您希望将焦点放在 div 上,而不是将 :hover 替换为 :focus,但相邻选择器逻辑保持不变... <div id="one" tabindex="1">One, Hover Me</div> <div id="two">Two</div> #one:focus + #two { color: red; } 演示 (按第一行看效果)或者(在jsfiddle中点击结果窗口,然后按一次tab按钮) <pre> <div id="parent"> <input type="text" id="one"/> <input type="text" id="two"/> </div> #parent.has(#one:focus) { color: red; } </pre> 只需尝试制作您想要为父级设置样式的元素 当我遇到这样的事情时,我就是这么做的 使用jquery解决问题或使用css中的hover属性

回答 3 投票 0

CSS 宽度属性覆盖

我有这个CSS: .选择的容器{ 位置:相对; 显示:内联块; 垂直对齐:居中; 字体大小:13px; -webkit-用户选择:无; -moz-用户选择:无; ...

回答 1 投票 0

需要帮助来理解下面的jquery代码

首页 博客 Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut <a href="#home">Home</a> <a href="#blog">Blog</a> <div id="home"> Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto</div> <div id="blog"> Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto</div> $('a[href*=#]').click(function(event){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 1000); event.preventDefault(); }); 此代码用于平滑滚动点击主页、博客链接。但我无法理解 jquery 部分。这是什么意思 -> $('a[href*=#]') 还有这个-> scrollTop: $( $.attr(this, 'href') ).offset().top 请帮助我。我是 jquery 的新手.. $('a[href*=#]') 选择具有 a 属性(href 匹配属性)且包含([] 是包含匹配器)a *= 的所有 # 元素。 这意味着同一页面上的所有链接(因为它们是基于锚点的)的滚动都是动画的。 scrollTop: $($.attr(this, 'href')).offset().top 选择所单击的链接指向的目标 (.offset()) 到页面顶部 (.top) 的偏移量 ($($.attr(this, 'href))) 并滚动到此位置。

回答 1 投票 0

使用 CSS 匹配空输入字段

如何将样式应用于空输入字段?如果用户在输入字段中键入内容,则不应再应用该样式。这在 CSS 中可能吗?我试过这个: 输入[值=“”]

回答 15 投票 0

选择最后一个没有类的元素[重复]

我在特定 JS 事件的元素中动态添加和删除类。我想做的是选择最后一个没有这些 CSS 类的子元素。 例子#1 <

回答 3 投票 0

如何让 Puppeteer 仅单击具有设置“状态”的选择器?

我正在尝试制作一个机器人来帮助我买票,但是如图所示,只有几个座位。 我有一个问题要解决如何让 Puppeteer 仅单击可用的座位。 在

回答 1 投票 0

仅针对一种文件类型的类或 ID 中的 CSS 选择器

我是CSS新手(非常新,第三天),并且已经到处搜索有相同查询的人,但我没有找到任何东西。到目前为止,我已经尝试为图像创建一个类或 id,并且......

回答 1 投票 0

CSS - 是否可以在父元素中选择多个不同的子元素而不重复父元素?

我整个下午都在研究 CSS 选择器,试图找到这个问题的答案,因为它看起来很简单,但我一生都找不到任何解决方案。 给定类似于以下的结构:...

回答 3 投票 0

使用容器查询标准 CSS 属性

我尝试让容器样式查询正常工作,但发现了一些奇怪的地方。 考虑以下代码: html ... <... 我尝试让容器样式查询工作,但发现了一些奇怪的地方。 考虑以下代码: html <div class="parent"> <div class="child"> ... </div> </div> CSS .parent { --test-var: red; background-color: grey; } @container style(background-color: grey) /* @container style(--test-var: red) */ { .child { background-color:red; } } 上述 css 规则不应用 'child-style',尽管这应该遵循有关此功能的 MDN 文档。 使用自定义属性上的查询(即通过使用注释的 css 查询),事情按预期/记录工作(使用 chrome 版本 128.0.6613.138 等进行测试)。 也许这个功能还没有准备好以这种方式使用。 但如果我错过了什么,我很想知道。 提前致谢! 添加了 jsfiddle 如果有人想尝试一下。 在父元素上使用 container-type。 .parent { container-type: inline-size; } 这应该可以正常工作。

回答 1 投票 0

Selenium Python css 选择器按类不起作用

我有 4 种方法来定位某个元素并想要单击它: DOM 是: 我通过四种方式定位这个元素: (通过.XPATH,... 我有 4 种方法来定位某个元素并想单击它: DOM 是: <div class="ui dropdown selection" tabindex="0"> 我通过四种方式定位这个元素: (By.XPATH, "//div[@class='ui dropdown selection']") (By.CSS_SELECTOR, "[class='ui dropdown selection']") (By.CSS_SELECTOR, ".ui dropdown selection") (By.CLASS_NAME, "ui dropdown selection") 我只是点击元素 方式 1 和 2 有效,测试正常 - 并且 len(element) 为 1 方式3和4不起作用:NoSuchElementException:消息:没有这样的元素:无法定位元素:{“method”:“css选择器”,“selector”:“.ui下拉选择”} - 和len(元素)是 0 (等待没有帮助,方式一、方式二根本不需要等待) 你能告诉我为什么方法3和方法4失败了吗? 当在 CSS 选择器中为同一标签使用多个类名时,它们必须用点而不是空格分隔。这是表达第三个的正确方式: (By.CSS_SELECTOR, ".ui.dropdown.selection") 或 (By.CSS_SELECTOR, "div.ui.dropdown.selection"). 对于第四个,你不能将 By.CLASS_NAME 与多个类名组件一起使用。您必须选择一个,但由于这可能不会为您提供唯一的选择器,因此您最好使用其他方法之一来形成选择器。 @迈克尔 (By.CSS_SELECTOR, ".ui.dropdown.selection") (By.CSS_SELECTOR, "div.ui.dropdown.selection") 两者都不起作用 - selenium.common.exceptions.NoSuchElementException:消息:没有这样的元素:无法找到元素 但请注意,只有 1 个元素,因为这有效: (By.XPATH, "//div[@class='ui dropdown selection']") 和len(element) = 1

回答 2 投票 0

开发工具中硬盘上找不到的CSS文件是什么?

这是 Thunderbird 开发工具的屏幕截图。我想用不会刺激我眼睛的颜色替换突出显示的黄色(我在 Thunderbird GUI 中使用深色主题)。 所以,我创造...

回答 1 投票 0

为可点击容器创建“虚拟”按钮

TL; DR:尝试在可点击容器中制作一个具有悬停效果的虚拟按钮。 前言:我只寻找 HTML/CSS 解决方案(我已经知道如何使用 JS 来做到这一点)。 我正在研究一个简单的...

回答 1 投票 0

如何使用 Selenium 通过单击来刷新 Tableau

有没有办法访问 Tableau 可视化工具栏按钮,例如“刷新此视图中的数据”? 我尝试通过 id 和 Xpath 来定位工具栏元素,但它抛出一个元素未找到异常...

回答 2 投票 0

选择器匹配元素后具有相同类的所有相似元素?

我正在尝试获取 CSS 选择器来匹配具有 .disabled 类名的元素,但仅限于具有 .today 类名的元素之后。它应该与下面的第 11 天、第 12 天和第 13 天元素匹配

回答 2 投票 0

为什么我的 tr:nth 孩子不为网站表工作?

因此,我正在尝试为作业创建一个个人网站,并且出于某种原因执行代码,该网站上的表格无法将任何行识别为每个单独的行。我有...

回答 1 投票 0

通过纯 CSS 选择一对中的 <br> 元素之一

有没有一种方法可以通过纯 CSS 选择一个元素,紧跟在(或前面)其他元素? 例如,将 中的一个隐藏在 对中: 文字文字<... 有没有一种方法可以通过纯 CSS 选择一个紧随(或之前)其他元素的元素? 例如,将 <br> 中的一个隐藏在 <br><br> 对中: <p>text text <br><br>text text <br>text text <br><br>text text</p> <p>text text <br>text text <br><br>text text <br><br>text text</p> <p>text text <br><br>text text <br>text text <br><br>text text</p> 最后将其处理为: <p>text text <br>text text <br>text text <br>text text</p> <p>text text <br>text text <br>text text <br>text text</p> <p>text text <br>text text <br>text text <br>text text</p> display: none; 适用于 br + br 或 br ~ br 不起作用,如上所述。 这里的问题是,唯一分隔 br 元素的是文本。 CSS 中的同级组合器会忽略元素之间的所有非元素节点,包括(但不限于)注释、文本和空格,因此就 CSS 而言,所有段落都恰好有五个连续的 br 子节点: <p> <br><br> <br> <br><br> </p> <p> <br> <br><br> <br><br> </p> <p> <br><br> <br> <br><br> </p> 也就是说,每个段落中第一个之后的每个br都是一个br + br(并且通过扩展也是一个br ~ br)。 您将需要使用 JavaScript 来迭代段落,找到紧随其后或之前是另一个 br 元素节点而不是文本节点的 br 元素节点,然后删除所述其他节点。 var p = document.querySelectorAll('p'); for (var i = 0; i < p.length; i++) { var node = p[i].firstChild; while (node) { if (node.nodeName == 'BR' && node.nextSibling.nodeName == 'BR') p[i].removeChild(node.nextSibling); node = node.nextSibling; } } <p>text text <br><br>text text <br>text text <br><br>text text</p> <p>text text <br>text text <br><br>text text <br><br>text text</p> <p>text text <br><br>text text <br>text text <br><br>text text</p> 这可能不可靠,但是有效,至少在 Firefox 上: br { display: block; } br { display: block; } <p>text text <br><br>text text <br>text text <br><br>text text</p> <p>text text <br>text text <br><br>text text <br><br>text text</p> <p>text text <br><br>text text <br>text text <br><br>text text</p> 我从一位同事的代码中发现的另一个解决方案是将 content: "" 添加到 br(也必须在 display: block 中)。我不完全确定它是如何工作的,但它确实在内部文本之间呈现连续的br。问题是这不适用于 Safari。

回答 3 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.