css-selectors 相关问题

我想做到这一点，以便每当有人将鼠标悬停在.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() 查询这些元素可以引入循环查询。

css css-selectors

回答 2 投票 0

使用 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...

html css css-selectors

回答 1 投票 0

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

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

python selenium-webdriver xpath youtube css-selectors

回答 1 投票 0

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

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

html css css-selectors

回答 3 投票 0

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

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

css css-selectors

回答 4 投票 0

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

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

html google-chrome css-selectors google-chrome-devtools

回答 2 投票 0

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

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

css css-selectors

回答 13 投票 0

为什么使用 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><html> <head> <script> function select(){ var inputs = document.querySelectorAll("input[type='checkbox']"); for(var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } </script> </head> <body> <form id="myId" name="myForm"> <input type="checkbox" value="1"/> 1 <input type="checkbox" value="2"/> 2 <input type="checkbox" value="3"/> 3 <input type="button" onclick="select()" value="Select all"/> </form> </body> </html> </code></pre> <p>单击按钮不会执行任何操作。我一定在这里做错了什么，但我就是挑不出它来。</p> </question> <answer tick="false" vote="5"> <p>试试这个...</p> <pre><code><html> <head> <script> function test(){ var inputs = document.querySelectorAll("input[type='checkbox']"); for(var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } </script> </head> <body> <form id="myId" name="myForm"> <input type="checkbox" value="1"/> 1 <input type="checkbox" value="2"/> 2 <input type="checkbox" value="3"/> 3 <input type="button" onclick="test()" value="Select all"/> </form> </body> </html> </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="window.select()"</code></pre> 代替 <pre><code>onclick="select()"</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><ul class="chk-container"> <li><button id="selecctall">select all</button> <li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is Item 1</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item5"> This is Item 5</li> <li><input class="checkbox1" type="checkbox" name="check[]" value="item6"> This is Item 6</li> <li><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Do not select this</li> </ul> </code></pre> <p><strong>Jquery</strong></p> <pre><code>$(document).ready(function() { $('#selecctall').mouseup(function(event) { //on click if(document.activeElement.tagName ==='BUTTON') { // check select status $('.checkbox1').each(function() { //loop through each checkbox this.checked = true; //select all checkboxes with class "checkbox1" }); }else{ $('.checkbox1').each(function() { //loop through each checkbox this.checked = false; //deselect all checkboxes with class "checkbox1" }); } }); }); </code></pre> <p>更简单高效的方式</p> </answer> </body></html>

javascript html dom checkbox css-selectors

回答 0 投票 0

没有唯一 ID 的按钮选择器

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

python selenium-webdriver css-selectors automated-tests pytest-selenium

回答 1 投票 0

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

标记：首页博客 ...

html css css-selectors

回答 6 投票 0

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

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