css-selectors 相关问题

当下一个兄弟姐妹具有特定类别时选择前一个兄弟姐妹

我正在使用 Bootstrap 的内容管理系统，并且有很多默认样式。全出血英雄图像页面标题有一个默认的 margin-bottom: 20px 和 border-bottom: 1px soli...

HTML 中的焦点更改是出于 CSS 目的吗？

我有一对输入，其中第二个输入就像一个“下拉菜单”：它应该只在第一个输入获得焦点时出现，然后它应该是可聚焦和可编辑的，直到焦点...

按文本大小更改选择的宽度

我如何选择具有与文本大小相同宽度的选项？ |选择您的城市▼| - 选择 |选项1| |选项二| |选项 abcabcabc| 结果 ： |选项 1 ▼| |选项二...

无法将 CSS 添加到除使用 :not(:last-child) 的类之外的所有类

这是我的 HTML： ... 这是我的 HTML： <div class="TwoSidesLayout"> <div class="LeftSide"> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody"></div> </div> </div> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody"></div> </div> </div> </div> <div class="RightSide"> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody"></div> </div> </div> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody"></div> </div> </div> </div> </div> 我正在尝试将 margin-bottom: 10px 的 CSS 添加到 .mainItem 类中。但是，如果它是 .mainItem 中的最后一个 .LeftSide 类或 .mainItem 中的最后一个 .RightSide 类，那么我只想删除最后一个类中的 margin-bottom: 10px。 例如，假设 .LeftSide 或 .RightSide 有 100 个 .mainItem 类，最后 100 个 .mainItem 类不应该是 margin-bottom: 10px。 我以为我可以通过使用 :not(:last-child) 轻松实现此目的，但由于某种原因这不起作用。它不会将 margin-bottom: 10px 添加到任何 .mainItem 中。我认为它将每个 .mainItem 视为最后一个孩子。 这是我尝试过的： .TwoSidesLayout{ .LeftSide, .RightSide{ .mainItem:not(:last-child) { margin-bottom: 10px; } } } 这不是一个答案，而是一个演示，以表明您的 :not(:last-child) 方法显然有效： .TwoSidesLayout{ div {border:1px solid grey; margin: 2px} .LeftSide, .RightSide{ display:inline-Block; width:120px; .mainItem:not(:last-child) { margin-bottom: 20px; } } } <div class="TwoSidesLayout"> <div class="LeftSide"> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody">.</div> </div> </div> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody">.</div> </div> </div> </div> <div class="RightSide"> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody">.</div> </div> </div> <div class="mainItem"> <div class="wrap"> <img class="image" src="...." alt="..."> <div class="contentbody">.</div> </div> </div> </div> </div>

更改 WooCommerce 结账页面下拉字段项目文本颜色

如您所见，我的主要网站字体颜色是白色。现在，在 WooCommerce 结帐页面中，所有下拉字段的项目也是白色的，因此用户无法在不悬停的情况下检查下拉项目...

在同级上应用相同的选择器会有稍微不同的行为

在我的应用程序中，我有一个组件，其中只有两张卡片，我想在悬停和单击它们时为它们设置动画。 我注意到，当其中一个当前处于活动状态（单击）时，另一个......

SASS 重大变更：混合声明

当我运行 SASS 从 .scss 文件创建 .css 时，我收到弃用警告。 我从SASS查找了纪录片：https://sass-lang.com/d/mixed-decls 但是我不明白我是如何得到的...

在什么情况下，特异性为 0-0-1 的 CSS 规则可以覆盖特异性为 0-1-0 的 CSS 规则？

在下面的屏幕截图中，您可以看到规则特异性为 0-0-1 的字体系列声明优先于规则特异性为 0-1-0 的字体系列声明。 我的理解只是规则的顺序

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

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

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

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

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

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

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

没有了 <div data-ng-if="!newRequestReceived" class="ng-scope"> <!-- ngIf: !authRequestCount --><p data-ng-if="!authRequestCount" class="ng-scope" style="" xpath="1">No more candidates awaiting Authorization</p><!-- end ngIf: !authRequestCount --> <!-- ngIf: authRequestCount --> </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");

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

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

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

我有一个简单的 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>

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

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

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>

带引号的属性选择器？

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

为什么 <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; 添加到该容器中。

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

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

带有 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 选择器。