css-selectors 相关问题

如何从 HTML 段中提取名称“Terence Crawford”，不包括 Span 元素？

我目前在从 HTML 段检索名称“Terence Crawford”时遇到困难。挑战在于排除存在于同一父元素中的 span 元素。 我目前在从 HTML 片段中检索姓名“Terence Crawford”时遇到困难。挑战在于排除存在于同一父元素中的 span 元素。 <td colspan="3" style="position:relative;" class="defaultTitleAlign"> <h1 style="display:inline-block;margin-right:5px;line-height:30px;"> <span style="font-weight:bold;"><i class="fas fa-crown" style="color:#f6b501 !important;"></i></span> "Terence Crawford" </h1> <div style="width:100%;position:relative;margin-top:5px;"> </div> </td> 我尝试通过指定类属性“defaultTitleAlign”和样式属性“display:inline-block;margin-right:5px;line-height:30px;”来检索名称，但它只返回“/n”的真实姓名。即使定位 h1 元素的全部内容，也不会显示名称。 In [9]: response.xpath("//td[@class='defaultTitleAlign']/h1/text()").get() Out[9]: '\n ' 您可以使用 getall() 方法从给定的选择器中收集所有 text() ，然后您可以在返回的列表中找到您要查找的部分。 例如： In [1]: from scrapy.selector import Selector In [2]: html = """<td colspan="3" style="position:relative;" class="defaultTitleAlign"> ...: <h1 style="display:inline-block;margin-right:5px;line-height:30px;"> ...: <span style="font-weight:bold;"><i class="fas fa-crown" style="color:#f6b501 !important;"></i></span> ...: "Terence Crawford" ...: </h1> ...: <div style="width:100%;position:relative;margin-top:5px;"> ...: </div> ...: </td>""" In [4]: response = Selector(text=html) In [5]: text_list = response.xpath("//td[@class='defaultTitleAlign']/h1//text()").getall() In [6]: text = text_list[1].strip() In [7]: text Out[7]: '"Terence Crawford"'

如何使用 Selenium Web 驱动程序和 Python 来查找 div 数据元素

我需要使用 Selenium Web 驱动程序、Python 从此列表中选择“澳大利亚”。我尝试过 XPath 和 CSS 选择器，但无法正确定位该元素。 driver.find_element(By.XP...

#css关于页面顶部和底部间距的混乱

今天我在css中遇到了一个问题。我创建了一个名为 main 的 div，它的子元素是 nav 和 box，在框中我放置了一些内容。当我修复 nav 将其在 css 中的位置应用为 fi 时...

如何使用 CSS ::part() 定位 Web 组件 ShadowDOM 中的第 N 个元素

我的构建起来非常简单，一系列直接位于#shadow-root中。 我可以将它们全部设计为...

如何在 ASP.NET asp:checkbox 控件呈现的 HTML 控件中定位 :after psuedo 元素？ [重复]

我看到了适用于简单输入标签对的代码： 超文本标记语言 我已经看到了适用于简单输入标签对的代码： HTML <input type="checkbox" id="toggle" class="checkbox" /> <label for="toggle" class="switch"></label> CSS .switch { position: relative; display: inline-block; width: 40px; height: 20px; background-color: rgba(0, 0, 0, 0.25); border-radius: 20px; transition: all 0.3s; } .switch::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius:50%; background-color: white; top: 1px; left: 1px; transition: all 0.3s; } .checkbox:checked + .switch::after { left : 20px; } .checkbox:checked + .switch { background-color: #7983ff; } .checkbox { display : none; } 上面的工作示例： https://codepen.io/lawrencelove/pen/xxBWpBj 但不幸的是，当使用 ASP.NET asp:checkbox 控件时，它以不同的方式呈现 HTML。 HTML <span class="checkbox"><input id="toggle" type="checkbox" name="ctl00$ucSiteVersion$toggle" checked="checked"> </span> <label for="toggle" class="switch"></label> 在这种情况下，因为 input 控件嵌套在 span 标签内，这似乎导致它不再与组合器选择器匹配。 上面带有 span 标签的损坏示例： https://codepen.io/lawrencelove/pen/MWxVrxm 我尝试了相邻兄弟姐妹和后代的各种组合，但我无法让它与结束 span 标签一起很好地发挥作用。我还尝试引用 #toggle:checked 而不是 .checkbox:checked，但这也不起作用。 如何从 .switch 标签内的 checkbox 控件定位 span？ 替换这个： .checkbox:checked + .switch::after { left : 20px; } .checkbox:checked + .switch { background-color: #7983ff; } 这样： span:has(> input:checked) + .switch::after { left : 20px; } span:has(> input:checked) + .switch { background-color: #7983ff; }

地址运算符（与号）和 @media 查询不起作用

我正在分享下面的代码片段，其中我使用嵌套，但我很困惑如何在其中使用媒体查询。 。联系 { @media only 屏幕和（最大宽度：1200px）{ & > .

如何在CSS中设置col的特定单元格的样式

我有一个包含 5 个顶级列的表格，每个顶级列跨越 4 个列。 我想对每个顶级列的最后一个子列应用不同的样式。 那应该怎么做呢。 我有一个包含 5 个顶级列的表格，每个顶级列跨越 4 个列。 我想对每个顶级列的最后一个子列应用不同的样式。 应该怎么做。 <table> <thead> <tr> <th colspan='3'> First </th> <th colspan='2'> Second </th> <th> Third </th> <th> Fourth </th> <th> Fifth </th> </tr> </thead> <tbody> <colgroup> <col span=3> <col span=2> <col> <col> <col> </colgroup> <tr> #First col <td> data </td> <td> data </td> <td> data </td> #this one #Second col <td> data </td> <td> data </td> #this one #Remain cols <td> data </td> <td> data </td> <td> data </td> </tr> </tobdy> </table> 我希望每个col具有相同的背景，但我也希望每个列的最后一个元素的背景不同。因此，每个列的最后一个元素应该有绿色背景。 尝试提出一个有效的选择器来设置所需列的样式 如果我正确理解你的问题，你正在寻找的选择器是td:nth-child(3), td:nth-child(5) - 请参阅下面的代码片段。如果没有，请提供您正在寻找的内容的更好描述。 th, td { border: 1px solid #ddd; background: #ddd; } td:nth-child(3), td:nth-child(5) { background: #fc9; } <table> <thead> <tr> <th colspan='3'> First </th> <th colspan='2'> Second </th> <th> Third </th> <th> Fourth </th> <th> Fifth </th> </tr> </thead> <tbody> <colgroup> <col span=3> <col span=2> <col> <col> <col> </colgroup> <tr> <td> data </td> <td> data </td> <td> data #this one</td> <td> data </td> <td> data #this one</td> <td> data </td> <td> data </td> <td> data </td> </tr> </tbody> </table>

适用于具有两个类的元素的 CSS 选择器

有没有一种方法可以根据设置为两个特定类的 class 属性的值来选择带有 CSS 的元素。例如，假设我有 3 个 div： 你好福<... 有没有一种方法可以根据设置为两个特定类的 class 属性的值来选择具有 CSS 的元素。例如，假设我有 3 个 div： <div class="foo">Hello Foo</div> <div class="foo bar">Hello World</div> <div class="bar">Hello Bar</div> 基于它是 foo 和 bar 类的成员这一事实，我可以编写什么 CSS 来仅选择列表中的第二个元素？ 链接两个类选择器（中间没有空格）： .foo.bar { /* Styles for element(s) with foo AND bar classes */ } 如果您仍然需要使用像 Internet Explorer 6 这样的古老浏览器，请注意它无法正确读取链式类选择器：它只会读取 last 类选择器（在本例中为 .bar），无论您列出的其他类别。 为了说明其他浏览器和 IE6 如何解释这一点，请考虑以下代码片段： * { color: black; } .foo.bar { color: red; } <div class="foo">1. Hello Foo</div> <div class="foo bar">2. Hello World</div> <div class="bar">3. Hello Bar</div> 页面将如下所示： 在支持的浏览器上： 未选择，因为此元素仅具有类 foo。 Selected，因为该元素同时具有类 foo 和 bar。 未选择，因为此元素仅具有类 bar。 在 Internet Explorer 6 中： 未选择，因为此元素没有类 bar。 Selected，因为该元素具有类 bar，无论列出的任何其他类如何。 Selected，因为该元素具有类 bar。 使用SASS： .foo { /* Styles with class "foo" */ &.bar { /* Styles with class "foo bar" */ } } 参见 Less 选择器中 & 符号的含义是什么？ 在SCSS中可以通过两种方式完成。 选项1 .foo.bar { // Styles with class "foo bar" } 选项2 .foo { &.bar { // Styles with class "foo bar" } } 在我的例子中 .Dashboard.Main-root-, .MuiInputBase-root 两个条件都满足，那么只有我们应用了 css 角色 body div[class*="Dashboard.Main-root-"] .MuiInputBase-root:before { border-bottom: 1px solid rgb(92 95 98); }

尝试使用带有 HTMLUnit 的 css 选择器来选择正确的按钮

我有以下 HTML 代码片段： 我有以下 HTML 代码片段： <div class="LocationsIndex__paginationBar__YE2Xo"> <div> <nav> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__symbol__KHv6r" type="button"> <div style="transform: rotate(180deg);">➞</div> </button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">1</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">2</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__active__EK2e1" type="button">3</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">4</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__disabled__FbUC6 Pagination__symbol__KHv6r" type="button">...</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">79</button> <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__symbol__KHv6r" type="button"> <div class="">➞</div> </button> </nav> </div> <div class="LocationsIndex__paginationInfo__YbpCl">Showing 81 to 120 of 3121</div> </div> 我尝试使用以下代码中所示的 HtmlPage.querySelector() 方法捕获该组中的最后一个按钮控件（它是一个分页器）。此方法调用始终返回 null。我尝试了几种不同的方法来获取这些信息，但没有成功。 'class="Control__Control__xxxxx" 类的最后几个字符可能不同，所以我只想根据类值的开头查找。 // do the pagination HtmlButton button = page.querySelector("button[class^='Control__control']:nth-child(8) div"); page = button.click(); 我做错了什么？ 要定位最后一个按钮控件，您可以使用 last-child 伪类来选择导航中的最后一个按钮元素 page.querySelector("nav button[class^='Control__control']:last-child div");

CSS 在悬停时定位同级元素的子元素

我有以下情况： 我的 CSS 网格中有 4 张卡片。第一张应该是“特色”（不同的背景等），并将鼠标悬停在其余卡片上，我想要 f...

仅使用CSS隐藏悬停时的兄弟div

我对一种让CSS（无javascript）显示div或您悬停的元素之外的元素感兴趣，如下所示： #除法{ 显示：无； } a：悬停#divid { 显示：块； }...

使用 CSS 选择器遍历 HTML 标签树

<div> <div class="header"> <div id="navbar" > <ul id="nav"> <li><a id="trigger"><span><p></p></span></a></li> <li><a id="target"><span><p></p></span></a></li> </ul> </div> </div> </div> 嘿伙计们，我有一个问题，如果不会给你们造成任何不便，与遍历 HTML 树有关。 我已经知道如何使用以下语法选择 <a id="trigger"></a>： div>div.header>div#navbar>ul#nav>li>a#trigger:hover {CSS} 将触发更改。 但问题是，我想定位它下面的 <a id="target""></a> 标签，但我还没有找到访问那里的 <a id="affected"></a> 的正确语法。 我希望当我将鼠标悬停在 id="trigger" 上时，id="target" 将会受到影响。 我已经尝试过使用 + 选择器来定位该 id，唉，试验以徒劳结束。 有可能影响该id吗？ 您可能需要相邻的同级选择器： #trigger:hover + #target {} 或者可能是兄弟组合器，它不需要第二个元素直接相邻： #trigger:hover ~ #target {} http://css-tricks.com/child-and-sibling-selectors 更新：正如下面的评论中所述，选择器实际上必须是兄弟姐妹。在原来的结构中，它们不是。 <div> <div class="header"> <div id="navbar" > <ul id="nav"> <li class="one"><a id="trigger">Trigger</a></li> <li class="two"><a id="target">Target</a></li> </ul> </div> </div> </div> .one:hover + .two {color: red} http://jsfiddle.net/5Gmz9/1/ 这是另一种方法，不需要 li 元素上的类或 ID： #nav li:first-child:hover + li {color: red} http://jsfiddle.net/5Gmz9/2/ 每种方法都有其陷阱。 顺便说一句， div>div.header>div#navbar>ul#nav>li>a#trigger:hover {} 可能写得和一样好 #navbar #trigger:hover {} 为您和浏览器节省一些工作。 我意识到这是一个老问题，但我发现它试图遍历 DOM。我发现“:has()”也可以工作，没有父项类，并且比第一个子项有更多的控制权： li:has(> #trigger):hover + li > #target {color:red} 或者就我而言，禁用复选框： .aspNetDisabled:has(> input:disabled:checked) + .slider {...

CSS在处理选择器时使用token算法还是子字符串算法？

我有以下代码 我有以下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .square__element { font-size: 20px; padding: 50px; background-color: orange; } </style> <title>Document</title> </head> <body> <div class="square__element">Square 1</div> <div class="square__element--modifier">Square 2</div> </body> </html> 当我运行它时，.square__element{}selector中声明的任何样式都不会应用于“Square 2”element。 最初我认为“Square 2”元素应该应用 .square__element{} 选择器中声明的所有样式。这就是为什么我在谷歌上搜索了一些搜索查询，试图弄清楚是否是我有错误的期望，或者我的浏览器是否出现了故障。但我发现没有任何帮助。 然后我打开了w3c，研究了大约一个小时的规范。我浏览了整个“语法”章节，但也没有找到答案。 最后，我询问了我可以使用的所有人工智能聊天内容。 他们（Bard、Chat GPT 和 Copilot）告诉我，.square__element{} 中声明的样式应该应用于“Square 2”元素，因为 “CSS 处理器使用子字符串匹配算法” 但是 Bing 聊天告诉我，除非我用空格分隔<div class="square__element square__element--modifier">Square 2</div>，否则不应该应用样式，因为 “CSS 处理器不使用子字符串匹配算法，而是使用 令牌匹配算法，其中令牌是字符序列 不是空格、制表符、换行符或其他分隔符。 ” 所以，我仍然不知道正确答案。 有人可以帮我弄清楚 .square__element{} 选择器中声明的规则是否应该应用于“Square 2”元素吗？ 也许可以指出规范中我错过的解释的地方。 不，不应该。 square__element和square__element--modifier都是两个不同的有效类名。 添加这样的修饰符只是一个命名约定，表示修饰符正在向基类应用或修改某些样式（square_element）。通常在使用时包含这两个类。您可以在 Boostrap 类中看到许多类似的示例，例如 btn btn-lg，其中 btn-lg 应用或覆盖一些附加样式到 btn。

学习 HTML 和 CSS 挑战斗争

第一次来这里。 我正在参加 Angela Yu 的 Web 开发训练营，并做一个项目来测试我对级联（特异性和继承）、CSS 选择器及其组合的了解，...

为什么在类应该覆盖链接样式时需要 !important ？

我正在尝试为页内导航创建可重用的样式。有一个默认样式，通过 ID 分配给封闭的 元素。我还需要为某些规格提供替代样式... 我正在尝试为页内导航创建可重用的样式。有一个默认样式，通过 ID 分配给封闭的 元素。我还需要为该 元素中的某些特殊 元素提供替代样式。 我将一个类分配给一个 元素，然后尝试对其进行样式设置，结果好坏参半。一些属性发生了变化，但其他属性只有当我用“！important”强制覆盖时才发生变化。 虽然我可以做到这一点，但感觉就像是黑客攻击。为了正确定位这些特定链接，我缺少什么？ #page-nav a { border: 2px solid black; border-radius: .3rem; padding: .25rem .5rem; line-height: 2.25; text-decoration: none; font-weight: 700; color: black; } #page-nav a:hover { background-color: black; color: white; } a.pageNavAlt:link { background-color: black; /* WORKS */ /* color: red; DOESN'T WORK */ color: red !important; /* WORKS */ } a.pageNavAlt:hover { /* background-color: darkred; color: yellow; DOESN'T WORK */ background-color: darkred !important; /* WORKS */ color: yellow !important; /* WORKS */ } <nav id="page-nav"> <a class="pageNavAlt" href="#">Alternate link</a> <a href="#">Standard link 1</a> <a href="#">Standard link 2</a> </nav> 因为#page-nav a（和#page-nav a:hover）由于使用了id而在CSS规则中具有更高的优先级。因此，a.pageNavAlt:hover are 中的样式已被应用，但被 #page-nav a:hover 中的样式所推翻。 您可以将 id 选择器添加到其他样式中： #page-nav a { border: 2px solid black; border-radius: .3rem; padding: .25rem .5rem; line-height: 2.25; text-decoration: none; font-weight: 700; color: black; } #page-nav a:hover { background-color: black; color: white; } #page-nav a.pageNavAlt:link { /* <-- here */ background-color: black; color: red; } #page-nav a.pageNavAlt:hover { /* <-- and here */ background-color: darkred; color: yellow; } <nav id="page-nav"> <a class="pageNavAlt" href="#">Alternate link</a> <a href="#">Standard link 1</a> <a href="#">Standard link 2</a> </nav>

多个子元素的 CSS 选择器

假设我有这张桌子： 有东西！ 如果我...

pandas set_table_styles 不适用于表标签

我使用以下代码来设置表格边框和标题列的一些格式。标题列的样式工作正常，但代码不会呈现表格的边框。

选择属性为空或未指定的元素

采用以下示意性 html 代码： 现在我正在寻找一个选择...

:root 和 * 有什么区别？

当我们在CSS中声明变量时，为什么要这样写： ：根 { --bg颜色：橙色； } /* 代替 */ * { --bg颜色：橙色； } 这两件事有什么区别？

目标位置：当前处于“卡住”状态的粘性元素

位置：粘性现在适用于某些移动浏览器，因此您可以使菜单栏随页面滚动，但每当用户滚动经过它时，它就会粘在视口的顶部。 但如果你想...