css-selectors 相关问题

CSS 问题：first-of-type :first-letter

我已将页面设置为在内容的第一段上创建一个大的首字下沉字母。这按预期工作，但是当我在受影响的元素之前有另一个具有指定类的 div 时，它会使...

如何在CSS中设置父级和子级之间的边框？

为了设置元素之间的边框线，我在每个子元素的一侧使用边框，除了最后一个。例如 第一 第二... 为了在元素之间设置边界线，我在每个子元素的一侧使用边框，除了最后一个。对于示例 <div class="parent"> <div>First</div> <div>Second</div> <div>Third</div> <div>Fourth</div> </div> 使用CSS .parent div{ display:block; padding:5px; border-bottom:dashed 1px #000} .parent div:last-child{ border-bottom:dashed 0 #000 } 有没有办法根据父级的 CSS 样式设置子级之间的边框？不使用 last-child。换句话说，在父规则的一个声明中。 不可以，边框是子元素的属性，因此只能在子元素上指定。您可以为此使用单个规则，但它需要高级 CSS3 选择器支持： .parent > div:not(:last-child){ border-bottom: dashed 1px #000; } 我只知道一个解决方法：使用 jQuery 并迭代这些子元素（每个：http://api.jquery.com/each/）并设置你的 css 类 if next(next: http://api. jquery.com/?s=next) 元素也是子元素... 我认为另一种方式，仅使用css不存在，但我不确定，如果您找到仅使用css的解决方案，请发布;) 问候 您可以玩box-shadow属性： .parent > div + div { box-shadow: inset 0px 1px 0px 0px black; } <div class="parent"> <div>First</div> <div>Second</div> <div>Third</div> <div>Fourth</div> </div> 了解类似表格的视图也很有帮助： .parent div { box-shadow: 1px 1px 0px 0px black, inset 1px 1px 0px 0px black; } <div class="parent"> <div>First</div> <div>Second</div> <div>Third</div> <div>Fourth</div> </div>

没有特定类名的内容的 jQuery 选择器

这是我的 html 标记： 这是我的 html 标记： <ul class="list-unstyled mb-2"> <li class="mr-2 d-inline-block"> <p class="m-0"><i class="fas fa-birthday-cake mr-2" aria-hidden="true"></i>Age 26-34</p> </li> <li class="mr-2"> <p class="text-truncate m-0"><i class="fas fa-map-marker-alt mr-2"></i>City</p> </li> <li class="mr-2"> <p class="text-truncate m-0"><i class="fas fa-calendar-alt mr-2"></i>29.10.2024 - 29.10.2024</p> </li> <li class="mr-2"> <p class="m-0"><i class="fas fa-money-bill-alt mr-2"></i>50 USD</p> </li> </ul> 问题是我不知道如何获取内容“29.10.2024 - 29.10.2024”，该内容之前有 <p> 和孩子 <i> 以及类名 "fa-map-marker-alt"。 怎样做才能得到它？ 你可以这样做： $('ul.list-unstyled > li:nth-child(3) > p') .contents() .filter(function() { return this.nodeType === Node.TEXT_NODE; }) .text() .trim(); 它仅获取文本，因此它将忽略任何其他元素，请阅读有关contents此处的更多信息。

CSS 选择器是否包含类似于 xpath 的文本？

在 Selenium 中，是否有任何带有“contains”的 CSS 选择器选项，类似于 Xpath，我们使用 contains[text(),....] 进行检查。 在下面的示例中，我给出了 CSS 和 Xpath &...

是否可以有一个基于 CSS 属性（及其值）的 CSS 选择器？

例如，我想要一个适用于所有具有 CSS Overflow:auto; 的 div 元素的 CSS 选择器。财产。是否有可能有这样的选择器？

CSS - 不同的第 n 种类型

我确信这是可能的，但我不知道如何通过 CSS 实现它。 我想在第一次找到该组时定位一个类的第三个实例，并在第二次找到该组时定位第二个实例...

如何使用 css 更改辅助字体的大小而不更改后备（主要）字体的大小？

我正在尝试将一组特定的 h1 标题更改为与我为 h1 定义的普通字体不同的字体，因此我创建了一个类，将 h1 字体系列定义为该类的 Font2 - 但如果

当焦点位于另一个元素时更改元素的样式

当焦点位于另一个div上时，我需要更改div的样式。我尝试了以下代码，但没有用 我的 css 文件看起来像这样 ＃一 { 背景... 当焦点位于另一个 div 上时，我需要更改 div 的样式。我尝试了以下代码，但没有工作 <div id="one"> <div id="two"> 我的CSS文件看起来像这样 #one { background-color:red; } #two:focus #one { background-color:green; } 非常感谢任何帮助！ 如果您的意思是 :hover 而不是 :focus，则使用相邻的选择器，使用 + 将在 #two 的 :hover 上选择您的 #one #one:hover + #two { color: red; } 演示 注意：您有一个拼写错误，例如 if 而不是 id，另外，请关闭您的 div 元素。 正如您所说，您希望将焦点放在 div 上，而不是将 :hover 替换为 :focus，但相邻选择器逻辑保持不变... <div id="one" tabindex="1">One, Hover Me</div> <div id="two">Two</div> #one:focus + #two { color: red; } 演示 （按第一行看效果）或者（在jsfiddle中点击结果窗口，然后按一次tab按钮） <pre> <div id="parent"> <input type="text" id="one"/> <input type="text" id="two"/> </div> #parent.has(#one:focus) { color: red; } </pre> 只需尝试制作您想要为父级设置样式的元素 当我遇到这样的事情时，我就是这么做的 使用jquery解决问题或使用css中的hover属性

CSS 宽度属性覆盖

我有这个CSS： .选择的容器{ 位置：相对； 显示：内联块； 垂直对齐：居中； 字体大小：13px； -webkit-用户选择：无； -moz-用户选择：无； ...

需要帮助来理解下面的jquery代码

首页 博客 Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut <a href="#home">Home</a> <a href="#blog">Blog</a> <div id="home"> Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto</div> <div id="blog"> Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto</div> $('a[href*=#]').click(function(event){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 1000); event.preventDefault(); }); 此代码用于平滑滚动点击主页、博客链接。但我无法理解 jquery 部分。这是什么意思 -> $('a[href*=#]') 还有这个-> scrollTop: $( $.attr(this, 'href') ).offset().top 请帮助我。我是 jquery 的新手.. $('a[href*=#]') 选择具有 a 属性（href 匹配属性）且包含（[] 是包含匹配器）a *= 的所有 # 元素。 这意味着同一页面上的所有链接（因为它们是基于锚点的）的滚动都是动画的。 scrollTop: $($.attr(this, 'href')).offset().top 选择所单击的链接指向的目标 (.offset()) 到页面顶部 (.top) 的偏移量 ($($.attr(this, 'href))) 并滚动到此位置。

使用 CSS 匹配空输入字段

如何将样式应用于空输入字段？如果用户在输入字段中键入内容，则不应再应用该样式。这在 CSS 中可能吗？我试过这个： 输入[值=“”]

选择最后一个没有类的元素[重复]

我在特定 JS 事件的元素中动态添加和删除类。我想做的是选择最后一个没有这些 CSS 类的子元素。 例子#1 <

如何让 Puppeteer 仅单击具有设置“状态”的选择器？

我正在尝试制作一个机器人来帮助我买票，但是如图所示，只有几个座位。 我有一个问题要解决如何让 Puppeteer 仅单击可用的座位。 在

仅针对一种文件类型的类或 ID 中的 CSS 选择器

我是CSS新手（非常新，第三天），并且已经到处搜索有相同查询的人，但我没有找到任何东西。到目前为止，我已经尝试为图像创建一个类或 id，并且......

CSS - 是否可以在父元素中选择多个不同的子元素而不重复父元素？

我整个下午都在研究 CSS 选择器，试图找到这个问题的答案，因为它看起来很简单，但我一生都找不到任何解决方案。 给定类似于以下的结构：...

使用容器查询标准 CSS 属性

我尝试让容器样式查询正常工作，但发现了一些奇怪的地方。 考虑以下代码： html ... <... 我尝试让容器样式查询工作，但发现了一些奇怪的地方。 考虑以下代码： html <div class="parent"> <div class="child"> ... </div> </div> CSS .parent { --test-var: red; background-color: grey; } @container style(background-color: grey) /* @container style(--test-var: red) */ { .child { background-color:red; } } 上述 css 规则不应用 'child-style'，尽管这应该遵循有关此功能的 MDN 文档。 使用自定义属性上的查询（即通过使用注释的 css 查询），事情按预期/记录工作（使用 chrome 版本 128.0.6613.138 等进行测试）。 也许这个功能还没有准备好以这种方式使用。 但如果我错过了什么，我很想知道。 提前致谢！ 添加了 jsfiddle 如果有人想尝试一下。 在父元素上使用 container-type。 .parent { container-type: inline-size; } 这应该可以正常工作。

Selenium Python css 选择器按类不起作用

我有 4 种方法来定位某个元素并想要单击它： DOM 是： 我通过四种方式定位这个元素： （通过.XPATH，... 我有 4 种方法来定位某个元素并想单击它： DOM 是： <div class="ui dropdown selection" tabindex="0"> 我通过四种方式定位这个元素： (By.XPATH, "//div[@class='ui dropdown selection']") (By.CSS_SELECTOR, "[class='ui dropdown selection']") (By.CSS_SELECTOR, ".ui dropdown selection") (By.CLASS_NAME, "ui dropdown selection") 我只是点击元素 方式 1 和 2 有效，测试正常 - 并且 len(element) 为 1 方式3和4不起作用：NoSuchElementException：消息：没有这样的元素：无法定位元素：{“method”：“css选择器”，“selector”：“.ui下拉选择”} - 和len（元素）是 0 （等待没有帮助，方式一、方式二根本不需要等待） 你能告诉我为什么方法3和方法4失败了吗？ 当在 CSS 选择器中为同一标签使用多个类名时，它们必须用点而不是空格分隔。这是表达第三个的正确方式： (By.CSS_SELECTOR, ".ui.dropdown.selection") 或 (By.CSS_SELECTOR, "div.ui.dropdown.selection"). 对于第四个，你不能将 By.CLASS_NAME 与多个类名组件一起使用。您必须选择一个，但由于这可能不会为您提供唯一的选择器，因此您最好使用其他方法之一来形成选择器。 @迈克尔 (By.CSS_SELECTOR, ".ui.dropdown.selection") (By.CSS_SELECTOR, "div.ui.dropdown.selection") 两者都不起作用 - selenium.common.exceptions.NoSuchElementException：消息：没有这样的元素：无法找到元素 但请注意，只有 1 个元素，因为这有效： (By.XPATH, "//div[@class='ui dropdown selection']") 和len(element) = 1

开发工具中硬盘上找不到的CSS文件是什么？

这是 Thunderbird 开发工具的屏幕截图。我想用不会刺激我眼睛的颜色替换突出显示的黄色（我在 Thunderbird GUI 中使用深色主题）。 所以，我创造...

为可点击容器创建“虚拟”按钮

TL； DR：尝试在可点击容器中制作一个具有悬停效果的虚拟按钮。 前言：我只寻找 HTML/CSS 解决方案（我已经知道如何使用 JS 来做到这一点）。 我正在研究一个简单的...

如何使用 Selenium 通过单击来刷新 Tableau

有没有办法访问 Tableau 可视化工具栏按钮，例如“刷新此视图中的数据”？ 我尝试通过 id 和 Xpath 来定位工具栏元素，但它抛出一个元素未找到异常...