选择器是与文档树中的元素匹配的模式。在CSS规则中，它们用于为与模式匹配的元素定义样式。
我已经设法在屏幕为桌面大小时以一行方式工作。但当我缩小屏幕尺寸时，我无法使其进入多行。 我知道我可以做到...
我的代码不起作用 我的屏幕截图中有 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)...
我正在尝试使用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 }