css-selectors 相关问题

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

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

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

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

通过纯 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。

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

我正在使用 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 !== '