css-selectors 相关问题

有人可以向我解释一下第一个孩子或第n个孩子是如何工作的吗？

我只想设置体验容器内第一个 div 的样式，但它正在设置体验容器内所有 div 的样式。如何使用 :first-child 或 :nth-child 来做到这一点？ 这是我的鳕鱼...

是否有 CSS 优化器可以发现选择器中相同的单个属性并将它们分组在一起？

这是我期望的示例： 输入： A { 背景：红色； } p { 背景：红色； } 强的 { 背景：红色； 颜色：绿色； } 输出： 强{颜色：绿色;} 一个，p，

我可以在另一个 :has 选择器中使用 :has 选择器吗？

我想做到这一点，以便每当有人将鼠标悬停在.list中的类.a（或.b）上时，更改具有相同类的图标的样式。 我想做到这一点，以便每当有人将鼠标悬停在.list中的类.a（或.b）上时，更改具有相同类的图标的样式。 <div class="icons"> <a class="a"></a> <a class="b"></a> </div> <div class="list"> <span class="a">A</span> <span class="b">B</span> </div> 我尝试过以下方法，但没有成功。 icons:has(.a:hover) .a { color: blue; } 除了您的代码没有实际实现相关代码之外，它还有许多其他问题： 您正在选择<icons>，它不存在 .icons .a 中没有任何内容可供悬停 您正在使用后代选择器，选择 .a 外部与内部相同的 :has 一旦你纠正了这些，你就可以看到 :hover 里面的 :has 有效： .icons:has(.a:hover) + .list .a { color: blue; } <div class="icons"> <a class="a">X</a> <a class="b">Y</a> </div> <div class="list"> <span class="a">A</span> <span class="b">B</span> </div> 现在，如果您将光标悬停在 X 上，A 将变为蓝色。 但是，在回答此问题时，某些浏览器不支持 :has 本身；最值得注意的是，它在 Firefox 上默认未启用。 要回答截至 07/2024 的标题中的问题，这里引用来自 MDN Web Docs： :has() 伪类不能嵌套在另一个 :has() 中。这是因为许多伪元素根据其祖先的样式有条件地存在，并且允许通过 :has() 查询这些元素可以引入循环查询。

使用 nth-child 来实现不一致的格式？

编写这段代码最经济的方法是什么？ .colHeaders div:nth-child(2), .colHeaders div:nth-child(3), .colHeaders div:nth-child(4), .colHeaders div:nth-child(11), .colHeaders div:nth-chil...

如何使用 python selenium 单击带有文本 bb1 的元素

bb1 下面一个是通过完整 x 路径查找危险元素

使用 :not 选择器排除 div 及其所有后代

我有一种情况，需要将浅黄色背景的紫色字体颜色样式应用于具有 RadDiv 类的 div 之外的所有 div。 这意味着所有嵌套的 div...

如何将类选择器与属性选择器结合起来？ （逻辑与——必须满足两个条件）

我有以下 HTML： 宽按钮 窄按钮 我已经

如何使用Chrome开发者工具根据CSS选择器查找元素？ （例如，班级或 ID）

这里是长期自动化开发人员（仅供参考）。 很长一段时间以来，Chrome 中用于查找元素的开发工具似乎无法按我的预期工作，这一直困扰着我。 希望有一些...

如何使用 CSS 选择器选择所有复选框？

选择输入会影响每个输入元素。有没有办法只选择复选框而不将类应用于每个复选框元素？

为什么使用 document.querySelectorAll() 选择复选框不起作用？

我有以下代码，主要来自How can I select all checkboxes from a form using pure JavaScript，但它不起作用。 测试.html </desc> <question vote="3"> <p>我有以下代码，主要来自<a href="https://stackoverflow.com/questions/7791507/how-can-i-select-all-checkboxes-from-a-form-using-pure-javascript-without-js-fr">如何使用纯 JavaScript 从表单中选择所有复选框</a>，但它不起作用。</p> <p><strong>测试.html</strong></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt; function select(){ var inputs = document.querySelectorAll(&#34;input[type=&#39;checkbox&#39;]&#34;); for(var i = 0; i &lt; inputs.length; i++) { inputs[i].checked = true; } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;myId&#34; name=&#34;myForm&#34;&gt; &lt;input type=&#34;checkbox&#34; value=&#34;1&#34;/&gt; 1 &lt;input type=&#34;checkbox&#34; value=&#34;2&#34;/&gt; 2 &lt;input type=&#34;checkbox&#34; value=&#34;3&#34;/&gt; 3 &lt;input type=&#34;button&#34; onclick=&#34;select()&#34; value=&#34;Select all&#34;/&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>单击按钮不会执行任何操作。 我一定在这里做错了什么，但我就是挑不出它来。</p> </question> <answer tick="false" vote="5"> <p>试试这个...</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt; function test(){ var inputs = document.querySelectorAll(&#34;input[type=&#39;checkbox&#39;]&#34;); for(var i = 0; i &lt; inputs.length; i++) { inputs[i].checked = true; } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;myId&#34; name=&#34;myForm&#34;&gt; &lt;input type=&#34;checkbox&#34; value=&#34;1&#34;/&gt; 1 &lt;input type=&#34;checkbox&#34; value=&#34;2&#34;/&gt; 2 &lt;input type=&#34;checkbox&#34; value=&#34;3&#34;/&gt; 3 &lt;input type=&#34;button&#34; onclick=&#34;test()&#34; value=&#34;Select all&#34;/&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </answer> <answer tick="true" vote="3"> <p>尝试使用其他函数名称<pre><code>select</code></pre>，其余的代码就可以了。</p> </answer> <answer tick="false" vote="1"> <p><pre><code>select</code></pre> 是 HTMLInputElement 上定义的本机方法，用于聚焦选定的输入元素。 <br/> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select" rel="nofollow">选择</a> <br/></p> <p>解决方案1：更改函数的名称。 <br/> 解决方案2：尝试用 <pre><code>onclick=&#34;window.select()&#34;</code></pre> 代替 <pre><code>onclick=&#34;select()&#34;</code></pre></p> </answer> <answer tick="false" vote="0"> <p>我建议你使用<strong>Jquery</strong>并这样做：</p> <p><strong><a href="http://jsfiddle.net/ywv8x28x/" rel="nofollow">现场演示</a></strong></p> <p><strong>HTML</strong></p> <pre><code>&lt;ul class=&#34;chk-container&#34;&gt; &lt;li&gt;&lt;button id=&#34;selecctall&#34;&gt;select all&lt;/button&gt; &lt;li&gt;&lt;input class=&#34;checkbox1&#34; type=&#34;checkbox&#34; name=&#34;check[]&#34; value=&#34;item1&#34;&gt; This is Item 1&lt;/li&gt; &lt;li&gt;&lt;input class=&#34;checkbox1&#34; type=&#34;checkbox&#34; name=&#34;check[]&#34; value=&#34;item2&#34;&gt; This is Item 2&lt;/li&gt; &lt;li&gt;&lt;input class=&#34;checkbox1&#34; type=&#34;checkbox&#34; name=&#34;check[]&#34; value=&#34;item3&#34;&gt; This is Item 3&lt;/li&gt; &lt;li&gt;&lt;input class=&#34;checkbox1&#34; type=&#34;checkbox&#34; name=&#34;check[]&#34; value=&#34;item4&#34;&gt; This is Item 4&lt;/li&gt; &lt;li&gt;&lt;input class=&#34;checkbox1&#34; type=&#34;checkbox&#34; name=&#34;check[]&#34; value=&#34;item5&#34;&gt; This is Item 5&lt;/li&gt; &lt;li&gt;&lt;input class=&#34;checkbox1&#34; type=&#34;checkbox&#34; name=&#34;check[]&#34; value=&#34;item6&#34;&gt; This is Item 6&lt;/li&gt; &lt;li&gt;&lt;input class=&#34;checkbox2&#34; type=&#34;checkbox&#34; name=&#34;check[]&#34; value=&#34;item6&#34;&gt; Do not select this&lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>Jquery</strong></p> <pre><code>$(document).ready(function() { $(&#39;#selecctall&#39;).mouseup(function(event) { //on click if(document.activeElement.tagName ===&#39;BUTTON&#39;) { // check select status $(&#39;.checkbox1&#39;).each(function() { //loop through each checkbox this.checked = true; //select all checkboxes with class &#34;checkbox1&#34; }); }else{ $(&#39;.checkbox1&#39;).each(function() { //loop through each checkbox this.checked = false; //deselect all checkboxes with class &#34;checkbox1&#34; }); } }); }); </code></pre> <p>更简单高效的方式</p> </answer> </body></html>

没有唯一 ID 的按钮选择器

我正在用Python为Booking.com这样的网站编写selenium的测试选择器。例如，我必须自动从按钮列表中选择一个按钮。按钮的格式如下...

如何仅在下一个元素具有特定类时应用样式？

标记： 首页 博客 ...

style.css 不适用于多页面网站的所有网页

我刚刚开始学习编码。 我用 HTML 制作了多页简历，现在我开始添加样式。 我原以为所有页面都会发生更改，但只有索引页面显示

CSS 规则排除父类

如何编写一个 CSS 规则来选择所有不在 .container 内的 div.box？ 以下代码片段不起作用，因为 div.container 内有一个没有 .container 的 div。 迪...

Selenium：它不会点击我需要的元素

我正在学习自动化，这是我的第二个脚本..我想做一些非常非常简单的事情，请访问 https://demoqa.com/ 单击“小部件”，然后单击“滑块”，但我尝试了所有元素，但不是

类和属性选择器之间的 CSS 性能

我想知道使用属性选择器而不是类选择器是否存在性能问题。 div.测试{} div[测试] {} 附： : 我只对 CSS 性能感兴趣，对 JS 不感兴趣。

CSS 变量不尊重选择器优先级？

我正在为网站构建器编写一些代码，这给我带来了问题。我们使用 CSS 变量来定义全局样式，包括桌面和移动布局选项，例如： ：根 { --教派...

桌子的背景图像

我们如何将图片集成为表格的背景图像.. 这里有一些数据...... 我们如何将图片集成为表格的背景图像.. <table> <tr> <td><textarea>Some data here.....</textarea> </td> <td></td> </tr> <tr> <td><textarea>Some data here.....</textarea> </td> <td></td> </tr> 谢谢.. 您是否想问如何为表格分配背景图像？就像任何其他 HTML 元素一样。 在 CSS 中： table.mytable { background-image: url(your_image.gif); } 在 HTML 中： <table class="mytable"> 参考： w3schools 的背景图像属性 请参阅该页面了解其他参数 background-repeat 和 background-position。 table { background-image: url(/images/foo.png); } 遵循佩卡的例子。 table.mytable td { background-image: url(your_image.gif); } 可以让你在每个单元格中放置背景图像 如果您将类属性应用于 <td class="myClass">，则可以向各个单元格添加自定义背景。 内联CSS，例如 - style="background-image: url(your_image.gif);" - 不太好。 在我看来，将 bg 放到表中的最佳方法是； html：表> tr > td.wide css : 表 tr td.wide{背景:#ffffff url(/images/bg.png) 重复;}

使用cssSelector清除Chrome浏览器的浏览数据时如何与#shadow-root（打开）中的元素进行交互

我一直在关注如何使用 selenium 自动执行影子 DOM 元素？使用#shadow-root（开放）元素。 在找到清除数据按钮的过程中...

将班级应用于特定班级的家长

我的 HTML 文档中有一堆表格。一些单元格内部具有特定类别的跨度（.signs）；有些则不然。我需要专门对包含的内容应用边框...