css-selectors 相关问题

CSS3 属性位置粘性不起作用

嗨，我已在我的一个元素上应用了位置粘性。我使用了以下代码： 位置：粘性； 顶部：10px； z 索引：1； 我还删除了父类中隐藏的溢出。但还是粘着 pos...

如何选择特定元素之后的所有文本节点

HTML： 第一 第二个 第三 第四 HTML： <div class="someclass"> <h3>First</h3> <strong>Second</strong> <hr> Third <br> Fourth <br> <em></em> ... </div> 从上面的div节点我想获取hr之后的所有子文本节点（"Third"，"Fourth"，...可能还有更多） 如果我这样做 document.querySelectorAll('div.someclass>hr~*') 我得到NodeList [ br, br, em, ... ] - 没有文本节点 与下面 document.querySelector('div.someclass').textContent 我将所有文本节点作为单个字符串 我可以将每个文本节点获取为 var third = document.querySelector('div.someclass').childNodes[6].textContent var fourth = document.querySelector('div.someclass').childNodes[8].textContent 所以我尝试了 document.querySelector('div.someclass').childNodes[5:] # SyntaxError 和slice() document.querySelector('div.someclass').childNodes.slice(5) # TypeError 有什么方法可以获取从 hr 节点开始的所有子文本节点吗？ 更新 我忘了提这个问题是关于网络抓取，而不是网络开发......我无法更改 HTML 源代码 您可以获取内容并使用 hr 进行拆分来获取 hr 之后的 html，然后在 div 中替换此内容，您将能够操纵此 div 来获取您的内容： var content = document.querySelector('.someclass').innerHTML; content = content.split('<hr>'); content = content[1]; document.querySelector('.hide').innerHTML = content; /**/ var nodes = document.querySelector('.hide').childNodes; for (var i = 0; i < nodes.length; i++) { console.log(nodes[i].textContent); } .hide { display: none; } <div class="someclass"> <h3>First</h3> <strong>Second</strong> <hr> Third <br> Fourth <br> <em></em> ... </div> <div class="hide"></div> .childNodes 包括文本和非文本节点。 你的语法错误是因为你不能像javascript中的[5:]那样进行数组切片。 而且 NodeList 类似于数组...但不是数组...这就是为什么 slice 不能直接在 childNodes 上工作。 1) 获取你的 NodeList var nodeList = document.querySelector('.some-class').childNodes; 2）将NodeList转换为实际数组 nodes = Array.prototype.slice.call(nodes); （注意在现代 ES6 浏览器中你可以这样做 nodes = Array.from(nodes); 此外，现代浏览器还添加了对 NodeList 对象的 .forEach 支持...因此您可以直接使用 .forEach，而无需在现代浏览器中对 NodeList 进行数组转换） 3）迭代收集你想要的文本节点 这取决于你自己的逻辑。但是您可以迭代节点并测试是否 node.nodeType == Node.TEXT_NODE 来查看任何给定节点是否是文本节点。 var foundHr = false, results = []; nodes.forEach(el => { if (el.tagName == 'HR') { foundHr = true; } else if (foundHr && el.nodeType == Node.TEXT_NODE) { results.push(el.textContent); } }); console.log(results); 您可以使用这段代码获取node下的所有文本节点： var walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null, false); var textNode; var result = []; while (textNode = walker.nextNode()) { result.push(textNode); } 并且您已经获得了 Array 文本节点，因此您可以根据需要 slice() 来使用它： console.log(result.slice(5)); 另一种[递归]解决方案 const { childNodes } = <Element>document.querySelector('.someclass'); // throws an error if element doesn't exist const siblings = sliceNodeList([], false, 'hr', ...childNodes); function sliceNodeList(nodes: Node[], deep: boolean, selector: string, node?: Node, ...more: Node[]) { if (!selector) return nodes; if (!node) return nodes; const { nodeType } = node; const handle = { // not concerned with Attr Nodes [Node.ELEMENT_NODE]: handleElement, [Node.TEXT_NODE]: handleOther, [Node.COMMENT_NODE]: handleOther, }[ nodeType ]; if (handle) handle.call(this, nodes, deep, selector, node); if (more.length) sliceNodeList(nodes, deep, selector, ...more); return nodes; } function handleElement(nodes: Node[], deep: boolean, selector: string, node: Element) { const { childNodes } = node; // not concerned with Attr Nodes const matches = node.matches(selector); if (nodes.length) nodes.push(node); // assume we must have already matched else if (matches) nodes.push(node); // we matched on an element if (deep) sliceNodeList(nodes, deep, selector, ...childNodes); // keep diving into substructures return nodes; } function handleOther(nodes: Node[], deep: boolean, selector: string, node: Text|Comment) { if (nodes.length) return [ ...nodes, node ]; // assume we must have already matched if (node.data === selector) return [ ...nodes, node ]; // we matched on a Text or Comment value return nodes; } 基本上，这只是通过检查在映射到正确的节点类型的处理程序时是否有更多同级来使用递归。它通过调用父函数来使用相互递归（如果deep === true）来深入嵌套结构。我们在这里并不关心 Attr Node，但您可以为此设置一个处理程序。 因为 Text 和 Comment 共享足够多的相同接口 (node.data)，我们能够重用相同的函数。该函数与 handleElement 类似，假设 if (nodes.length) 那么我们已经匹配，并且可以安全可靠地将当前节点添加到集合中。 与 handleElement 不同，Text 或 Comment 无法呼叫 node.matches。但是，如果节点的值等于 selector，我们仍然可以在节点上进行匹配 - 使我们能够通过文本进行选择。我们可以更进一步，我们可以使用 === 或 String.prototype.includes 之类的东西，而不是使用 RegExp 对整个文本（或注释）值使用严格相等。 我们可以使用 for、while 或其他迭代方法。然而，在我看来，递归是遍历 DOM 的更好方法，因为 DOM 是集成的（Node 实现了复合模式），因此是递归结构。我也只是很快地在 VSCode 中完成了这个，甚至没有在浏览器控制台中运行它，但我一直在编写这个模式，所以它应该非常接近 good-to-go。 希望有帮助。

Google 标签管理器变量 - 根据字段标签提取价格

我相信我的用例中的类的价值会轮换或更改，这导致我当前的方法不起作用。 目前的方法如下： var elements = document.querySelectorAll('ul.sc-kUVfrs.c...

如何在悬停时放大 div 并缩小所有其他 div

我一直在试图解决这个问题，但没有成功。 下面是 6 个圆形 div。当用户将鼠标悬停在其中一个上时，我希望悬停的 div 扩大一点（放大），而所有其他...

选择后面没有另一个元素

我需要能够选择一个 HTML p 标签，前提是它后面没有另一个具有特定类的 div 元素。例如，我需要选择这个 P <... 我需要能够选择一个 HTML p 标签，前提是它后面没有另一个具有特定类的 div 元素。例如，我需要选择这个P <div id="myContainer"> <p>...</p> <div>...</div> </div> 但不是这个，因为它后面跟着一个 class="red" 的 div。 <div id="myContainer"> <p>...</p> <div class="red">...</div> </div> 这就是我正在尝试的： #myContainer > p ~ div:not(.step) 您无法使用 CSS 来定位先前的元素，但根据您的 HTML 结构，您可以使用直接同级选择器。 CSS： .myContainer p + div:not(.red) { border: 1px solid #000; } HTML： <div class="myContainer"> <p>...</p> <div>...</div> </div> <div class="myContainer"> <p>...</p> <div class="red">...</div> </div> 演示 http://jsfiddle.net/92VVZ/ 给出以下 HTML 代码： <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title>Test page</title> </head> <body> <div id="myContainer"> <p>P1</p> <div>D1</div> </div> <div id="myContainer"> <p>P2</p> <div class="red">D2</div> </div> </body> </html> CSS 选择器： p:not(:has(+div.red)) 将选择第一个p，但不会选择最后一个。 说明： :not()伪类表示一个未由其参数表示的元素 (link) :has()伪类（link）表示一个元素，当锚定到该元素时，该元素与其参数中的选择器相匹配。该伪类自 Chrome >= 105（2022 年 8 月 30 日发布）起开始工作，而截至 2023 年 12 月，它尚未在 Firefox 中发布(link) 下一个同级组合器 + 选择元素的下一个同级 (link) 所有其他答案都是错误的，因为它们选择了 div 元素，而不是之前的 p 元素。 你是这个意思吗？那么你就快到了。 演示 /* will select p not directly followed by div.red */ #myContainer > p + div:not(.red)

CSS中按属性选择元素

是否可以通过 HTML5 数据属性（例如 data-role）来选择 CSS 中的元素？

如何仅使用 CSS 选择器根据该项目的子属性来选择列表中的第 n 个项目

所以如果我有一个这样的列表： 所以如果我有一个这样的列表： <ul> <li><button disabled/></li> <li><button disabled/></li> <li><button /></li> <li><button /></li> <li><button /></li> </ul> 并且禁用按钮的数量永远不知道 - 但将始终是连续的并出现在启用按钮之前，如何选择第二个启用按钮？ 现在我有： “ul li:nth-of-type(2) button:not([disabled])” 但这只会选择第二个<li>，其子按钮未禁用 - 如果禁用，则不会选择任何内容。 换句话说，它不会“找到”第二个启用的按钮，它只是检查第二个按钮是否启用并相应地选择它。 我已经尝试过了 “ul li button:not([disabled]):nth-of-type(2)” 但问题是该按钮是 <li> 的唯一子元素，因此 nth-of-type(2) 没有任何内容可供选择。 我认为我需要能够写的是这样的： “ul (li button:not([disabled])):nth-of-type(2)” 但我认为这不是正确的语法:( 任何帮助将不胜感激！如果它对任何人有帮助，我正在编写一个 UDF 测试来查找（并选择）React 中时间选择器组件的第二个可用时间段。 这里有一种方法可以使用 :has() 来实现，现在所有更新的浏览器都支持它（感谢 FF 的跟进）： button { width: 100px; height: 50px; } /* Second */ li:has(button[disabled])+li:has(button:not([disabled]))+li:has(button:not([disabled])) button { background: red; } /* first */ li:has(button[disabled])+li:has(button:not([disabled])) button { background: blue; } /* third */ li:has(button[disabled])+li:has(button:not([disabled]))+li:has(button:not([disabled]))+li:has(button:not([disabled])) button { background: green; } <ul> <li><button disabled/></li> <li><button disabled/></li> <li><button /></li> <li><button /></li> <li><button /></li> </ul> 这不是很优雅，因为我们正在链接下一个同级 + 选择器，但它可以工作。

不能定位::在其父级后面的伪元素之前[重复]

我尝试创建一个div，并让它的::before出现在它后面，使其看起来像某种阴影，但由于某种原因，我无法让伪元素出现在原始元素后面。 我尝试创建一个 div，并让它的 ::before 出现在它后面，使其看起来像某种阴影，但由于某种原因，我无法让伪元素出现在原始元素后面。 <div class="hero container split"> <div class="hero__cont-image bg-dark"><img src="" alt="" class="hero_cont-image__image"> </div> .hero__cont-image { position: relative; transform: rotate(0); display: flex; align-items: center; justify-content: center; left: calc(-50vw + 50%); border-radius: 0px 300px 300px 0px; } .hero__cont-image::before { content: ""; background-color: blue; position: absolute; width: 125%; height: 125%; z-index: -1; } 我希望伪元素出现在原始元素后面 在父级上 transform 将创建一个新的堆叠上下文，这使得父级成为堆叠上下文的根元素。即使 z 索引为负，伪元素也无法将自身降低到根元素以下，因此它始终位于父元素之上。 如果您没有使用变换，请将其删除，并且带有负元素的伪元素将显示在父元素下方，因为现在父元素不再是其堆叠上下文的根元素。 .hero__cont-image { position: relative; display: flex; align-items: center; justify-content: center; left: calc(-50vw + 50%); border-radius: 0px 300px 300px 0px; } .hero__cont-image::before { content: ""; background-color: blue; position: absolute; width: 125%; height: 125%; z-index: -1; } <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </head> <body> <div class="hero container split"> <div class="hero__cont-image bg-dark"><img src="https://i.stack.imgur.com/memI0.png"> </div> </div> </body> 注意：这些元素创建新的堆叠上下文：Opacity、transforms、filters、css-regions、paged media。如果需要旋转父元素，请在 div 上创建一个包装器 div 并旋转该包装器。

使用标签名和文本（CSS）查找元素

我们已经接管了对公司内一个组织的支持，该组织每年发布一次新版本。我们没有编写原始代码。 我在搜索框中输入了一个名字，并得到了几个选项（...

当“悬停”效果发生时，如何使“:not”选择器对其他类起作用？

我正在制作一个有 3 张卡片的面板，当我将鼠标悬停在其中一张卡片上时，其他卡片会变得“模糊”，但是 :hover:not(:hover) 不起作用，有人可以告诉我如何使它...

如何在顺风中链接数据属性和禁用选择器？

我有一个带有 data-loading=true 和禁用属性的按钮。我需要在 tailwind 中编写一种仅在 data-loading!=true 且禁用时才适用的样式。 我有一个带有 data-loading=true 和禁用属性的按钮。我需要在 tailwind 中编写一种仅在 data-loading!=true 且禁用时才适用的样式。 <button data-loading='true' disabled>Submit</button> 尝试过（不起作用） disabled:not(data-[loading=true]):bg-red 当元素与 disabled: 伪类匹配时，您可以使用 :disabled 变体。 当 data-loading 不是 true 的值时，您可以使用带有 :not() 的 任意变体 和属性选择器：[&:not([data-loading=true])]:。 要将这两者结合起来，您可以单独链接它们： <script src="https://cdn.tailwindcss.com/3.3.5"></script> <button data-loading='true' disabled class="[&:not([data-loading=true])]:disabled:bg-red-500">Submit</button> <button data-loading='false' disabled class="[&:not([data-loading=true])]:disabled:bg-red-500">Submit</button> <button data-loading='true' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button> <button data-loading='false' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button> 或者您可以在任意变体中使用 :disabled 伪类而不是内置变体： <script src="https://cdn.tailwindcss.com/3.3.5"></script> <button data-loading='true' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button> <button data-loading='false' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button>

使用单选按钮切换时捕获元素的输入，并仅使用 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！