选择器是与文档树中的元素匹配的模式。在CSS规则中，它们用于为与模式匹配的元素定义样式。
是否可以编写一个 CSS 规则来选择没有特定类的元素的第一个子元素？ 例子： 是否可以编写 CSS 规则来选择没有特定类的元素的第一个子元素？ 示例： <div> <span class="common-class ignore"></span> <span class="common-class ignore"></span> <span class="common-class"></span> <span class="common-class"></span> </div> 在这种情况下，我想选择第一个不带类的span。 我尝试了这个，但似乎不起作用： ignore 更新： 如果我向名为 .common-class:first-child:not(.ignore) { ...some rules... } 的父 div 添加一个类，则 Jukka 建议的选择器的修改版本会起作用，除非第一个带有 parent-class 类的 span 在第一个不带类的 ignore 之后。上述选择器如下： .parent-class > .common-class.ignore + .common-class:not(.ignore) { ...some rules... } 这个问题类似于第一个带有类的元素的CSS选择器，除了第一个元素没有类。如前所述， :first-child:not(.ignore) 表示一个元素，该元素是其父级的第一个子级，并且不具有“ignore”类，而不是与选择器的其余部分匹配的第一个子级。 您可以使用我在链接问题的我的答案中描述的同级组合器的覆盖技术，将类选择器替换为包含类选择器的:not()伪类： .common-class:not(.ignore) { /* Every span without class .ignore, including the first */ } .common-class:not(.ignore) ~ .common-class:not(.ignore) { /* Revert above declarations for every such element after the first */ } 这将选择带有 .common-class 且没有 .ignore 类的 all 范围。 span.common-class:not(.ignore) { color: blue; } 但是，因为我们只想选择第一个，所以您可以使用 ~ 选择器覆盖后面的同级。 span.common-class:not(.ignore) ~ span { color: black; /* or color: inherit; */ } jsBin 演示 如果您已经在使用 jQuery，也可以使用 来完成 $("span.common-class:not(.ignore):first").css('color', 'blue'); 不，这是不可能的。选择器 :first-child:not(.ignore) 选择一个元素，该元素是其父元素的第一个子元素，并且不属于类 ignore。没有“一流”选择器，也没有“非一流”选择器。 您可以使用选择器 .ignore + :not(.ignore)，但它会匹配任何不属于 ignore 类的元素，并紧跟在该类中的元素之后。但它匹配的太多了，而不仅仅是此类元素中的第一个。根据标记结构，此选择器可能仍然适合特定情况，即使它不是所提出的一般问题的答案。 您不必使用类来选择 div。其他 css 解决方案（例如 nth-child 等）怎么样？当然，这需要文档结构的知识。 div.someClass + div:not(.someClass) {...} 这将选择第一个没有 someClass 的 div，紧随其后的是带有 someClass 的 div。希望它能有所帮助，即使它不会在存在多个“类+无类对”的情况下挑出第一个无类 div 出现。 （运行片段查看示例） body{background-color:black; color:white} div.someClass {background-color:darkgreen} div.someClass + div:not(.someClass) {background-color:brown} <div class="someClass">some class</div> <div class="someClass">some class</div> <div>no-class following div.someClass</div> <div>no class</div> <div>no class</div> <div class="someClass">some class</div> <div>no-class following div.someClass again!</div> <div>no class</div> <div>no class</div> <div>no class</div>
鉴于以下类声明和代码...... .foo > a { 颜色：绿色； } .bar a { 颜色：红色； } 一些林... 给出以下类声明和代码... .foo > a { color:green; } .bar a { color:red; } <div class="bar"> <div class="foo"> <a href="#">SOME LINK</a> </div> </div> ...我认为链接会是绿色的，因为虽然两个声明都有一个类 (010) 和一个元素 (001)，但 .foo 具有直接后代选择器。但可惜的是，链接是红色的。 为什么？ > 对于 css 特异性没有任何价值。 两种情况都有 11 个特异性值： .foo > a { color:green; }/*specificity value is 11*/ .bar a { color:red; }/*specificity value is 11*/ 在您的情况下，您可以这样使用以获得更大的特异性： .bar .foo > a { color:green; }/*greater specificity value is 21*/ .foo a { color:red; }/*specificity value is 11*/ 好的，我要在此处添加特异性的工作原理： Selector Specificity Specificity in large base inline-style 1 0 0 0 1000 id selector 0 1 0 0 100 class,pseudo,attribute selector 0 0 1 0 10 type selector and pseudo elements 0 0 0 1 1 您有两个相互冲突的 CSS 规则。如果我没有记错的话，直接后代选择器与后代选择器具有相同的特异性，因此稍后解析的规则将覆盖之前解析的规则，所以如果您的规则是： .foo > a { color:green; } .bar a { color:red; } 然后颜色将为红色。如果您的规则是： .bar a { color:red; } .foo > a { color:green; } 那么对于满足这两个规则的选择器的任何锚点，颜色将为绿色。 组合器在特异性上没有任何价值，只有选择器有：id，class，标签，伪元素，伪类，属性选择器。
选择器“a:not(:has(a))”适用于 Chrome，但不适用于 Firefox [重复]
以下代码适用于 Chrome 和 Edge，但不适用于 Firefox： document.querySelectorAll('a:not(:has(a))') 在 Firefox 上，它会抛出 未捕获的 DOMException: Document.querySelectorAll: 'a:not(:has(a)...
我正在尝试使用selenium并编写一个简单的代码，它将打开浏览器并转到github网站。打开页面后，它会在搜索栏中搜索给定的关键字，但问题是......
在我的 HTML 结构中，我的设置如下： ... ... 在我的 HTML 结构中，我的设置如下： <body> <main> <section> ... </section> <aside> ... </aside> </main> </body> 问题是，并非所有页面都有<aside> 我需要选择 <section> 并给它一个 max-width: 500px; 仅当 <aside> 存在时。默认为 section { max-width: 1000px; }（当 <aside> 不存在时） 与一个标签的选择器直接跟随另一个标签不同；用户[提出问题]想要一直使用“B”样式。另外，在这个问题中，用户想要选择“B”（而不是“A”） 仅当 <section> 存在时，我才需要设置 <aside> 样式。 我无法更改 HTML 的顺序 >_< 只用CSS可以完成吗？ 我需要什么选择器或如何设置它？ 如果不能用 CSS 来完成（我宁愿只用 CSS），我该如何实现呢？ 一个巧妙的小技巧 您可以通过使用技巧来检查 是否 <section> 元素是 <main> 中唯一的元素来实现您想要的目的。 如果那里还有任何其他元素，则这将不起作用。在你的情况下，它应该像这样工作（http://jsfiddle.net/Ljm323qb/2/）： section { max-width: 500px; } /* The STAR of the show */ section:only-child { max-width: 1000px; } 如本代码笔所示：http://codepen.io/omarjuvera/pen/ByXGyK?editors=110 兄弟选择器的一般内容 有一个 + 选择器，它会选择紧随该元素之后的同级元素 (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors) 还有 ~ 选择器选择所有以下同级（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors） 您可以通过将 <aside> 元素放在 <section> 元素之前并使用同级选择器来实现。 这是一个例子：http://jsfiddle.net/Ljm323qb/1/ 快速展望未来 很快这将成为可能，通过一个新的 :has 伪类 (http://dev.w3.org/csswg/selectors-4/#relational) 您可以拨打类似 main:has(> aside) > section { ... } 之类的电话，但不幸的是，我们必须等待:( 没有 JavaScript 如果您可以将 html 元素的顺序更改为： <body> <main> <aside> ... </aside> <section> ... </section> </main> </body> 您可以使用同级选择器来做到这一点： aside ~ section { max-width: 500px; } 您可以使用 jQuery 将类 .haveSidebar 切换到 body 标签，并使 section 标签的 CSS 取决于该类是否存在于 body 标签上： HTML <main> <section> </section> <aside> </aside> </main> CSS main { width:100%; } main aside { width:300px; background:red; min-height:300px; float:left; } main section { width:100%; background:green; min-height:300px; float:left; } body.haveSidebar main section { width: calc(100% - 300px); } JS var sideBar = $('body > main > aside'); if (sideBar.length > 0) { $('body').addClass('haveSidebar'); } else { $('body').removeClass('haveSidebar'); } 摆弄旁白标签 没有旁白标签的拨弄 更新 没有 calc() 的解决方案，通过使用 margin-left 属性 main aside { width:300px; background:red; min-height:300px; position:relative; } main section { width:100%; background:green; min-height:300px; float:left; } .haveSidebar main section { margin-left:301px; } 不使用 calc() 进行拨弄 尽管这不是最简洁的方法，但您可以在文档就绪的 javascript 函数上运行，以检查aside标签是否存在，并相应地将内联CSS注入到部分标签中。 如果您可以将 side 元素放在第一部分之前，则可以使用 相邻同级选择器: aside + section{ max-width: 500px } 试试这个，我相信它只能用一些javascript来完成。 if ($('main').find('aside').length>0) { $('main').find('section').addClass('specificSection'); } 使用 JavaScript 来完成此操作相当简单。 例如，这将起作用： <script> window.onload = function() { if (document.getElementsByTagName('aside')[0]) { document.getElementsByTagName('section')[0].style.max-width = '500px'; } else { document.getElementsByTagName('section')[0].style.max-width = '1000px'; } } </script> 可以使用 :has() 选择器来实现，如下： :has(main aside) { section { max-width: 500px; } }
我可以发誓我看到了一个高级 CSS 规则，它在选择器名称中使用星号。我正在使用 Bootstrap，并且父 div 中有几个不同的 div，如下所示： 我发誓我看到了一个高级 CSS 规则，它在选择器名称中使用星号。我正在使用 Bootstrap，并且父 div 中有几个不同的 div，如下所示： <div class="example"> <div class="col-sm-1"> TEST </div> <div class="col-sm-4"> TEST </div> </div> 我想用类似的东西： div.example div.col-sm-*{ padding-right:5px; } 我知道并排添加每条规则不会杀死我，但我想我以前见过类似的事情，并且想学习未来的速记法（如果存在）。我也尝试过类似的事情： div.example div.col-sm-[*]{ padding-right:5px; } 这可能吗？ 您可能正在考虑属性选择器： div.example div[class*="col-sm-"]{ padding-right:5px; } 假设每个 div 唯一拥有的类是列类，那么就可以了。或者使用 ^= 代替 *= 来指示 class 属性值 以该字符串开始。 您还可以使用： .example div{ //rule }
我目前正在学习在线Python课程，大部分进展都没有问题，或者至少最终能够解决它们，但是这个让我难住了。我是
我试图用 CSS 隐藏一个 DOM 元素（通过将鼠标悬停在其同级元素上），但它无法正常工作。 在 .cta_call 类中，我有悬停效果来更改背景颜色，但这是需要的......
如何选择具有特定类的最后一个元素，而不是父级中的最后一个子元素？
<div class="commentList"> <article class="comment " id="com21"></article> <article class="comment " id="com20"></article> <article class="comment " id="com19"></article> <div class="something"> hello </div> </div> 我想选择#com19？ .comment { width:470px; border-bottom:1px dotted #f0f0f0; margin-bottom:10px; } .comment:last-child { border-bottom:none; margin-bottom:0; } 只要我有另一个 div.something 作为评论列表中实际的最后一个孩子，这就不起作用。在这种情况下是否可以使用最后一个子选择器来选择article.comment的最后一次出现？ jsFiddle :last-child 仅当相关元素是容器的最后一个子元素而不是特定类型元素的最后一个时才起作用。为此，您想要:last-of-type http://jsfiddle.net/C23g6/3/ 根据 @BoltClock 的评论，这仅检查最后一个 article 元素，而不是最后一个具有 .comment 类的元素。 body { background: black; } .comment { width: 470px; border-bottom: 1px dotted #f0f0f0; margin-bottom: 10px; } .comment:last-of-type { border-bottom: none; margin-bottom: 0; } <div class="commentList"> <article class="comment " id="com21"></article> <article class="comment " id="com20"></article> <article class="comment " id="com19"></article> <div class="something"> hello </div> </div> 我猜最正确的答案是：使用 :nth-child （或者，在这种特定情况下，使用其对应的 :nth-last-child）。大多数人只知道这个选择器的第一个参数是基于 n 的计算来获取一系列项目，但它也可以采用第二个参数“of [any CSS 选择器]”。 您的场景可以使用此选择器来解决：.commentList .comment:nth-last-child(1 of .comment) 但是技术上正确并不意味着你可以使用它，因为这个选择器目前仅在 Safari 中实现。 进一步阅读： https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo http://caniuse.com/#search=nth-child 现在可以通过仔细使用:has()来解决这个问题，具体来说： /* switch out the {class} below */ .{class}:not(:has(~ .{class})) 类似的技术还允许您选择任何内容，但容器中最后一次出现的类或一组元素中最后一次出现的除外。请参阅下面的代码片段以获取示例。 注意：has()目前在 Chrome、Edge 和 Safari 中受支持，但不支持 Firefox（2022 年 1 月） /* last in group */ .class:has(+ :not(.class)) { background: pink; } /* anything but last in container */ .class:has(~ .class) { box-shadow: 0 0 0 1px #F00A; } /* last in container */ .class:not(:has(~ .class)) { background: #0F0A; } <div> <div class="class">not-last</div> <div class="class">not-last</div> <div class="class">last-in-group</div> <div>---</div> <div class="class">not-last</div> <div class="class">last-in-group</div> <div>---</div> <div class="class">last-class</div> <div>---</div> </div> 如果要浮动元素，则可以颠倒顺序 即float: right;而不是float: left; 然后使用此方法选择类的第一个子级。 /* 1: Apply style to ALL instances */ #header .some-class { padding-right: 0; } /* 2: Remove style from ALL instances except FIRST instance */ #header .some-class~.some-class { padding-right: 20px; } 这实际上只是将类应用于最后一个实例，因为它现在的顺序相反。 这是一个适合您的工作示例： <!doctype html> <head><title>CSS Test</title> <style type="text/css"> .some-class { margin: 0; padding: 0 20px; list-style-type: square; } .lfloat { float: left; display: block; } .rfloat { float: right; display: block; } /* apply style to last instance only */ #header .some-class { border: 1px solid red; padding-right: 0; } #header .some-class~.some-class { border: 0; padding-right: 20px; } </style> </head> <body> <div id="header"> <img src="some_image" title="Logo" class="lfloat no-border"/> <ul class="some-class rfloat"> <li>List 1-1</li> <li>List 1-2</li> <li>List 1-3</li> </ul> <ul class="some-class rfloat"> <li>List 2-1</li> <li>List 2-2</li> <li>List 2-3</li> </ul> <ul class="some-class rfloat"> <li>List 3-1</li> <li>List 3-2</li> <li>List 3-3</li> </ul> <img src="some_other_img" title="Icon" class="rfloat no-border"/> </div> </body> </html> 新的 :has() 伪类（尚未受所有浏览器支持）让您非常接近解决方案： .class:has(+ :not(.class)) 限制是，这将找到任何带有 .class 的元素，后跟不具有此类的元素。但这与问题的用例相匹配。 我认为应该在这里评论对我有用的东西： 在需要的地方多次使用:last-child，这样它总是能得到最后一个。 以此为例： .page.one .page-container .comment:last-child { color: red; } .page.two .page-container:last-child .comment:last-child { color: blue; } <p> When you use .comment:last-child </p> <p> you only get the last comment in both parents </p> <div class="page one"> <div class="page-container"> <p class="comment"> Something </p> <p class="comment"> Something </p> </div> <div class="page-container"> <p class="comment"> Something </p> <p class="comment"> Something </p> </div> </div> <p> When you use .page-container:last-child .comment:last-child </p> <p> you get the last page-container's, last comment </p> <div class="page two"> <div class="page-container"> <p class="comment"> Something </p> <p class="comment"> Something </p> </div> <div class="page-container"> <p class="comment"> Something </p> <p class="comment"> Something </p> </div> </div> 2023年方式 经过一番搜索，我发现了这个。 在 Chrome、Firefox Edge 和 Safari 中运行良好，未在其他浏览器中测试 /* target first element with class ".comment" */ :nth-child(1 of .comment) { background-color: red; } /* target last element with class ".comment" */ :nth-last-child(1 of .comment) { background-color: red; } <div class="commentList"> <div class="something"> hello </div> <article class="comment " id="com21">test</article> <article class="comment " id="com20">test</article> <article class="comment " id="com19">test</article> <div class="something"> hello </div> </div> 这个解决方案怎么样？ div.commentList > article.comment:not(:last-child):last-of-type { color:red; /*or whatever...*/ } HTML： <div> <div class="group_1">1</div> <div class="group_1">2</div> <div class="group_1">3</div> <div class="group_2">4</div> <div class="group_2">5</div> <div class="group_1">6</div> <div class="group_1">7</div> <div class="group_1">8</div> <div class="group_2">9</div> <div class="group_2">10</div> </div> CSS：.group_1:has(+ :not(.group_1), .group_1:last-of-type {color: red;} .group_2:has(+ :not(.group_2), .group_2:last-of-type {color: blue;} 红色：3、8 蓝色：5、10 有两种方法可以选择类的最后一个元素。 将元素包装在容器元素中。 html: <div class="container"> <div class="member">Member</div> <div class="member">Member</div> <div class="member">Member</div> <div> CSS：.container:last-child { color: red; } 如果您不想将元素包装在另一个元素中，那么您可以利用 last-of-type。 html: <div class="member">Member</div> <div class="member">Member</div> <div class="member">Member</div> CSS：.member:last-of-type{ color: red; }
嗨，我已在我的一个元素上应用了位置粘性。我使用了以下代码： 位置：粘性； 顶部：10px； z 索引：1； 我还删除了父类中隐藏的溢出。但还是粘着 pos...
HTML： 第一 第二个 第三 第四 HTML： <div class="someclass"> <h3>First</h3> <strong>Second</strong> <hr> Third <br> Fourth <br> <em></em> ... </div> 从上面的div节点我想获取hr之后的所有子文本节点（"Third"，"Fourth"，...可能还有更多） 如果我这样做 document.querySelectorAll('div.someclass>hr~*') 我得到NodeList [ br, br, em, ... ] - 没有文本节点 与下面 document.querySelector('div.someclass').textContent 我将所有文本节点作为单个字符串 我可以将每个文本节点获取为 var third = document.querySelector('div.someclass').childNodes[6].textContent var fourth = document.querySelector('div.someclass').childNodes[8].textContent 所以我尝试了 document.querySelector('div.someclass').childNodes[5:] # SyntaxError 和slice() document.querySelector('div.someclass').childNodes.slice(5) # TypeError 有什么方法可以获取从 hr 节点开始的所有子文本节点吗？ 更新 我忘了提这个问题是关于网络抓取，而不是网络开发......我无法更改 HTML 源代码 您可以获取内容并使用 hr 进行拆分来获取 hr 之后的 html，然后在 div 中替换此内容，您将能够操纵此 div 来获取您的内容： var content = document.querySelector('.someclass').innerHTML; content = content.split('<hr>'); content = content[1]; document.querySelector('.hide').innerHTML = content; /**/ var nodes = document.querySelector('.hide').childNodes; for (var i = 0; i < nodes.length; i++) { console.log(nodes[i].textContent); } .hide { display: none; } <div class="someclass"> <h3>First</h3> <strong>Second</strong> <hr> Third <br> Fourth <br> <em></em> ... </div> <div class="hide"></div> .childNodes 包括文本和非文本节点。 你的语法错误是因为你不能像javascript中的[5:]那样进行数组切片。 而且 NodeList 类似于数组...但不是数组...这就是为什么 slice 不能直接在 childNodes 上工作。 1) 获取你的 NodeList var nodeList = document.querySelector('.some-class').childNodes; 2）将NodeList转换为实际数组 nodes = Array.prototype.slice.call(nodes); （注意在现代 ES6 浏览器中你可以这样做 nodes = Array.from(nodes); 此外，现代浏览器还添加了对 NodeList 对象的 .forEach 支持...因此您可以直接使用 .forEach，而无需在现代浏览器中对 NodeList 进行数组转换） 3）迭代收集你想要的文本节点 这取决于你自己的逻辑。但是您可以迭代节点并测试是否 node.nodeType == Node.TEXT_NODE 来查看任何给定节点是否是文本节点。 var foundHr = false, results = []; nodes.forEach(el => { if (el.tagName == 'HR') { foundHr = true; } else if (foundHr && el.nodeType == Node.TEXT_NODE) { results.push(el.textContent); } }); console.log(results); 您可以使用这段代码获取node下的所有文本节点： var walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null, false); var textNode; var result = []; while (textNode = walker.nextNode()) { result.push(textNode); } 并且您已经获得了 Array 文本节点，因此您可以根据需要 slice() 来使用它： console.log(result.slice(5)); 另一种[递归]解决方案 const { childNodes } = <Element>document.querySelector('.someclass'); // throws an error if element doesn't exist const siblings = sliceNodeList([], false, 'hr', ...childNodes); function sliceNodeList(nodes: Node[], deep: boolean, selector: string, node?: Node, ...more: Node[]) { if (!selector) return nodes; if (!node) return nodes; const { nodeType } = node; const handle = { // not concerned with Attr Nodes [Node.ELEMENT_NODE]: handleElement, [Node.TEXT_NODE]: handleOther, [Node.COMMENT_NODE]: handleOther, }[ nodeType ]; if (handle) handle.call(this, nodes, deep, selector, node); if (more.length) sliceNodeList(nodes, deep, selector, ...more); return nodes; } function handleElement(nodes: Node[], deep: boolean, selector: string, node: Element) { const { childNodes } = node; // not concerned with Attr Nodes const matches = node.matches(selector); if (nodes.length) nodes.push(node); // assume we must have already matched else if (matches) nodes.push(node); // we matched on an element if (deep) sliceNodeList(nodes, deep, selector, ...childNodes); // keep diving into substructures return nodes; } function handleOther(nodes: Node[], deep: boolean, selector: string, node: Text|Comment) { if (nodes.length) return [ ...nodes, node ]; // assume we must have already matched if (node.data === selector) return [ ...nodes, node ]; // we matched on a Text or Comment value return nodes; } 基本上，这只是通过检查在映射到正确的节点类型的处理程序时是否有更多同级来使用递归。它通过调用父函数来使用相互递归（如果deep === true）来深入嵌套结构。我们在这里并不关心 Attr Node，但您可以为此设置一个处理程序。 因为 Text 和 Comment 共享足够多的相同接口 (node.data)，我们能够重用相同的函数。该函数与 handleElement 类似，假设 if (nodes.length) 那么我们已经匹配，并且可以安全可靠地将当前节点添加到集合中。 与 handleElement 不同，Text 或 Comment 无法呼叫 node.matches。但是，如果节点的值等于 selector，我们仍然可以在节点上进行匹配 - 使我们能够通过文本进行选择。我们可以更进一步，我们可以使用 === 或 String.prototype.includes 之类的东西，而不是使用 RegExp 对整个文本（或注释）值使用严格相等。 我们可以使用 for、while 或其他迭代方法。然而，在我看来，递归是遍历 DOM 的更好方法，因为 DOM 是集成的（Node 实现了复合模式），因此是递归结构。我也只是很快地在 VSCode 中完成了这个，甚至没有在浏览器控制台中运行它，但我一直在编写这个模式，所以它应该非常接近 good-to-go。 希望有帮助。
我相信我的用例中的类的价值会轮换或更改，这导致我当前的方法不起作用。 目前的方法如下： var elements = document.querySelectorAll('ul.sc-kUVfrs.c...
我一直在试图解决这个问题，但没有成功。 下面是 6 个圆形 div。当用户将鼠标悬停在其中一个上时，我希望悬停的 div 扩大一点（放大），而所有其他...
我需要能够选择一个 HTML p 标签，前提是它后面没有另一个具有特定类的 div 元素。例如，我需要选择这个 P <... 我需要能够选择一个 HTML p 标签，前提是它后面没有另一个具有特定类的 div 元素。例如，我需要选择这个P <div id="myContainer"> <p>...</p> <div>...</div> </div> 但不是这个，因为它后面跟着一个 class="red" 的 div。 <div id="myContainer"> <p>...</p> <div class="red">...</div> </div> 这就是我正在尝试的： #myContainer > p ~ div:not(.step) 您无法使用 CSS 来定位先前的元素，但根据您的 HTML 结构，您可以使用直接同级选择器。 CSS： .myContainer p + div:not(.red) { border: 1px solid #000; } HTML： <div class="myContainer"> <p>...</p> <div>...</div> </div> <div class="myContainer"> <p>...</p> <div class="red">...</div> </div> 演示 http://jsfiddle.net/92VVZ/ 给出以下 HTML 代码： <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title>Test page</title> </head> <body> <div id="myContainer"> <p>P1</p> <div>D1</div> </div> <div id="myContainer"> <p>P2</p> <div class="red">D2</div> </div> </body> </html> CSS 选择器： p:not(:has(+div.red)) 将选择第一个p，但不会选择最后一个。 说明： :not()伪类表示一个未由其参数表示的元素 (link) :has()伪类（link）表示一个元素，当锚定到该元素时，该元素与其参数中的选择器相匹配。该伪类自 Chrome >= 105（2022 年 8 月 30 日发布）起开始工作，而截至 2023 年 12 月，它尚未在 Firefox 中发布(link) 下一个同级组合器 + 选择元素的下一个同级 (link) 所有其他答案都是错误的，因为它们选择了 div 元素，而不是之前的 p 元素。 你是这个意思吗？那么你就快到了。 演示 /* will select p not directly followed by div.red */ #myContainer > p + div:not(.red)
是否可以通过 HTML5 数据属性（例如 data-role）来选择 CSS 中的元素？
如何仅使用 CSS 选择器根据该项目的子属性来选择列表中的第 n 个项目
所以如果我有一个这样的列表： 所以如果我有一个这样的列表： <ul> <li><button disabled/></li> <li><button disabled/></li> <li><button /></li> <li><button /></li> <li><button /></li> </ul> 并且禁用按钮的数量永远不知道 - 但将始终是连续的并出现在启用按钮之前，如何选择第二个启用按钮？ 现在我有： “ul li:nth-of-type(2) button:not([disabled])” 但这只会选择第二个<li>，其子按钮未禁用 - 如果禁用，则不会选择任何内容。 换句话说，它不会“找到”第二个启用的按钮，它只是检查第二个按钮是否启用并相应地选择它。 我已经尝试过了 “ul li button:not([disabled]):nth-of-type(2)” 但问题是该按钮是 <li> 的唯一子元素，因此 nth-of-type(2) 没有任何内容可供选择。 我认为我需要能够写的是这样的： “ul (li button:not([disabled])):nth-of-type(2)” 但我认为这不是正确的语法:( 任何帮助将不胜感激！如果它对任何人有帮助，我正在编写一个 UDF 测试来查找（并选择）React 中时间选择器组件的第二个可用时间段。 这里有一种方法可以使用 :has() 来实现，现在所有更新的浏览器都支持它（感谢 FF 的跟进）： button { width: 100px; height: 50px; } /* Second */ li:has(button[disabled])+li:has(button:not([disabled]))+li:has(button:not([disabled])) button { background: red; } /* first */ li:has(button[disabled])+li:has(button:not([disabled])) button { background: blue; } /* third */ li:has(button[disabled])+li:has(button:not([disabled]))+li:has(button:not([disabled]))+li:has(button:not([disabled])) button { background: green; } <ul> <li><button disabled/></li> <li><button disabled/></li> <li><button /></li> <li><button /></li> <li><button /></li> </ul> 这不是很优雅，因为我们正在链接下一个同级 + 选择器，但它可以工作。
我尝试创建一个div，并让它的::before出现在它后面，使其看起来像某种阴影，但由于某种原因，我无法让伪元素出现在原始元素后面。 我尝试创建一个 div，并让它的 ::before 出现在它后面，使其看起来像某种阴影，但由于某种原因，我无法让伪元素出现在原始元素后面。 <div class="hero container split"> <div class="hero__cont-image bg-dark"><img src="" alt="" class="hero_cont-image__image"> </div> .hero__cont-image { position: relative; transform: rotate(0); display: flex; align-items: center; justify-content: center; left: calc(-50vw + 50%); border-radius: 0px 300px 300px 0px; } .hero__cont-image::before { content: ""; background-color: blue; position: absolute; width: 125%; height: 125%; z-index: -1; } 我希望伪元素出现在原始元素后面 在父级上 transform 将创建一个新的堆叠上下文，这使得父级成为堆叠上下文的根元素。即使 z 索引为负，伪元素也无法将自身降低到根元素以下，因此它始终位于父元素之上。 如果您没有使用变换，请将其删除，并且带有负元素的伪元素将显示在父元素下方，因为现在父元素不再是其堆叠上下文的根元素。 .hero__cont-image { position: relative; display: flex; align-items: center; justify-content: center; left: calc(-50vw + 50%); border-radius: 0px 300px 300px 0px; } .hero__cont-image::before { content: ""; background-color: blue; position: absolute; width: 125%; height: 125%; z-index: -1; } <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </head> <body> <div class="hero container split"> <div class="hero__cont-image bg-dark"><img src="https://i.stack.imgur.com/memI0.png"> </div> </div> </body> 注意：这些元素创建新的堆叠上下文：Opacity、transforms、filters、css-regions、paged media。如果需要旋转父元素，请在 div 上创建一个包装器 div 并旋转该包装器。
我们已经接管了对公司内一个组织的支持，该组织每年发布一次新版本。我们没有编写原始代码。 我在搜索框中输入了一个名字，并得到了几个选项（...
当“悬停”效果发生时，如何使“:not”选择器对其他类起作用？
我正在制作一个有 3 张卡片的面板，当我将鼠标悬停在其中一张卡片上时，其他卡片会变得“模糊”，但是 :hover:not(:hover) 不起作用，有人可以告诉我如何使它...
我有一个带有 data-loading=true 和禁用属性的按钮。我需要在 tailwind 中编写一种仅在 data-loading!=true 且禁用时才适用的样式。 我有一个带有 data-loading=true 和禁用属性的按钮。我需要在 tailwind 中编写一种仅在 data-loading!=true 且禁用时才适用的样式。 <button data-loading='true' disabled>Submit</button> 尝试过（不起作用） disabled:not(data-[loading=true]):bg-red 当元素与 disabled: 伪类匹配时，您可以使用 :disabled 变体。 当 data-loading 不是 true 的值时，您可以使用带有 :not() 的 任意变体 和属性选择器：[&:not([data-loading=true])]:。 要将这两者结合起来，您可以单独链接它们： <script src="https://cdn.tailwindcss.com/3.3.5"></script> <button data-loading='true' disabled class="[&:not([data-loading=true])]:disabled:bg-red-500">Submit</button> <button data-loading='false' disabled class="[&:not([data-loading=true])]:disabled:bg-red-500">Submit</button> <button data-loading='true' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button> <button data-loading='false' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button> 或者您可以在任意变体中使用 :disabled 伪类而不是内置变体： <script src="https://cdn.tailwindcss.com/3.3.5"></script> <button data-loading='true' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button> <button data-loading='false' disabled class="[&:not([data-loading=true]):disabled]:bg-red-500">Submit</button>