选择器是与文档树中的元素匹配的模式。在CSS规则中，它们用于为与模式匹配的元素定义样式。
我想在鼠标悬停时显示卡片。我做了两个div，第一个是单专辑，另一个是隐藏。我使用+选择器并对名为hide的div不显示任何内容。 但悬停效果确实...
我正在尝试将我的徽标添加到网页的标题中，但当我检查较小屏幕上的外观时，我不断看到 svg 周围有这个边距。 这是我的 html 文件 我正在尝试将我的徽标添加到网页标题中，但当我检查较小屏幕上的外观时，我不断看到 svg 周围有这个边距。 这是我的 html 文件 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Restaurant</title> </head> <body> <header> <div id="logo"> <img src="img/logo.svg" alt=""> <p>RESTAURANT</p> </div> </header> </body> </html>type here 这是我的 style.css 文件 *{ margin: 0; padding: 0; /* border: 1px solid red; */ } body{ background-color: black; color: white; } #logo img{ background: white; } #logo p{ font-size: 16.2; font-family: sans-serif; font-weight: bold; margin-left: 35px; letter-spacing: 0.2px; } 这是 logo.svg 该文件包含我想要包含在标题中的徽标 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 70.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,70.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13 2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14 122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19 -75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12 -106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41 10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29 -123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63 22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33 -72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22 11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0 -78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24 -5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4 -23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13 -11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104 -45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27 43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57 55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47 33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55 3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14 55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7 -8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/> <path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44 83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/> </g> </svg> 在大屏幕上看起来不错 但在较小的屏幕上，svg 周围有这个边距 我尝试裁剪 svg 但没有成功 我能想到的几乎所有其他解决方案都失败了 您需要做的就是更改 svg 代码上的 viewBox="0 0 241.000000 27.000000" 和 transform="translate(0.000000,27.000000)" 部分，它只是一个额外的空间，因此如上所述减小大小将解决该问题 我已经编辑了你的 svg 代码，只需将其替换为下面的代码： <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 27.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,27.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13 2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14 122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19 -75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12 -106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41 10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29 -123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63 22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33 -72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22 11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0 -78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24 -5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4 -23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13 -11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104 -45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27 43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57 55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47 33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55 3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14 55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7 -8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/> <path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44 83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/> </g> </svg>
在此输入图像描述 我试图将登录和注册项与导航栏的右侧对齐，但它不起作用。 有人能告诉我这是为什么吗？ &l...
我已经设法在屏幕为桌面大小时以一行方式工作。但当我缩小屏幕尺寸时，我无法使其进入多行。 我知道我可以做到...
我的代码不起作用 我的屏幕截图中有 HTML 和 CSS 代码？ [已关闭]
HTML CSS 我的两个屏幕截图中有一些 HTML 和 CSS 代码，但无法移动单词页面下的通知和通知圆圈，请看我的第三个屏幕截图。图片。有人请...
当我查看某些页面的源代码时，我看到一个标签为“此框架被识别为广告框架”。 有没有办法查询这些 iframe？我怎样才能像 DOM 树上的 iframe 一样查询？...
为什么selenium无法使用xpath或css选择器找到要单击的元素？
我尝试单击此处页面上的“>”，但 chrome XPATH 或 CSS 选择器找不到它 https://theanalyst.com/na/2023/08/opta-football-predictions/ 应该 chrome 完整的 xpath...
Seleniumbase 消息：元素 <p> 无法通过键盘访问
我正在尝试进入以下文本区域 但我得到了错误 消息：键盘无法访问元素 我都尝试过 元素 = WebDriverWait(驱动程序, 20).until(EC. 我正在尝试进入以下文本区域 但我收到错误 Message: Element <p> is not reachable by keyboard 我都尝试过 element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, ".ql-editor p"))).send_keys(troll_list[rand_troll]) 和 wait = WebDriverWait(driver, 30) wait.until(EC.element_to_be_clickable((By.XPATH, "//*[@id='chat_send-form_textarea']/div[1]/div[1]/p"))).send_keys(troll_list[rand_troll]) 我也遇到同样的错误 如何使用 seleniumbase 访问此文本框？ 我正在使用 Firefox 驱动程序。 更新： 此行为仅发生在 Firefox 中。 Chromium 能够成功找到并选择文本框。 您正在尝试将文本输入到p（段落）HTML 标记中，但该标记并非为此目的而设计。 您应该找到适当的 <input type="text"> 元素或 <textarea>... 将 div 添加到 css 选择器路径。 element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.ql-editor p"))).send_keys(troll_list[rand_troll]) 使用CSS选择器时，在CSS路径前添加标签名称
如何在 JavaScript 中将通配符元素名称与“querySelector()”或“querySelectorAll()”进行匹配？
有没有办法使用querySelector或querySelectorAll进行通配符元素名称匹配？ 我试图解析的 XML 文档基本上是一个简单的属性列表 我需要找到...
在我的 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; } }
我的输入是一个html： ... 我的输入是html： <div class="grid--item user-info user-hover"> <div class="user-gravatar48"> <a href="/users/22656/jon-skeet"> <div class="gravatar-wrapper-48"><img src="https://www.gravatar.com/avatar/6d8ebb117e8d83d74ea95fbdd0f87e13?s=96&d=identicon&r=PG" alt="Jon Skeet's user avatar" width="48" height="48" class="bar-sm"></div> </a> </div> <div class="user-details"> <a href="/users/22656/jon-skeet">Jon Skeet</a> <span class="user-location">Reading, United Kingdom</span> <div class="-flair"> <span class="reputation-score" title="reputation score 1,440,518" dir="ltr">1.4m</span><span title="873 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">873</span></span><span class="v-visible-sr">873 gold badges</span><span title="9172 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">9172</span></span><span class="v-visible-sr">9172 silver badges</span><span title="9224 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">9224</span></span><span class="v-visible-sr">9224 bronze badges</span> </div> </div> <div class="user-tags"> <a href="/questions/tagged/c%23">c#</a>, <a href="/questions/tagged/java">java</a>, <a href="/questions/tagged/.net">.net</a> </div> </div> 我对前两个 span 元素感兴趣，它们是 div 与 class="user-details" 的直接后代。 为此，我使用的是 css 选择器，但这个选择器返回 9 个结果，而不是仅两个：https://try.jsoup.org/~orgt_meWno3AxzO0GzxMBldEhIk 我尝试了 python 中的实现，但同样的问题： from bs4 import BeautifulSoup soup = BeautifulSoup(html, 'html.parser') soup.select('div.user-details span:nth-child(-n+2)') # [<span class="user-location">Reading, United Kingdom</span>, # <span class="reputation-score" dir="ltr" title="reputation score 1,440,518">1.4m</span>, # <span aria-hidden="true" title="873 gold badges"><span class="badge1"></span><span class="badgecount">873</span></span>, # <span class="badge1"></span>, # <span class="badgecount">873</span>, # <span class="badge2"></span>, # <span class="badgecount">9172</span>, # <span class="badge3"></span>, # <span class="badgecount">9224</span>] 我的预期输出是这样的： # [<span class="user-location">Reading, United Kingdom</span>, # <span class="reputation-score" dir="ltr" title="reputation score 1,440,518">1.4m</span>] 你们能告诉我我的 css 选择器有什么问题以及如何修复它吗？ 我的问题更多是关于 css 选择器，而不是寻找替代解决方案。 让我们看看您的 HTML。我已经重新格式化了它，以便我们可以看到相关部分的结构： <div class="user-details"> <a href="/users/22656/jon-skeet">Jon Skeet</a> <span class="user-location">Reading, United Kingdom</span> <div class="-flair"> <span class="reputation-score" title="reputation score 1,440,518" dir="ltr">1.4m</span> <span title="873 gold badges" aria-hidden="true"> <span class="badge1"></span> <span class="badgecount">873</span> </span> <span class="v-visible-sr">873 gold badges</span> <span title="9172 silver badges" aria-hidden="true"> <span class="badge2"></span> <span class="badgecount">9172</span> </span> <span class="v-visible-sr">9172 silver badges</span> <span title="9224 bronze badges" aria-hidden="true"> <span class="badge3"></span> <span class="badgecount">9224</span> </span> <span class="v-visible-sr">9224 bronze badges</span> </div> </div> 您说您想要定位 div.user-details 的前两个跨度后代，即 span.user-location 和 span.reputation-score。 （你还没有说为什么你想这样做，这将是有用的背景信息。） 您尝试使用的选择器是 div.user-details span:nth-child(-n+2)。选择器的第一部分没问题： div.user-details span 返回 div.user-details 的所有跨度后代（编号 13）。通过添加 :nth-child(-n+2)，您可以过滤结果以仅包含其父级的第一个或第二个子级（数字 9）的范围。您实际上想要做的是过滤结果以仅包含那些属于 div.user-details 的第一个或第二个后代的跨度，但是没有 :nth-descendant 选择器允许您这样做。 您只需要发明一种不同的方法来定位您想要的元素。你不能只使用他们的类名吗？ .user-location, .reputation-score
我尝试使用它从列表中选择第二个 a 标签： .container li a:first-child + a { ... } 但它似乎不起作用。是否还有另一种理想的纯 CSS 方式（除了 a:nth-child...
在 Angular 应用程序中，我想编辑应用于组件“p-table-row”的伪类“:host”的属性“border-top”，该组件是来自 po...
我想定位以下子元素： .行 .列:最后一个子级 .列:第n个子级(2), .行 .列:最后一个子级 .列:第n个子级(3), .行.列：最后一个子级.列：第n个子级（5）， ...
用于 SELECT html 元素且未选择任何内容的 CSS 选择器
我知道我在那里经常使用“选择”这个词......抱歉。 不管怎样，我正在寻找一个 CSS 选择器，我可以用它来识别页面上尚未进行选择的 HTML Select 元素，以便......
我是 jquery 的新手。我一直在尝试找出如何定位链接的第二个字符并将其颜色更改为红色。 $(document).ready(function () { $(".header-title-text").find...
是否可以编写一个 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)...