css-selectors 相关问题

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

我如何选择第3,5和第7个项目与第n个孩子

我想选择第3个、第5个和第7个第n个孩子的项目

css css-selectors

回答 3 投票 0

针对 Chrome 扩展中的动态聊天框

我正在为我的大学项目开发 Chrome 扩展程序，而且我快完成了（大约完成了 90%）。该扩展程序打开 Messenger.com 并导航到特定的聊天链接，但我遇到了问题

javascript xpath css-selectors

回答 1 投票 0

无法使用 Selenium 和 Python 在 #shadow-root (open) 中找到登录元素

我正在尝试使用 selenium 来自动执行某些操作，但无法找到页面 https://developer.servicenow.com/dev.do 上的第一个元素，因此无法登录从硒导入网络驱动程序来自

python selenium css-selectors shadow-dom queryselector

回答 5 投票 0

如何使用 Selenium 和 Java 在浏览器自动化中找到准确的文本？

没有了 <div data-ng-if="!newRequestReceived" class="ng-scope"> <p data-ng-if="!authRequestCount" class="ng-scope" style="" xpath="1">No more candidates awaiting Authorization</p>  </div> 我需要帮助，如果找到类似“No more candidates awaiting Authorization”的字符串循环将如何工作？？？ driver.findElement(By.xpath("//p[@class='ng-scope'][contains('No more candidates awaiting Authorization']")); 这是正确的要提取字符串不再有等待授权的候选人，您不需要这样的循环。由于该元素是 Angular 元素，因此您需要引发 WebDriverWait 并且可以使用以下任一解决方案： CssSelector: String myString = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.ng-scope[data-ng-if*='newRequestReceived'] p.ng-scope[data-ng-if*='authRequestCount']"))).getAttribute("innerHTML"); XPath: String myString = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[@class='ng-scope' and contains(@data-ng-if,'newRequestReceived')]//p[@class='ng-scope' and contains(@data-ng-if,'authRequestCount')]"))).getAttribute("innerHTML");

java selenium xpath css-selectors webdriverwait

回答 1 投票 0

如何在Tailwind伪类名上使用querySelector查找元素

鉴于我有单选按钮样式与顺风类我可以使用 JavaScript 查询选择找到该元素...

javascript css-selectors tailwind-css pseudo-element

回答 1 投票 0

选择父级是最后一个子级的班级

我有一个简单的 html 层次结构：随便我有一个简单的 html 层次结构： <div> <div> <div class="custom-class">whatever</div> </div> <div> <div class="custom-class">whatever</div> </div> <div> <div class="custom-class">thing i want to select</div> </div> </div> 我目前正在向 .custom-class 添加属性，但想仅向最后一个孩子的 .custom-class 添加特定属性。意思是我想知道可以访问scss而不影响其他兄弟姐妹的<div class="custom-class">thing I want to select</div>选择器。如果可能的话，我想在单个 .custom-class {attributes} 中执行此操作。 :last-child > .custom-class 应该执行您所要求的操作：如果它是最后一个子元素的直接子元素，则选择 custom-class。 :last-child > .custom-class { color: green; } <div> <div> <div class="custom-class">whatever</div> </div> <div> <div class="custom-class">whatever</div> </div> <div> <div class="custom-class">thing i want to select</div> </div> </div>

html css sass css-selectors

回答 1 投票 0

PowerQuery：使用 Html.Table / CSS 选择器从“<img>”字段中提取“src”

我有一个很长的 HTML 文件，我正在通过 PowerQuery 处理它，如下所示： = Html.Table(来源, { {"标题", ".idea-标题"}, {“描述”，“.ng-binding.idea...

css-selectors powerquery

回答 1 投票 0

CSS 在兄弟悬停时选择活动类

我有一个简单的 Bootstrap 选项卡场景。这是 HTML 我有一个简单的 Bootstrap 选项卡场景。这是 HTML <ul class="nav nav-tabs"> <li class="nav-item"> <div class="nav-link active" href="#">Tab 1</div> </li> <li class="nav-item"> <div class="nav-link">Tab 4</div> </li> <li class="nav-item"> <div class="nav-link">Tab 4</div> </li> <li class="nav-item"> <div class="nav-link">Tab 4</div> </li> </ul> 我想将鼠标悬停在任何不活动的同级选项卡（选项卡 2-4）上，然后更改活动选项卡的背景颜色。以下作品... .nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active { background: red; } ...但我需要让它改变 ::after 和 ::before 上的背景颜色那看起来像... .nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active::after{ background: red; } 不起作用。有什么想法吗？对我来说效果很好 .nav-link::before { content: '>>> '; } .nav-link::after { content: ' <<<'; } .nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active::before { background: blue; } .nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active::after { background: red; } <ul class="nav nav-tabs"> <li class="nav-item"> <div class="nav-link active" href="#">Tab 1</div> </li> <li class="nav-item"> <div class="nav-link">Tab 2</div> </li> <li class="nav-item"> <div class="nav-link">Tab 3</div> </li> <li class="nav-item"> <div class="nav-link">Tab 4</div> </li> </ul>

html css css-selectors pseudo-class

回答 1 投票 0

带引号的属性选择器？

所以我试图在我的 Cypress 页面对象中添加一个定位器常量，并且我必须使用一个看起来与此类似的定位器： [ng-if="this.customThing.length > 1 && customThing.code !== '

typescript css-selectors attributes cypress

回答 2 投票 0

为什么 <p> 标签中的文本会从屏幕上消失？（HTML、CSS）

我是 Web 开发新手，正在研究 HTML 和 CSS。我使用了一个标签，其中包含一堆文本，但它在屏幕上不完全可见。我几乎看不到半个字... 我是 Web 开发新手，正在研究 HTML 和 CSS。我使用了一个 <p> 标签，其中包含一堆文本，但它在屏幕上并不完全可见。我几乎看不到屏幕左侧的半个字符，我不确定出了什么问题。该元素在 intro_text 标签下有一个类 section。最初，当出现此问题时，我没有使用 <p> 标签或 intro_text 类的 CSS。然而，在使用display: flex和justify-content: center之后，屏幕左侧开始出现一些单词。我仍然不确定问题是什么或导致它的原因。 HTML： <!DOCTYPE html> Document <header> <h1 class="website_title"> Anime Site </h1> <nav class="navigation"> <ul> <li>Section1</li> <li>Section2</li> <li>Section3</li> <li>Section4</li> </ul> </nav> <div class = "logo"> <img src="./images/anime_logo.jpeg" alt="Anime Logo" class="logo_img"> </div> </header> <main> <section class="section1"> <div class="intro_text"> <p> This is some text about the website, so let'sThe .logo .logo_img class applies a margin-top of 150px and the .section1 class applies a margin-top of 300px. These large margins might be pushing content, including your <p> tag, off the visible part of the screen, especially on devices with smaller screens. Try reducing these margins to see if it brings the text back into view. go. This text is getting bThe .logo .logo_img class applies a margin-top of 150px and the .section1 class applies a margin-top of 300px. These large margins might be pushing content, including your <p> tag, off the visible part of the screen, especially on devices with smaller screens. Try reducing these margins to see if it brings the text back into view.igger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger</p> </div> <figure class="images_anime_container"> <img class="images_anime" id="image_isekai" src="./images/isekai_image.avif"> <figcaption> Love characters who get transported to a magical or fantasy world where they have adventures? It’s like they’re suddenly living in a completely different place with its own rules and challenges. If yes, welcome to the world of Isekai anime</figcaption> </figure> <figure class="images_anime_container"> <img class="images_anime" id="image_mecha" src="./images/mecha_anime.avif"> <figcaption> Are you into giant robots and thrilling battles? Mecha anime features massive robots piloted by humans, often set against the backdrop of futuristic wars or intense conflicts. It's a world where technology and action combine to create epic stories. If this sounds exciting, then mecha anime is definitely for you!</figcaption> </figure> <figure class="images_anime_container"> <img class="images_anime" id="image_adventure" src="./images/adventure_anime.jpeg"> <figcaption> Love the thrill of exploration and epic journeys? Adventure anime takes characters through exciting landscapes and challenges, from mystical lands to uncharted territories. It’s all about quests, discoveries, and sometimes, finding oneself along the way. If you’re up for an adventure, these anime will take you on unforgettable journeys!</figcaption> </figure> <figure class="images_anime_container"> <img class="images_anime" id="image_romance" src="./images/romance_anime.jpeg"> <figcaption> Do you enjoy stories about love and relationships that tug at your heartstrings? Romance anime explores the complexities of love and emotions through beautifully crafted narratives. Whether it's a first crush or a deep bond, these stories will immerse you in the journey of the heart. If you're a fan of romance, these anime are a perfect match!</figcaption> </figure> </section> </main> CSS： CSS 代码图像 .website_title{ float: left; display: inline-block; } .navigation ul{ list-style: none; float: right; } .navigation ul li{ display: inline; margin: 10px; } .navigation ul li:hover{ text-decoration: underline; } .logo .logo_img{ height: 400px; width: auto; margin-top: 150px; } .logo{ display: flex; justify-content: center; } .section1{ margin-top: 300px; display: flex; justify-content: center; align-items: center; } .images_anime{ height: 300px; width: 250px; margin: 20px; } .intro_text p{ display: flex; justify-content: center; } 我尝试过 Stack Overflow，它表明问题源于在 margin 之后使用 float 某处...并且删除边距部分没有帮助（请注意，这不适用于 p 标签或 intro_text上课但为了.navigation ul li）。目前，我已经做到了这一点，它有点帮助，但实际上并没有帮助。我可以在屏幕左侧看到大约 2 个单词。 .intro_text p{ display: flex; justify-content: center; } 网页当前状态原因是 display: flex; 的 .section1 – 它将 p 和所有后续图像排列在一起。如果您想要 display: flex;文本和所有图像*彼此*，可以从 .section1中删除flex-direction: column或添加 p。如果您想要 p 文本下方的图像，请将图像放在一行中，将另一个 div 容器包裹在图像周围，然后将 display: flex; 添加到该容器中。

html css flexbox css-selectors web-developer-toolbar

回答 1 投票 0

Symfony \ Component \ CssSelector \ Exception \ SyntaxErrorException cssselector 到 laravel 中的 xpath

我有以下html select元素，select元素的属性名称包含方括号，需要使用domcrawler进行过滤，但不幸的是，CssSelectorConvertor()无法转换cssleec...

laravel-5 xpath css-selectors domcrawler

回答 1 投票 0

带有 CSS 选择器的单击元素在 Google 跟踪代码管理器中不起作用

如何使用 Google 标签管理器中的“Click Element”变量检测对以下元素的点击：如何使用 Google 标签管理器中的“Click Element”变量检测对以下元素的点击： <a href="https://amazon.in/product-id" target="_blank" class="amazon-btn"> <div> <span>BUY NOW AT</span> <div class="amz-logo"></div> </div> </a> 我创建了以下触发器： Click - All Elements -> Some Clicks -> Click Element -> matches CSS selector -> *.amazon-btn* 单击元素时不会触发。以下是调试窗口中的点击元素： 'HTMLDivElement: html > body > section.content.looking-sec > div.container > div.row > div.col-md-6.looking-cont > div.btn.btn-custom.btn-top.hide-small > a.amazon-btn > div' 我什至尝试过，Click Element -> contains -> amazon-btn。这也行不通。在触发器配置中，尝试添加此条件： Click Elementmatches CSS selector.amazon-btn, .amazon-btn * 我还没有对此进行测试，但当具有 amazon-btn 类的元素是点击目标或该元素内的任何子元素时，它应该可以工作。这就是问题所在，Click - All Elements触发器返回被单击的实际元素（显然），但那可能只是更大按钮中的图标。而我们想要捕获按钮或目标元素上任意位置的点击。有关此内容的更多信息，请访问此链接这就是我最终使用的。我创建了一个自定义 JavaScript 变量Get All Classes: function() { var el = {{Click Element}}; var ad = el.nodeName.toLowerCase(); if(!el.className==''){ ad = ad+'.'+el.className.replace(/\s/g,'.'); } var i = 0 while(el.parentElement.nodeName.toLowerCase() != 'body' && i < 50){ el = el.parentElement; var st = el.nodeName.toLowerCase(); if(!el.className==''){ st = st+'.'+el.className.replace(/\s/g,'.'); } ad = st+'>'+ad; i++; } return ad; } 这将返回一个字符串，其中包含从单击的元素开始一直到 <body> 元素的所有节点名称及其类。像这样： body>div.main-container.content>p.first-section>a.amazon-link 然后我在触发器中使用这个变量来检查它是否包含特定的类。有没有一种更简单、更好的方法来获取下面突出显示的字符串形式的 {{Click Element}} GTM 变量的值？如果是这样，请将其添加为答案，我会接受它作为正确答案。尝试点击锚元素不要使用“单击>所有元素” 使用“点击 > 仅链接” 然后应用 CSS 选择器我找到了解决这个问题的解决方案：触发：单击 - 所有元素 -> 部分单击 -> 单击元素 -> 匹配 CSS 选择器 -> "a.amazon-btn > div" 请通过 PayPal 转账至 [email protected] 表达您的谢意 :)）））使用 Click Text = BUY NOW AT 代替 Click Element，就完成了。或者使用“Chrome 的 CSS 选择器助手扩展”之类的东西来生成正确的 CSS 选择器。

html css css-selectors google-tag-manager

回答 5 投票 0

为什么第n个子选择器不起作用？

我正在使用第n个子选择器为不同的社交图标添加背景图像。然而，所有图标看起来都是一样的。我做错了什么？ .social-标志{ 显示：内联blo...

html css css-selectors

回答 5 投票 0

当<p>悬停时使文本区域可见

我希望当我将鼠标悬停在上时出现，您想提供反馈吗？。换句话说，我想要和 <p>我们怎样才能...</desc> <question vote="0"> <p>我希望当我将鼠标悬停在 <pre><code><div id="Feedback"></code></pre> 上时出现 <pre><code><p>Would you like to give feedback?</p></code></pre>。换句话说，当我将鼠标悬停在该 p 元素上时，我希望 <pre><code><textarea></code></pre> 和 <pre><code><p>How can we imporve the page?</p></code></pre> 将其显示设置为“阻止”。</p> <p>这是我尝试过的：</p> <pre><code><!DOCTYPE html> <html> <head> <title>Sign up</title> <link href="./account.css" rel="stylesheet"> </head> <body> <div id="entire-form"> <form action="form.html" method="GET"> <h1><b>Sign up =)</b></h1> <div id="Feedback"> <p>Would you like to give feedback?</p> <p>How can we imporve the page?</p> <textarea name="improve" id="improve" rows="10" cols="70"></textarea> </div> </form> </div> </body> </html> </code></pre> <pre><code>textarea, #Feedback p{ display: none; } #Feedback p:nth-child(1) { /*What this does is it looks in the div with the id Feedback and its p elements and selects the first child i.e. the p that comes first*/ display: block; margin: 15px; } #Feedback p:nth-child(1):hover{ display: block; } </code></pre> </question> <answer tick="false" vote="0"> <p>如果没有<pre><code>JavaScript</code></pre>，你就无法实现这一目标。我对您的代码进行了一些更改，涉及使用正确的 <pre><code>HTML</code></pre> 元素及其顺序来实现所需的功能。我还更新了您的<pre><code>CSS</code></pre>部分。</p> 当用户将鼠标悬停在其上或输入内容时，<p><pre><code>textarea</code></pre>将保持可见。</p> <p>我希望这能解决您的问题。您可以根据自己的意愿进行进一步的更改。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener("DOMContentLoaded", function () { const hoverLine = document.querySelector(".hover-line"); const textareaContainer = document.getElementById( "feedback-input-container" ); const textarea = document.getElementById("improve"); function showTextarea() { textareaContainer.style.display = "flex"; } function hideTextarea() { if (!textarea.value.trim()) { textareaContainer.style.display = "none"; } } hoverLine.addEventListener("mouseover", showTextarea); textareaContainer.addEventListener("mouseover", showTextarea); textareaContainer.addEventListener("mouseout", hideTextarea); textarea.addEventListener("focus", showTextarea); textarea.addEventListener("input", showTextarea); textarea.addEventListener("blur", hideTextarea); });</code></pre> <pre><code>.hover-line { cursor: pointer; } #feedback-input-container { display: none; flex-direction: column; align-items: start; gap: 3px; margin-top: 5px; }</code></pre> <pre><code><h1>Sign up =)</h1> <form action="form.html" method="GET"> <label class="hover-line">Would you like to give feedback?</label> <div id="feedback-input-container"> <label>How can we improve the page?</label> <textarea name="improve" id="improve" rows="10" cols="70"></textarea> <button type="submit" name="submit">Submit</button> </div> </form></code></pre> </div> </div> <p></p> </answer> </body></html>

html css css-selectors textarea pseudo-element

回答 0 投票 0

Cypress 中的链接选择器是什么？

我有这个 HTML 代码日期范围<... 我有这个 HTML 代码 <li class="menu-level-1"> <a href="/Public/app/#/calendar"> <i class="site-menu-icon material-icons">date_range</i> <span> Calendar </span> </a> </li> 我不知道我需要在 Cypress 中选择什么来自动按下日历按钮。我没有独特的 css 或 id 类，因此我无法将其与其余菜单项隔离。我只有上面显示的内容。我认为您想要单击元素 <a href="/Public/app/#/calendar">，因为它具有 href。有很多方法可以定位它，使用哪种方法取决于页面上的独特之处 cy.contains('a', 'Calendar').click() // if the word Calendar only appears on this link cy.get('a[href="/Public/app/#/calendar"]').click() // specifies by the link itself cy,get('i.site-menu-icon').parent().click() // if the icon is the unique thing 您可以使用自定义xpath，例如//*[text()="Calendar"] 如果您在网页上发现了许多其他内容，您可以提供一个索引，例如 //*[text()="Calendar"][1] 确保此处索引始终以 1 开头，而不是 0。 cy.get('li').within(() => { cy.get('a[href="/Public/app/#/calendar"]').find('.site-menu-icon.material-icons').contains('Calendar').click() }) cy.get('li') 根据您的代码，我直接触发列表标签 within 用于选择列表标签中的子 id 或类 cy.get('a[href="/Public/app/#/calendar"]') 这将选择中的一个（锚点）元素，该元素的 href 属性值为“/Public/app/#/calendar”。这可能是指向日历页面或部分的链接。 .find('.site-menu-icon.material-icons') 这将在选定的锚元素中搜索具有 site-menu-icon 和 Material-icons 类的子元素。这通常是锚链接内的图标。 .contains('日历') 这进一步将选择范围缩小到包含文本“日历”的元素。它确保您要与之交互的元素被标记为“日历”。 .点击() 最后，此命令单击前面步骤中已选择的元素。

javascript css-selectors cypress

回答 3 投票 0

如何在CSS中*仅*选择最高级别的后代？

考虑这个例子，a、b、c、d 只是随机标签。标有 class="select" 的 d 标签是我想要选择的。当然，我没有关于它们的课程。规则应该是：S...

html css css-selectors

回答 1 投票 0

CSS 选择器未找到错误。？ VScode 中出现警告

当我在处理我的项目时，突然出现警告消息，它显示未找到 CSS 类，但在我的代码中，每个类都在 CSS 中链接。谁能帮我解决这个问题吗？为什么是...

html css css-selectors

回答 2 投票 0

Cypress 自动化 Javascript 的理想选择器

javascript css-selectors cypress