选择器是与文档树中的元素匹配的模式。在CSS规则中，它们用于为与模式匹配的元素定义样式。
为什么 CSS 选择器 .a ~ .b :is(body .b .c .d) 与以下简单 HTML 标记中的 .d 匹配，而第一个 .b 和 :is() 之间的空格肯定是后代组合器，因此选择器...
我有以下 HTML，如下所示： 这是 HTML： 新闻 我有以下 HTML，如下所示： 这是 HTML： <div class="newsTimePeriod item-One"> <h3>News</h3> <i class="fas fa-car"></i> <div class="aboutItem"> <p>Fire is the rapid oxidation of a material in the exothermic chemical process of combustion, releasing heat, light, and various reaction products. </p> </div> </div> <div class="newsTimePeriod item-Two"> <h3>Old News</h3> <i class="fas fa-car"></i> <div class="aboutItem"> <p>Water is an inorganic with the chemical formula H 20. It is a transparent, tastless, odorless, and nearly colorless chemical substance. </p> </div> </div> 我尝试在图标（fa-car）上显示一条垂直线并将其连接到下一个图标。如果它是最后一个图标，则不会显示垂直线。例如 由于某种原因，垂直线不适用于我当前的 CSS。 .newsTimePeriod { display: flex; position: relative; overflow: hidden; padding: 0px 7px 0px 7px; } .newsTimePeriod h3{ width: 100px; float: left; display: flex; } .fa-car, .aboutItem{ margin: 18px 0px 0px 18px; } .fa-car { border-radius: 13px; height: 29px; width: 29px; color: #fff; background-color: #001277; padding: 5px; box-sizing: border-box; margin-top: 12px; } .aboutItem { padding: 14px 14px 14px 14px; max-width: 570px; background: #FFFFFF; border: 1px solid #DBDADA; color: #000; } /* To display vertical line*/ .fa-car::before { content: ''; position: absolute; height: calc(100% + 28px); width: 3px; background: #33004e; margin-top: 30px; margin-left: 6px; } /* To hide vertical line on the last icon*/ .newsTimePeriod:last-child .fa-car::before { display: none; } @media (max-width: 768px) { .newsTimePeriod { flex-direction: column; } .newsTimePeriod .aboutItem { width: 70%; align-self: end; margin: auto; } .newsTimePeriod h3 { flex-direction: row-reverse; padding: 0 0 0 22px; } } 我注意到，如果我将图标类包装在 div 中，则垂直线 CSS 可以工作，但我不希望图标类包装在 div 中。 我的 CSS 有问题吗？ 不确定这是否是您所要求的，但我做了一个简单的演示来尝试一下，我认为主要问题是定位。如果::before的父级，i标签不是相对定位的，给它绝对定位会使其位置按照整个页面来放置。另外，您可以使用 :not() 选择除最后一个子项之外的所有子项。 .box { margin: 2rem; padding: 1rem; border: 1px solid red; } .icon { width: 50px; height: 50px; background-color: blue; display: block; /*give the icon a position of relative*/ position: relative; } .box:not(:last-child) > .icon::before { content: ''; /*now this will be sized according to the size of the icon*/ position: absolute; height: calc(100% + 28px); width: 3px; background: #33004e; /*then use top or left, and % units to center it*/ top: 100%; left: 50%; } <body> <div> <div class="box"><i class="icon"></i></div> <div class="box"><i class="icon"></i></div> <div class="box"><i class="icon"></i></div> <div class="box"><i class="icon"></i></div> </div> </body> 也许你需要这个 <div> <div class="newsTimePeriod item-One"> <h3>News</h3> <i class="fas fa-car"></i> <div class="line"></div> <div class="aboutItem"> <p> Fire is the rapid oxidation of a material in the exothermic chemical process of combustion, releasing heat, light, and various reaction products. </p> </div> </div> <div class="newsTimePeriod item-Two"> <h3>Old News</h3> <i class="fas fa-car"></i> <div class="line"></div> <div class="aboutItem"> <p> Water is an inorganic with the chemical formula H 20. It is a transparent, tastless, odorless, and nearly colorless chemical substance. </p> </div> </div> </div> <style> .newsTimePeriod { display: flex; position: relative; /* overflow: hidden; */ padding: 0px 7px 0px 7px; } .newsTimePeriod h3 { width: 100px; float: left; display: flex; } .line { position: absolute; top: 53%; width: 3px; height: calc(100% - 50%); background-color: #33004e; z-index: -1; left: 142px; } .fa-car, .aboutItem { margin: 18px 0px 0px 18px; } .fa-car { border-radius: 13px; height: 29px; width: 29px; color: #fff; background-color: #001277; padding: 5px; box-sizing: border-box; margin-top: 12px; position: relative; /* Add position relative to keep the pseudo-element inside */ } .aboutItem { padding: 14px 14px 14px 14px; max-width: 570px; background: #FFFFFF; border: 1px solid #DBDADA; color: #000; } /* To display vertical line */ .fa-car::before { content: ''; position: absolute; height: calc(100% + 28px); width: 3px; background: #33004e; top: 23px; /* Updated top value to align with the icons */ left: 22px; /* Updated left value to align with the icons */ } /* To hide vertical line on the last icon */ .newsTimePeriod:last-child .line { display: none; } @media (max-width: 768px) { .newsTimePeriod { flex-direction: column; } .newsTimePeriod .aboutItem { width: 70%; align-self: end; margin: auto; } .newsTimePeriod h3 { flex-direction: row-reverse; padding: 0 0 0 22px; } /* Update for responsive view on small screens */ .fa-car::before { top: 0; left: 22px; height: 100%; } .line { position: absolute; top: 53%; width: 3px; height: calc(100% - 30%); background-color: #33004e; z-index: -1; left: 44px; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
在 Selenium 中使用 Xpath 查找嵌套元素不起作用
给出以下站点和定位器： https://ultimateqa.com/automation X路径 CONTAINER = (By.XPATH, '//ul[@class="bottom-nav"]') MENU = (By.XPATH, '//li[包含(@class, "菜单项...
CSS 类 .foo.bar （不带空格）和 .foo .bar （带空格）有什么区别
请您解释一下这两个 CSS 类语法之间的区别： .元素.符号{} 和 .element.large .symbol {} 我不明白两者之间的区别。第一个...
我有一个简单的自定义元素，我在 light DOM 中使用 ::-webkit-scrollbar 系列伪元素对其滚动条进行了样式设置。 自定义元素.define( '我的元素', 课程延长
如何在 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 元素相关联...然后，每当其子元素之一发生单击事件（无论是否动态创建）时，该事件都会触发，因为它仍然与现有元素。诀窍是过滤你想与之互动的孩子。
我有一个除法问题，正在表格中显示。每个数字都存储在“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。这是我...
假设我有这样的 JSON： { “foobar”：“数据foobar”， "foo": "数据 foo", "bar": "数据栏", "baz": "数据 baz&q...
.导航栏{ 列表样式：无； 保证金：0； 填充：0； 背景色：蓝色； 边界半径：5px； } 背景颜色消失 .navbar li{ 向左飘浮; } .导航栏{ 列表样式：无； 保证金：0； 填充：0； 背景...
我想更改隐藏选项的文本颜色。 隐藏选项应显示为占位符文本而不是可选选项。 我试图将样式直接放在元素上，但是没有...
什么时候我应该将直接缓冲区与 Java NIO 一起用于网络 I/O 的简单规则？
有天赋的人可以用简单直接的方式解释复杂的事情来解决这个问题吗？为了获得最佳性能，我应该何时使用直接 ByteBuffers 与 reg ...
带有单个“:not()”的多个连接属性选择器与 JavaScript 中带有多个“:not()”的多个单独属性选择器
我有 2 s 并尝试通过将 2 个连接的属性选择器设置为 1 :not() 和 2 个单独的属性选择器设置为 2 :not()s 来选择 s 分别使用 querySelectorAll() as
在我正在做的页面上，我将以这样的自定义链接元素结束： 在我正在做的页面上，我将以这样的自定义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 代码段中使用的所有类名的列表？ 例如，下面的 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') ）