css-selectors 相关问题

使用单选按钮切换时捕获元素的输入，并仅使用 html 和 css 在父级之外显示

我不确定我的解决方案是否正确设计，但本质上我有两个无线电输入，当我选择一个选项时，它会显示锚标记 .tick，这很好。现在我有一个名为 ...

在 CSS 中，当我们以“vw”为单位时，为什么需要“max-width”属性？例如：“max-width: 80vw”与“width: 80vw”不一样吗？

一般来说，如果我们为任何元素分配宽度，两个属性（“max-width: 80vw”和“width: 80vw”）的行为是否会相同？还有什么可能的用途...

使用 CSS 在树中选择父 n 层？

我有一个具有相对复杂的DOM结构的应用程序，有20+层div。 如果我在树中间的某个地方有一个 class="active" 的 div，我如何在

ElementNotInteractableException：元素不可交互 C# Nunit Selenium

我是 Selenium C# Nunit 的新手。 我运行了以下代码行 IWebElement SplitCase = driver.FindElement(By.XPath(".//*[@id='OpportunityPageV2UsrSplitCase503e4272-cdbd-44d2-98c2-

在 selenium webdriver 中获取工具提示标题时出现问题

我正在尝试找到一种方法来获取鼠标悬停事件上显示的工具提示的标题 在页面上： https://demo.nopcommerce.com/nike-floral-roshe-customized-running-shoes 当我...时会出现此工具提示

使用 Google 标签管理器从特定页面元素中提取价格作为变量

我的目标是使用 Google 跟踪代码管理器从指定的 HTML 元素中检索价格值（278.45 美元），并将其存储为变量以供进一步使用。 目标元素： 我的目标是使用 Google 跟踪代码管理器从指定的 HTML 元素中检索价格值 ($278.45)，并将其存储为变量以供进一步使用。 目标元素： <div class="sc-fbgIAx CmZAI pricing-summary-row"> <span class="sc-dxUwTY BLzzV">Total Due Now (USD):</span> <span data-testid="total-due" class="sc-dxUwTY BLzzV">$278.45</span> </div> 我尝试在 GTM 中使用 JavaScript： var totalDueElement = document.querySelector('[data-testid="total-due"]').textContent; 但是，我还没有成功检索到该值。有人可以提供解决方案并解释正确的方法吗？我正在寻求有关如何有效获取相似价值观的指导。 在“自定义 Javascript”变量中，您应该使用返回变量的函数。 您的情况： function returnRevenue () { return document.querySelector('[data-testid="total-due"]').textContent; } 在您的情况下，它将返回 '$278.45'。

如何通过selenium更改预订中的货币

我正在尝试通过 Selenium 在 booking.com 网站上兑换美元货币 但我在“点击”美元符号时遇到了一些问题。我的代码始终设置列表中的第一个货币，即欧元。我明白了...

提取产品链接的正确选择器是什么？

我想抓取此网页中的产品链接（href）。 https://www.artfinder.com/editors-picks/theme/amazing-techniques/blurred-lines/#/ 我正在使用 r，但无法弄清楚 ri 是什么...

如何使用CSS选择器选择父母div的同级[重复]

我想在输入字段有效或无效时选择标签。我该如何实现这一目标？ 我想在输入字段有效或无效时选择标签。我如何实现这一目标？ <div class="amplify-flex" style="flex-direction: column;"> <fieldset class="amplify-flex" style="flex-direction: column;"> <span class="amplify-visually-hidden"> <legend>Sign in</legend> </span> <div class="amplify-flex amplify-field amplify-textfield"> <label class="amplify-label" for="amplify-id-:r4:">Email</label> <div class="amplify-flex amplify-field-group amplify-field-group--horizontal" data-orientation="horizontal"> <div class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal" data-orientation="horizontal"><input aria-invalid="false" autocomplete="username" class="amplify-input amplify-field-group__control" id="amplify-id-:r4:" required="" type="text" name="username"></div> </div> </div> .amplify-field:has(input:valid) label 查找具有有效输入字段并且具有子标签的所有类（.amplify-field） 感谢@CBroe！

如何创建 CSS 外圆来将图像作为内圆

我想创建一个外圆来将图像作为内圆，但我应用的样式不起作用。我附上了我想要实现的目标的图像以及我尝试实现的代码。输入

在 :has() 中嵌套相对选择器？

说我有 我想选择外层div ...

html 元素上的多个类似乎不起作用

我见过很多这样的例子，例如如何将多个类分配给 HTML 容器？ 我似乎做得对，但我的元素似乎总是有 1 类。 所以我有 我见过很多这样的例子，例如如何将多个类分配给 HTML 容器？ 我似乎做得对，但我的元素似乎总是有 1 个类。 所以我有 <div class="row_gap row"> 但是“row_gap”类似乎不起作用。页面上没有证据表明它正在应用，并且 chrome 开发工具的 css 部分也没有提及它（见下图） 为什么我在chrome开发工具的css中看不到row_gap。 为什么我的 row_gap 类根本不起作用。 ################额外信息 这里有证据表明来源已经找到了有问题的班级 问题出在 CSS 中的选择器上。在 CSS 文件中，您选择的是 ID（通过 #）而不是类（通过 .）。 因此，为了做到这一点，您需要将 # 替换为 .像这样： .row_gap { // Add your properties here }

如何使用`querySelector`来选择标签带有冒号的元素？

例如，我们有这个 XML： 例如，我们有这个 XML： <?xml version="1.0" encoding="UTF-8"?> <xml xmlns:media="http://search.yahoo.com/mrss/"> <media:content></media:content> </xml> 那么，如何在 JavaScript 中使用 foo:bar 选择标签为 querySelector 的节点呢？ 一个天真的做法是这样的： const xml = new DOMParser().parseFromString(` <?xml version="1.0" encoding="UTF-8"?> <xml xmlns:media="http://search.yahoo.com/mrss/"> <media:content></media:content> </xml> `, 'text/xml'); const node = xml.querySelector('media\\:content'); 然而，在此之后，node就变成了null。 也许相关： https://bugzilla.mozilla.org/show_bug.cgi?id=883044 使用“:”（冒号）按属性选择元素 （这个讲的是id里有冒号的时候） 使用纯 JavaScript 选择带冒号的 XML 元素 （答案建议getElementsByTagName，但我想用querySelector来获得更大的灵活性） 您的示例中有一个错误。第一行必须是 xml 声明。 const xml = new DOMParser().parseFromString(`<?xml version="1.0" encoding="UTF-8"?> <xml xmlns:media="http://search.yahoo.com/mrss/"> <media:content></media:content> </xml> `, 'text/xml'); document.querySelector 函数不提供对命名空间的支持。 您可以使用非命名空间选择器来查找 content 元素。 const node = xml.querySelector('content');

默认：带有 CSS 的目标

我有这个CSS： 。标签 { 显示：无； } .tab:目标{ 显示：块； } 还有这个 HTML： 我有这个CSS： <style type="text/css"> .tab { display: none; } .tab:target { display: block; } </style> 还有这个 HTML： <div class="tab_container"> <ul class="tabs"> <li><a href="#updates-list">List</a></li> <li><a href="#updates-map">Map</a></li> </ul> <ul class="tab list" id="updates-list"> Eh.. Hello! </ul> <div class="tab map" id="updates-map"></div> </div> 但是，如果未指定目标（URL 中的#）并且尚未单击任何选项卡，我的页面将为空。我想默认显示 ul#updates-list。 我该怎么做？谢谢。 更新：接下来，如果不是初始目标，我的谷歌地图就会损坏。有谁知道解决方法吗 我不得不说，不幸的是，我能想到的唯一解决方案是使用 JavaScript。比如： <script type="text/javascript"> if (document.location.hash == "" || document.location.hash == "#") document.location.hash = "#updates-list"; </script> 编辑： 好的，找到了 CSS 解决方案。然而，这需要将默认条目 #updates-list 放置在最后（在 #updates-map 以及您可能添加的任何其他选项卡之后）： .tab, .tab:target ~ #updates-list { display: none; } #updates-list, .tab:target { display: block; } 我知道这是一个老问题，但它仍然相关，我有另一个建议： <a href="#tab1">Tab 1</a> <a href="#tab2">Tab 2</a> <a id="tab1"></a> <a id="tab2"></a> <div class="tab tab1 default-tab">Some content</div> <div class="tab tab2">Some other content</div> 和CSS： .tab {display:none} .default-tab {display:block} :target ~ .default-tab {display:none} #tab1:target ~ .tab1, #tab2:target ~ .tab2 { display: block } 这可以让您根据需要对选项卡进行排序，但如果您动态生成 html，则需要动态生成 css。或者在编写 css 时选择支持的最大选项卡数量。 这似乎是我能找到的最短的答案： location=location.hash||"#updates-list" 这只是将用户重定向到有效的哈希值（如果该哈希值当前不存在 或为空 #）。 ~98% 的用户启用了 JavaScript，因此 JS 解决方案应该不是问题。 我猜您想要做的是选择类似 .tab_container:not(> :target) > .default 的内容，以在没有人成为目标时显示默认选项卡。但是，这是不可能的，因为 :not() 伪类仅采用简单的选择器（即，仅 :target，而不是 > :target，在这种情况下，您将检查容器的目标，而不是子容器）。 我会执行以下任一操作： 使用 Javascript 将目标设置为加载时的第一个选项卡（或者只要求存在锚点）。 为第一个活动选项卡添加特定的覆盖类，并在第一个选项卡切换后将其删除（再次使用 Javascript）。 第一个替代方案会扰乱浏览器历史记录，而第二个替代方案会造成代码混乱。我现在想不出一个“完美”的解决方案。也许您最好完全使用 Javascript 来检测当前目标，以便与非 CSS3 浏览器兼容并以某种干净的方式解决这个特定问题？ 有用： .tab#tabControl { display:block; } .tab:not(:target) { display:none; } .tab:target ~ #tabControl { display:none; } 这不是一个纯粹的 CSS 解决方案，但它使用了一点点 JavaScript，极大地简化了所有代码： location=location.hash||"#one" （感谢：https://stackoverflow.com/a/32470599/1282216） 这是演示这一点的极简 SPA（单页应用程序）。第一个“页面”立即可见，但在单击其他链接时隐藏 <!doctype html> <title>personal web page</title> <style> section:target { display: block; } section { display: none; } </style> <h1>About me</h1> <nav> <a href="#one">Travel</a> <a href="#two">Hobbies</a> <a href="#three">Links</a> </nav> <section id="one"> <h2>Travel</h2> <p>Places I like to travel to.</p> </section> <section id="two"> <h2>Hobbies</h2> <p>Things I like to do.</p> </section> <section id="three"> <h2>Links</h2> <p>My favourite links.</p> </section> <script> location=location.hash||"#one" </script> 我找到了另一个解决方案，与此处显示的任何解决方案不同。我相信这仅限于相当现代的浏览器（我不知道完整的兼容性列表，但它从 2023 年底开始在 Chromium 中为我工作），但是以下 CSS 对我有用，只需对 HTML 进行细微调整（如下所示）： <style type="text/css"> .tab { display: none; } .tab:target, :not(:has(.tab:target)) .tab.default { display: block; } </style> 对于 HTML，我基本上只是将 default 添加到 #updates-list ul 标签的类列表中： （注：你仍然可以通过 ID 选择，而不是新类，我只是以某种方式发现了这个更干净的东西 - YMMV。我还在 #updates-map 中添加了一些文本，以便在测试时在屏幕上显示一些内容这个例子。） <div class="tab_container"> <ul class="tabs"> <li><a href="#updates-list">List</a></li> <li><a href="#updates-map">Map</a></li> </ul> <ul class="tab list default" id="updates-list"> Eh.. Hello! </ul> <div class="tab map" id="updates-map"> [Imagine a map here.] </div> </div> 说明： CSS 第二部分中的第二个选择器 :not(:has(.tab:target)) .tab.default 会查找不存在具有 .tab 属性的 :target 项的情况，然后在这种情况下，还将 display: block; 应用于任何 .tab 元素也应用了 .default 类。 这还有一些额外的好处： 它不需要任何特定的顺序，如RoToRa的答案； 一个可能有多个具有默认属性的选项卡，因此如果没有选择特定目标，页面上会显示多个内容（如果有，则只会显示该目标，就像以前一样）。 顺便说一句，我之所以找到这个解决方案，是因为 Amy Kapernick 关于在没有 JavaScript 的情况下做这样的事情的演讲。

CSS：仅当其中任何一个具有类时，如何有条件地选择最后一个 X nth-last-of-type？

仅使用CSS，我想选择最后4个元素，但前提是它们中的任何一个具有“selected”类。 在代码片段中，您可以在第二行中看到我希望它如何工作。 我...

如何在 Css 中的 h2 标签内设置 span 标签的样式

我正在尝试创建一个简单的网站，但它没有完全显示我想要的内容 在我的 HTML 中，我没有将跨度分配给任何类或 id。我怎样才能做到这一点？ h2 标签如下所示： 法... 我正在尝试创建一个简单的网站，但它没有准确显示我想要的内容 在我的 HTML 中，我没有将跨度分配给任何类或 id。我怎样才能做到这一点？ h2 标签如下所示： <h2> Falafel <span>New</span></h2> 如何使用 CSS 设置样式？ 您可以通过选择 h2 元素，然后简单地使用选择器的子元素（选择器之间的空格）来选择它： h2 span { color: red; } <h2> Falafel <span>New</span></h2>

如何使用 not:first-child 选择器？

我有包含几个 ul 标签的 div 标签。 如果我尝试仅为第一个 ul 标记设置 CSS 属性，并且此代码有效： div ul:第一个子项 { 背景颜色：#900； } 当我想设置CSS时

如果内部div为空，我想隐藏外部div

我有两个div，一个孩子和一个父母。孩子包含一个联系电话。如果没有联系电话号码，我希望父级 div 不显示任何联系电话号码。我正在尝试使用 :empty CSS 语句，但我想...

DOM：迭代不包括匹配相同选择器的嵌套元素的元素

（请不要使用JQUERY） 假设我有以下树。我想迭代从 div.foo 开始匹配 querySelectorAll('div.bar') 的元素，但不迭代匹配相同选择的子元素...

单击带有 seleniumbase 的元素

我正在尝试单击带有 seleniumbase 的元素，但它没有按预期发生 我尝试了以下方法，但由于某种原因它不起作用： driver.click('div[class="ovm-