css-selectors 相关问题

如何在 JavaScript 中选择具有特定 CSS 类的输入单选按钮

我正在尝试使用 JavaScript 在 HTML 中的 .show 类下选择一个输入单选按钮。 HTML 结构如下： html: 我正在尝试使用 JavaScript 在 HTML 中的 .show 类下选择输入单选按钮。 HTML 结构如下： html: <div class="collapse question-group show"> <div class="progress">...</div> <div class="question"> <div class="form-check"> <input type="radio"> <label>yes</label> </div> </div> </div> 我需要在 CSS 选择器中包含 .show 类，因为还有其他类似的 div 组，唯一的区别是 .show 类的存在。没有它，该元素将被隐藏。 我尝试使用以下 JavaScript 代码： <script> var inputButtons = document.querySelectorAll('.show .form-check input[type="radio"]'); inputButtons.forEach(input => { if (input.checked) { alert('hello!'); } }) </script> 但是警报窗口并没有弹出，看来选择失败了。 如果我将 CSS 路径更改为： var inputButtons = document.querySelectorAll('.form-check input[type="radio"]'); 它按预期工作。 有没有办法在 CSS 选择器中包含 .show 类来选择所需的输入单选按钮？ 问题根据进度动态添加！ 然后尝试： document.querySelectorAll('.show') .forEach((showEl) => { showEl.addEventListener('change', (event) => { if(event.target.tagName === 'INPUT' && event.target.type === 'radio' && event.target.checked){ alert('Hello') } }) }) 因此，事件处理程序与 static .show 元素相关联...然后，每当其子元素之一发生单击事件（无论是否动态创建）时，该事件都会触发，因为它仍然与现有元素。诀窍是过滤你想与之互动的孩子。

如何仅更改表格中包含小数点的列的 css 样式

我有一个除法问题，正在表格中显示。每个数字都存储在“td”中。我想减少宽度并删除包含 ...

任何锚元素都有白色文本

我有一次考试，要求我将任何锚元素设为白色文本。 我已经尝试了我所知道的一切，但似乎无法接受。我没有找到任何帮助来尝试揭示它的含义，a...

Scrapy：无法使用 css 选择器 attr::img 找到图像

我正在尝试抓取此页面上的一些元素： https://www.liberation.fr/planete/2015/10/26/stupeur-en-argentine-le-candidat-de-kirchner-en-difficulte_1408847/ 我想抓取...的链接

选择一个元素及其所有后代元素

要选择一个元素及其所有后代元素： .media, .media * {颜色: #f00;} 是否只能使用一个选择器而不是用逗号分隔的两个选择器？我正在寻找更多

在 Selenium/Python 中从亚马逊产品页面的图像中提取所有 src 属性

我正在使用 Selenium 从亚马逊产品页面中抓取详细信息（[示例][1]）。我已经成功抓取了产品标题，但我还想获取所有产品图片的 URL。这是我...

如何使用 jQuery 获取选择器字符串？

假设我有这样的 JSON： { “foobar”：“数据foobar”， "foo": "数据 foo", "bar": "数据栏", "baz": "数据 baz&q...

为什么在添加溢出属性之前背景颜色消失[重复]

.导航栏{ 列表样式：无； 保证金：0； 填充：0； 背景色：蓝色； 边界半径：5px； } 背景颜色消失 .navbar li{ 向左飘浮; } .导航栏{ 列表样式：无； 保证金：0； 填充：0； 背景...

如何更改隐藏<option>的文字颜色？

我想更改隐藏选项的文本颜色。 隐藏选项应显示为占位符文本而不是可选选项。 我试图将样式直接放在元素上，但是没有...

什么时候我应该将直接缓冲区与 Java NIO 一起用于网络 I/O 的简单规则？

有天赋的人可以用简单直接的方式解释复杂的事情来解决这个问题吗？为了获得最佳性能，我应该何时使用直接 ByteBuffers 与 reg ...

带有单个“:not()”的多个连接属性选择器与 JavaScript 中带有多个“:not()”的多个单独属性选择器

我有 2 s 并尝试通过将 2 个连接的属性选择器设置为 1 :not() 和 2 个单独的属性选择器设置为 2 :not()s 来选择 s 分别使用 querySelectorAll() as

如何在querySelectorAll中使用正则表达式？

在我正在做的页面上，我将以这样的自定义链接元素结束： 在我正在做的页面上，我将以这样的自定义link元素结束： <link rel="multiply" type="service/math" src="path/to/service"> <link rel="substract" type="service/math" src="path/to/service"> ... 我正在尝试使用 querySelectorAll 检索所有类型为 service/... 的链接元素，但我一无所获。 目前我选择的是： root.querySelectorAll('link'); 当我只想要类型为<link>的元素时，它给了我所有service/.*元素 问题： 我可以将正则表达式添加到 QSA 选择器吗？如果是这样，怎么做？ 您不能真正在选择器中使用正则表达式，但 CSS 选择器的功能足以满足您的需求，其受正则表达式启发的“开头为”语法。 您可以使用子字符串匹配属性选择器：link[type^=service] 读取“link类型的节点，其属性type以“服务”开头 来自正式规范： [att^=val] 表示具有 att 属性的元素，其值以前缀“val”开头。如果“val”是空字符串，那么选择器不代表任何东西。 工作 JSFiddle 我知道这已经有 7 年了，但这就是你的做法（对于属性值）： function DOMRegex(regex) { let output = []; for (let i of document.querySelectorAll('*')) { if (regex.test(i.type)) { // or whatever attribute you want to search output.push(i); } } return output; } console.log(DOMRegex(/^service\//)); // your regex here <link rel="multiply" type="service/math" src="path/to/service"> <link rel="substract" type="service/math" src="path/to/service"> <link rel="test" type="notservice/math" src="path/to/notservice"> <div id="some-other-node"></div> 要搜索all元素属性，你可以使用这个： function DOMRegex(regex) { let output = []; for (let i of document.querySelectorAll('*')) { for (let j of i.attributes) { if (regex.test(j.value)) { output.push({ 'element': i, 'attribute name': j.name, 'attribute value': j.value }); } } } return output; } console.log(DOMRegex(/(?<!t)service/)); // your regex here <link rel="multiply" type="service/math" src="path/to/service"> <link rel="substract" type="service/math" src="path/to/service"> <link rel="test" type="notservice/math" src="path/to/notservice"> <div id="some-other-node"></div> 我把它放在一个很好的对象布局中。 帖子很旧，但可能对某人有帮助。如果需要 like 子句并且我们不想只从头开始搜索，可以使用以下语法： document.querySelectorAll('[type*=service]'); 下面的例子： <link rel="multiply" type="service/math" src="path/to/service"> <link rel="substract" type="service/math" src="path/to/service"> 您不能使用正则表达式（Regex），但可以使用CSS选择器为querySelectorAll()以及querySelector()如下所示。 *你可以看到6.2。子串匹配属性选择器. link[type^="service"]可以选择所有<link>的type属性从service开始： document.querySelectorAll('link[type^="service"]'); // rel="multiply"'s <link> and rel="substract"'s <link> [type^="service"]也可以选择所有<link>的type属性从service开始，但我不推荐没有link的它，因为它不太具体所以它也可能选择其他元素： document.querySelectorAll('[type^="service"]'); // rel="multiply"'s <link> and rel="substract"'s <link> link[type*="service"]也可以选择所有<link>的type属性包含service： document.querySelectorAll('link[type*="service"]'); // rel="multiply"'s <link> and rel="substract"'s <link> 此外，link[src&="service"]还可以选择所有<link>的src属性以service结尾的： document.querySelectorAll('link[src&="service"]'); // rel="multiply"'s <link> and rel="substract"'s <link>

查找 HTML/DOM 中使用的所有类名

如何获取 HTML 代码段中使用的所有类名的列表？ 例如，下面的 HTML 片段， 如何获取 HTML 代码段中使用的所有类名的列表？ 例如下面的HTML片段， <div class="name"> <div class="first"></div> <div class="last"></div> </div> 会输出 name、first、last 或 name、name > first、name > last。在这里，我关心的是首先找到所有的类选择器。嵌套可以是可选的。 我希望使用 Javascript 或正则表达式。 使用 querySelectorAll 获取文档中的所有元素，然后遍历它们，获取每个元素的类，按空格将其分开，并将新元素添加到 allClasses 数组中： var allClasses = []; var allElements = document.querySelectorAll('*'); for (var i = 0; i < allElements.length; i++) { var classes = allElements[i].className.toString().split(/\s+/); for (var j = 0; j < classes.length; j++) { var cls = classes[j]; if (cls && allClasses.indexOf(cls) === -1) allClasses.push(cls); } } console.log(allClasses); <div class="foo"> <div class="bar baz"></div> </div> 要仅获取文档的一部分中的类名，请在 querySelectorAll 调用中指定： var allElements = document.getElementById('my-elt').querySelectorAll('*'); 现代方法 使用 ES6，我们可以将其更函数化地编写为： [].concat( // concatenate ...[... // an array of document.querySelectorAll('*') // all elements ] . map( // mapping each elt => // element [... // to the array of elt.classList // its classes ] ) ); 或者，作为一个班轮： [].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList])); 然后您将要对结果应用uniq。你可以自己写，或者使用Underscore的_.uniq等。这里有一个简单的使用： function unique(array) { var prev; return array.sort().filter(e => e !== prev && (prev = e)); } 简单的 ES10 新 Set() 方法 const allClasses = Array.from(document.querySelectorAll('[class]')).flatMap(e => e.className.toString().split(/\s+/)) const classes = new Set() allClasses.forEach(c => classes.add(c)) console.log(classes) 获取所有班级名称并按空格拆分，例如，“child first”将变为“child”和“first”。如果你不喜欢这种行为，你可以删除 toString 和 split 函数。 然后将每个类名添加到集合中。无需检查重复项，因为该集合已为我们完成了这项工作。如果你确实想存储重复项，你可以使用 Map 代替。 从@user1679669 和@Nermin 的答案中使用Set 搭载，您可以使用这个单行获取页面上所有类的列表： const allClasses = [...new Set([].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList])))]; 按字母顺序返回唯一类名的单行代码，查询部分基于@torazaburo 的回答： [].concat(...[...document.querySelectorAll('*')].map(e=>[...e.classList])).filter((d,i,a)=>a.indexOf(d)==i).sort() 我会像下面的代码片段那样做一些事情，它使用 jQuery 但这更容易阅读 imo，我认为 Javascript 版本不会更难。 基本上你想获得所有的nodes，然后将所有独特的类添加到列表中.. 如果您正在寻找可以与 Javascript 一起应用的动态类，这将much 难以实现。 嵌套需要更深入地了解它应该如何执行，如何处理欺骗类而不是欺骗类数组和类似的.. 如果这个 get 因为 jQuery 而被否决，我会很沮丧。 var classes = []; $('body *:not(script)').each(function(){ _classes = $(this).attr('class') ? $(this).attr('class').split(' ') : [] _classes.forEach(function(entry){ if(classes.indexOf(entry) < 0){ classes.push(entry) } }) }) console.log(classes) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dog"></div> <span class="dog cat"></span> <div></div> <blockquote class="bird"></blockquote> 这是 HTML： <div id="oye"> <div class="pop"></div> <div class="hop"></div> <div class="bob"></div> </div> <p id="my"></p> 在 Jquery 中，您将获得所有类名的数组，检查下面的代码 $(document).ready(function(){ var myclass = []; var parent = $("#oye"); var divs = parent.children(); for(var i = 0; i < divs.length; i++){ myclass.push(divs[i].className) } //console.log(myclass); var myclasses = myclass.join(', '); $("#my").html(myclasses); }); 在此处查看演示：https://codepen.io/ihemant360/pen/PzWJZP 更正KR Thirto的回复： const allClasses = new Set(Array.from(document.querySelectorAll("*")).map( (el) => el.className )); const flatClasses = new Set(Array.from(allClasses).map((el) => el.split(/\s+/g)).flat(1).filter((el) => el)); 首先我们将所有 DOM 节点的类名属性映射到一个集合中。这个类名属性包含实际的类名，用空格分隔。 由于 split() 返回一个数组，在 allClasses 中拆分 classname 属性将得到一个数组，其中一些元素是字符串，而其他元素是包含 split() 对 classname 操作结果的数组。 为了展平这个数组，使用了 flat(1) 方法。 需要应用 filter() 方法来过滤掉未定义（空字符串）的类名。 在一维中获取所有类别和唯一类别。 const allClasses = Array.from(new Set(document.querySelectorAll("*").map(el => el.classNames))); const flatClasses = Array.from(new Set(allClasses.flat(1)))

当它们位于不同的 div 中时，我如何为圆形输入设置标签样式？

我有一个容器可以容纳多张照片，以及带有标签的无线电输入。我需要将它们放在 div 中以设计样式并与照片容器对齐。 #Lux1:checked~.mainPhoto { 左边距：0； } #Lux2:ch...

Jquery Select element 2 positions further - .next().next() 的另一种方式

我正在寻找一种方法来选择一个 div 元素，该元素不是通过单击功能“选择”的元素的直接下一个元素。 （兄弟姐妹） 我正在寻找一种方法来选择一个 div 元素，它不是通过单击功能“选择”的元素的直接下一个元素。 <div id="click">(siblings)</div><div>text</div><div id="get this one"></div> 现在我想选择 ID 为“get this one”的那个——在我的代码中这个 ID 不可用。所有的 div 都有相同的类，并且有兄弟姐妹。 我可以通过$(this).next().next()选择第三个，但我认为这不是最好的方法。 在被点击的那个之前也可以有 divs - 所以它不一定是第一个。 我尝试了:nth-child选择器但没有找到解决方案。 稍后我也可能想在单击一个之后选择第 13 个（或第 23 个、第 65 个等等）。这意味着我想对这个问题有一个相当动态的解决方案。 感谢您的帮助， 菲尔 您可以将 .nextAll() 与 .eq() 一起用于您的动态方法，如下所示： $(this).nextAll().eq(1) //0 based index, this would be .next().next() 这将使您能够让n兄弟姐妹前进，这似乎就是您所追求的。 看来$(this).parent().find('div').eq(2).attr('id')应该行得通。 更新（添加了 find('div') ）

：tbody 标签上的空选择器

给出下表： 给出下表： <table id="incidents"> <thead> <tr> <th></th> </tr> </thead> <tbody> </tbody> </table> 使用 jQuery，以下评估为 false： $("#incidents tbody").is(":empty") 我想用CSS把内容设置成一条消息： #incidents tbody:empty { content: "<tr>message foo</tr>"; } :empty选择器可以应用于tbody吗？ 不，不幸的是，在这种情况下，tbody 中的缩进和换行符阻止它与 :empty 匹配。这适用于 CSS 和 jQuery，据我所知 :empty 的行为相同，以及 jQuery 的 :parent，相当于 :not(:empty)（very 糟糕的选择名）。 此外，您不能使用 CSS content 向 DOM 中添加元素。您需要在 jQuery 或服务器端执行此操作：检查 tbody 是否有任何行，如果没有，请添加该行。 如果你使用 jQuery，你可以使用这个： var tbody = $("#incidents tbody"); if (tbody.children().length == 0) { tbody.html("<tr>message foo</tr>"); } 在这种情况下，tbody 包含空白作为内容，所以它不会工作 ：空 :empty 伪类表示任何没有子元素的元素 全部。只有元素节点和文本（包括空格）是 经过考虑的。注释或处理指令不影响是否 元素是否为空。 此外，:content 只能与 :before 或 :after 伪元素一起使用 内容 CSS 属性与 ::before 和 ::after 一起使用 伪元素在元素中生成内容。插入的对象 使用 content 属性是匿名替换元素。 如果你想使用 :empty 那么你需要像这样给出 tbody 语法： <tbody></tbody> 正如您定义的那样， :empty 不会检查它，因为它有一个新行。 按照我告诉你的那样定义tbody。 您也可以使用.html()来检查条件： if(!$("#incidents tbody").html()) {} 参考： 如何使用 jQuery 检查 HTML 元素是否为空？ <tbody> 不是空的，因为它包含空格。你必须使用过滤功能来解决这个问题： $("#incidents tbody").filter(function() { return !$.trim($(this).text()); }).append('<tr>message foo</tr>'); 或者数孩子的数量： $("#incidents tbody").filter(function() { return !$(this).children().length; }).append('<tr>message foo</tr>'); 仅供参考：您可以使用以下 jQuery 选择器来选择具有空 tbody 的表，而不依赖于表元素的 id： $("table:not(:has(>tbody>tr))") 使用 $("#incidents tbody").html() 然后检查你得到了什么。 2023年只有CSS： tbody:not(:has(>tr)) { position: relative; height: 10em; } tbody:not(:has(>tr)):before { display: block; position: absolute; content: 'message foo'; color: #aaa; top: calc(50% - 0.5em); left: 50%; transform: translate(-50%, -50%); } 检查这个： <table id="incidents"> <thead> <tr> <th></th> </tr> </thead> <tbody></tbody> </table>

如何使用 <td> 选择器更改嵌套在 <div> 元素中的 <div> 元素的颜色？ [重复]

我正在创建歌曲的 HTML 文档（特别是 kPop），并对歌手的歌词进行颜色编码。 最初，我向 元素添加类，这确实有效。但我是

酒店网站的 Puppeteer/CSS 选择器 - 价格从结果页面返回两倍

在这个酒店网站 (https://www.marriott.com/default.mi) 中，我试图从结果页面中提取酒店名称、价格和距离。 问题：价格返回两次并弄乱了我的结果数组......

查找没有 ID 的多个元素

所以，我在学校的班级喜欢玩kahoot，当学生在他们的名字中写下坏话时，我的老师总是很沮丧。我正在尝试构建一个谷歌扩展来过滤名称......

Gtk3-css中如何对所有子元素应用css？

嵌套组件的问题： 我正在尝试将背景应用于 GtkComboBoxText。 我正在获取小部件的上下文并将 CSS 应用于它： * { 背景：红色 } 这不会改变......