css-selectors 相关问题

NoSuchElementException，Selenium 无法定位元素

我想在selenium中找到我的TextField，但我不知道如何（我第一次使用selenium）。 我试过： driver.findElement(By.id("originTextField")) 或通过 xPath 和 cssSelector 字符串

如何根据子类的伪类设置父类的样式？

我有一个包含输入标签的跨度，并且我在跨度中声明了一个 :after 伪元素来设置其样式。 跨度::之后{ 内容：'有效'； 颜色：绿色； } 输入：无效{ 轮廓：2px

干掉CSS - 多个父母一个孩子

我在下面分别列出了几个层次结构，其中第一个选择器是父 div，第二个是 div 中的图像项。但我能以某种方式将这些结合起来吗？ .outdoors .how-to-image {

通过全局样式更改 PrimeNG 复选框的默认选中图标

我正在将 Angular 从版本 15 更新到版本 17。因此我还需要更新 primeNG。 我无法更改复选框的默认选中图标。 更改每个图标模板的图标...

使用内联 CSS 将表格转换为 HTML [已关闭]

如何使用内联CSS将该表格转换为HTML？ 该表将在电子邮件程序中使用，仅内联 CSS。 这是用于创建表的原始代码。 如何使用内联CSS将该表格转换为HTML？ 该表格将在电子邮件程序中使用，仅内联 CSS。这是用于创建表的原始代码。 <center> <table style="width:100%; color: #000000; font-family: inter; display: grid; grid-template-columns: 100% 100%; grid-template-rows: auto; align-items: stretch; padding: 50px;"> <div> <tr> <th>M&M</th> <th>Tech M</th> </tr> <tr> <td style="color: #19C353; text-align: center;">+4.5%</td> <td style="color: #E82619; text-align: center;">-1.9%</td> </tr> </div> <tr> <th>Power Grid</th> <th>Bharat Petroleum</th> </tr> <tr> <td style="color: #19C353; text-align: center;">+2.7%</td> <td style="color: #E82619; text-align: center;">-1.8%</td> </tr> <tr> <th>Shriram Finance</th> <th>JSW Steel</th> </tr> <tr> <td style="color: #19C353; text-align: center;">+2.3%</td> <td style="color: #E82619; text-align: center;">-1.5%</td> </tr> <tr> <th>IndusInd Bank</th> <th>HCL Tech</th> </tr> <tr> <td style="color: #19C353; text-align: center;">+1.9%</td> <td style="color: #E82619; text-align: center;">-1.5%</td> </tr> <tr> <th>Hero Moto</th> <th>Dr Reddy&apos;s</th> </tr> <tr> <td style="color: #19C353; text-align: center;">+1.9%</td> <td style="color: #E82619; text-align: center;">-1.4%</td> </tr> </table> </center> 您可以通过删除每个 div 中的第二个表格行来稍微调整它，并仅使用表格标题和类似段落标记的内容来设置表格标题的样式，而段落标记位于它们之间。 <div> <tr> <th style="backgroud-color: #e3e9e5; text-align: center; padding: 0.5em; border-radius: 10px;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="backgroud-color: #e3e9e5; text-align: center; padding: 0.5em; border-radius: 10px;">Tech M <p style="color: #E82619; text-align: center;">-1.9%</p> </th> </tr> </div> grid-template-rows: auto; align-items: stretch; padding: 50px;"> <div style="border-radius: 10px; padding: 0.5em; "> <tr> <th style="border-radius: 10px; padding: 0.5em; background-color: #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px; padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech M <p style="color: #E82619; text-align: center;">-1.9%</p> </th> </tr> </div> <div style="border-radius: 10px; padding: 0.5em; "> <tr> <th style="border-radius: 10px; padding: 0.5em; background-color: #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px; padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech M <p style="color: #E82619; text-align: center;">-1.9%</p> </th> </tr> </div> <div style="border-radius: 10px; padding: 0.5em; "> <tr> <th style="border-radius: 10px; padding: 0.5em; background-color: #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px; padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech M <p style="color: #E82619; text-align: center;">-1.9%</p> </th> </tr> </div> <div style="border-radius: 10px; padding: 0.5em; "> <tr> <th style="border-radius: 10px; padding: 0.5em; background-color: #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px; padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech M <p style="color: #E82619; text-align: center;">-1.9%</p> </th> </tr> </div> </table> </center> </body> </html>

有人可以帮忙将此表转换为 HTML CSS，就像本文所附照片中的那样，使用内联 CSS 吗？

有人可以帮忙将此表转换为 HTML CSS，就像本文所附照片中的那样，使用内联 CSS 吗？ 该表格将在电子邮件程序中使用，请仅使用内联 CSS。 这是RAW代码

为什么 :has 伪选择器不适用于元素列表？

我有一个带有“help-image”类的 div 块，其中包含一个 ，位于带有“help-section”类的部分内。 按如下方式使用 :has 选择器效果很好： 部分.h...

：如果有空格则empty不起作用？

尝试找到一个以为目标的伪类，如下所示： 我尝试过 :blank 和 :empty 但都无法检测到... 尝试找到一个以 <div> 为目标的伪类，如下所示： <div class="nav-previous"> </div> 我尝试过:blank和:empty，但都无法检测到。难道只是做不到吗？ https://jsfiddle.net/q3o1y74k/3/ :empty一个人就够了。 根据当前的 Selectors Level 4 规范，:empty 可以匹配仅包含文本节点、仅包含空格 的元素以及完全为空的元素。只是根据当前规范，支持它的人并不多。 :empty伪类表示没有子元素的元素除了（可选）文档空白字符。 来自 MDN： 注意：在选择器级别 4 中，:empty 伪类已更改为类似 :-moz-only-whitespace，但目前还没有浏览器支持此功能。 :-moz-only-whitespace CSS 伪类匹配仅包含仅包含空格的文本节点的元素。 （这包括具有空文本节点的元素和没有子节点的元素。） 正如其他人提到的，这对于 CSS 来说是不可能的。 不过，您可以检查 JavaScript 是否只有空格。这是一个简单的仅 JS 解决方案，匹配的“空”div 为蓝色，而包含文本的 div 为红色。更新为向空 div 添加 empty 类，这将允许您使用 CSS 中的选择器 .empty 轻松定位它们。 仅 JS 的“空”比较将如下所示： if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") 如果你使用 jQuery，那就更容易了： if( $.trim( $(element).text() ) == "" ){ var navs = document.querySelectorAll(".nav-previous"); for( i=0; i < navs.length; i++ ){ if(navs[i].innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") { navs[i].style.background = 'blue'; navs[i].classList.add( 'empty' ); } else { navs[i].style.background = 'red'; } }.nav-previous { padding: 10px; border: 1px solid #000; } .nav-previous.empty { border: 5px solid green; }<div class="nav-previous"> </div> <div class="nav-previous">Not Empty </div> :empty确实只适用于完全空元素。空白内容意味着它不为空，单个空格或换行符就足够了。只有 HTML 注释才被视为“无内容”。 有关更多信息，请参阅此处：https://css-tricks.com/almanac/selectors/e/empty/ :blank选择器正在开发中，它将匹配空白，请参见此处：https://css-tricks.com/almanac/selectors/b/blank/。但好像还没有浏览器支持。 更新： 请参阅此处了解涉及 jQuery 的可能解决方案。 你的方法的问题是你的容器实际上并不是空的。 :empty 伪类表示没有子元素的元素 全部。就文档树而言，只有元素节点和内容 节点（例如 DOM 文本节点、CDATA 节点和实体引用） 其数据长度非零必须被视为影响 空虚； 由于你有空白空间，这个伪类不会起作用。 :blank 伪类应该是正确的，因为这是它的定义： 这个空白伪类匹配只包含内容的元素 由空格组成但不为空。 问题是这个伪类还没有被任何浏览器实现，您可以在下面的链接中查看。因此，您需要等到它实现才能使用此选择器。 这几乎解释了您所面临的行为 https://css4-selectors.com/selector/css4/blank-pseudo-class/ 这里最好的方法就是确保你的 div 实际上是空的，这样你的方法就会起作用。 你能做的最好的事情就是定义一个空类，如下所示： .empty{ display:none; } 然后在此处添加此 JS 代码，它将把空类附加到您的空白项目中： (function($){ $.isBlank = function(html, obj){ return $.trim(html) === "" || obj.length == 0; }; $('div').each(function() { if($.isBlank( $(this).html(), $(this).contents().filter(function() { return (this.nodeType !== Node.COMMENT_NODE); }) )) { $(this).addClass('empty'); } }); })(jQuery); 检查它在这里工作， https://jsfiddle.net/29eup5uw/ 如果没有 JavaScript/jQuery 实现，你就做不到。 :empty 选择器适用于空标签（因此其中甚至没有 any 空间）或自闭标签，如 <input />。 参考：https://www.w3schools.com/cssref/css_selectors.asp 如果你想使用 JavaScript 实现，我想你会在这里找到答案：How do I check if an HTML element isempty using jQuery? 虽然不完全相同，但如果您可以安全地假设输出并考虑没有子元素作为“空”的定义，则可以在现代浏览器中利用 :has()。 div:not(:has(> *)) { background: red; } <div> <!-- This will not be colorized --> </div> <div> <!-- But this will --> <span>Some content</span> </div>

为什么有些字符不允许作为 CSS 选择器？

我在 html 中有两个 标题。我想使用 CSS 单独设置它们的样式。为此，我尝试使用数字“1”和“2”作为类名。但是当我尝试在 CSS 中使用 h2.1、h2.2 来选择它们时 我在 html 中有两个 <h2> 标题。我想使用 CSS 单独设置它们的样式。为此，我尝试使用数字“1”和“2”作为类名。但是当我尝试在 CSS 选择器中使用 h2.1、h2.2 选择它们时，它不起作用。 然后我用谷歌搜索，发现有一些字符不允许使用 CSS 选择器。现在我知道选择器有一些规则。但我想知道为什么 CSS 禁止某些字符作为选择器？ 我无法使用谷歌找到这背后的原因。 Google 中仅提供规则和允许的字符。有人可以解释为什么某些字符不允许作为选择器的原因吗？ 虽然我显然不是设计 CSS 的工程师，但几乎可以肯定这只是解析器如何工作的问题。与大多数编程语言一样，当 CSS 看到某些字符时，它期望接下来会发生某些事情。限制哪些字符可用作选择器使 CSS 更易于解析。 另外，请记住 CSS 是一种相对古老的语言，发明于 1996 年。解释器更简单，为了确保向后兼容性，保留这些限制是有意义的。 根据您的情况，也许可以考虑使用 h2.a、h2.b 等。这可能是一个可行的解决方案。 这个答案是一个很好的额外资源。

selenium 谷歌扩展自动化回溯错误

为了保证我的信任钱包帐户的安全，我经常注销我的帐户，我决定编写一个Python代码来快速重新登录，但是当我尝试使用xpath或css之类的东西来选择它时

我可以比较 CSS 选择器中的两个属性吗？

我正在寻找一种方法来构建一个选择器，该选择器将匹配两个属性具有相同值的位置，但找不到语法。这可能吗？如何？ 我希望能发挥作用： [数据值A=数据值...

Tailwind CSS 中有哪些选项可将样式应用于预构建组件的自定义类？

我在 MERN 项目中有一个文本编辑器，我试图更改其 UI 部分的 z-index（最终是颜色），但找不到让我高兴的方法。 有一个明显的

按钮 [name=] 上带有 Google 跟踪代码管理器的 CSS 选择器

我在谷歌标签管理器中有一个点击触发器（所有元素），其中点击元素 - >匹配CSS选择器 - 按钮[name = checkout]。但是，触发器不适用于

基于宽度的CSS选择器？

是否有 CSS 规则可以根据元素的宽度来匹配元素？如果没有，在标准中提出这一点是否有趣？ 人们可以做类似代码：max-width（200px）{white-space：

NextJS顺风CSS问题 ---`shadow-[inset_10px_-50px_94px_0_rgb(199,`类不存在)

我的 next.js 应用程序抛出此 css 错误 语法错误：C:....styles\globals.css 阴影-[inset_10px_-50px_94px_0_rgb(199, 类不存在。如果阴影-[inset_10px_-50px_94px_0_rgb(199, 是...

星号 (*) 在 CSS 选择器中起什么作用？

我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素， 有人能解释一下CSS中星号*的作用吗？ * { 轮廓：2px 红色虚线 } * ...</desc> <question vote="109"> <p>我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素，</p> <p><strong>有人可以解释一下星号<pre><code>*</code></pre>在CSS中的作用吗？</strong></p> <pre><code>&lt;style&gt; * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * * * * * { outline: 1px solid green } * * * * * * * { outline: 1px solid orange } * * * * * * * * { outline: 1px solid blue } &lt;/style&gt; </code></pre> </question> <answer tick="true" vote="109"> <p>它是一个通配符，这意味着它将选择 DOM 该部分内的所有元素。</p> <p>例如，如果我想将边距应用于整个页面上的每个元素，您可以使用：</p> <pre><code>* { margin: 10px; } </code></pre> <p>您还可以在子选择中使用它，例如以下将为段落标记内的所有元素添加边距：</p> <pre><code>p * { margin: 10px; } </code></pre> <p>您的示例正在执行一些 CSS 技巧，将连续的边框和边距应用于元素，从而为它们提供多个彩色边框。例如，白色边框被黑色边框包围。</p> </answer> <answer tick="false" vote="32"> <p>您引用的 CSS 对于网页设计师调试页面布局问题非常有用。我经常将其临时放入页面中，这样我就可以看到所有页面元素的大小并进行追踪，例如，填充过多的元素将其他元素推到了位置之外。 </p> <p>仅使用第一行即可完成相同的技巧，但定义多个轮廓的优点是，您可以通过边框颜色获得嵌套页面元素层次结构的视觉线索。</p> </answer> <answer tick="false" vote="6"> <p><pre><code>*</code></pre> 充当通配符，就像在大多数其他情况下一样。</p> <p>如果你这样做：</p> <pre><code>*{ margin: 0px; padding: 0px; border: 1px solid red; } </code></pre> <p>然后<strong>所有</strong> HTML 元素都将具有这些样式。</p> </answer> <answer tick="false" vote="4"> <p>* 是通配符。这意味着它将将该样式应用于任何 HTML 元素。附加的 * 将样式应用于相应的嵌套级别。</p> <p>此选择器将根据元素的嵌套级别将不同颜色的轮廓应用于页面的所有元素。</p> </answer> <answer tick="false" vote="0"> <p>虽然这个问题已经得到解答，</p> <p>我只是想把这个CSS放在这里（<em>的标题）</em> StackOverflow页面..</p> <p>结果如下： <a href="https://i.stack.imgur.com/TqkJ2.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Rxa0oyLnBuZw==" alt=""/></a> 我以前从未见过这个CSS</p> </answer> <answer tick="false" vote="-1"> <p>在样式表中，通常您需要为所有元素定义基本规则，例如字体大小属性和边距。 <em>{字体大小：14px;保证金：0；填充：0；} /</em> 覆盖浏览器对元素的默认设置，所有文本字体大小将呈现为 14 像素大小，边距和填充为零，包括 h1,...pre。 */</p> </answer> </body></html>

选择 CSS 中前面没有另一个元素

考虑这个片段： .包装器{ 显示：柔性； 间隙：5px； 边框：1px 纯黑； 边框半径：3px； 宽度：80px； 内边距：5px； } 考虑这个片段： .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } <div class="wrapper"> <div class="icon">🖼️</div> <div class="text">paintings</div> </div> 该图标可能存在也可能不存在。 我想要实现的是，如果图标不存在，则会向 .text 添加一些左侧填充。 我该怎么做？我尝试了 :has、:not 和 +（下一个兄弟组合器）的几种组合，但无济于事。 本质上，我想选择 .text，但前提是它前面没有 .icon。 .wrapper:not(:has(div.icon)) div.text 应该这样做。 示例1（带图标） .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } { padding-left: 40px; } <div class="wrapper"> <div class="icon">🖼️</div> <div class="text">paintings</div> </div> 示例2（无图标） .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } .wrapper:not(:has(div.icon)) div.text { padding-left: 40px; } <div class="wrapper"> <div class="text">paintings</div> </div> .text:not(.icon + .text)应该可以解决问题 .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } .text:not(.icon + .text) { padding-left: 24px; } <div class="wrapper"> <div class="icon">🖼️</div> <div class="text">paintings</div> </div> <div class="wrapper"> <div class="text">paintings</div> </div>

当 optgroup 元素不包含任何未使用 CSS 禁用的选项元素时，如何隐藏它 [关闭]

我想隐藏一个 optgroup 元素，当它没有任何无法选择的选项元素时。在下面的示例中，第一个 optgroup 元素应显示，第二个元素应隐藏。 ...

对伪元素进行分组会破坏CSS

下面的代码工作正常。 输入[类型=“范围”]::-webkit-slider-runnable-track { 背景颜色：#000； } 输入[类型=“范围”]::-moz-range-track { 背景颜色：#000； } 下面的代码工作正常。 input[type="range"]::-webkit-slider-runnable-track { background-color: #000; } input[type="range"]::-moz-range-track { background-color: #000; } <input type="range"> 由于某种原因，下面的代码块都不起作用。 input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track { background-color: #000; } <input type="range"> input[type="range"]::-moz-range-track, input[type="range"]::-webkit-slider-runnable-track { background-color: #000; } <input type="range"> 有人知道为什么将这些伪选择器组合在一起会破坏CSS吗？ 常规选择器列表是无情的。如果列表中的任何成员无效，则整个选择器列表无效，因此会被忽略。

第n个子级高级逻辑选择

我提前道歉，我在这件事上没有取得很好的进展，所以我没有 Fiddle 或 Codepen。 我确实希望实现以下布局（如下）。 我唯一的问题是...