css-selectors 相关问题

仅将未知（在编程时）样式表应用于一个 div

我希望能够拥有一个系统，可以动态加载静态 HTML 页面（在编程时开发人员不知道），并且将该样式表仅应用于一个 DIV。 有一些

如何使用CSS：有嵌套元素选择器？

如何使用 :has 选择器深入多个级别？ 我尝试了以下代码，但似乎不支持： div:has(p:has(span)) { 背景：橙色 } 如何使用 :has 选择器深入多个级别？ 我尝试了以下代码，但似乎不支持： div:has(p:has(span)) { background: orange } <div> <p> <span>Hello</span> </p> </div> <div> <p>Bye</p> </div> 假设您只需要对 <div> 进行样式设置，如果它有一个后代 <p> 元素，而该元素又具有一个后代 <span> 元素，我建议： div { background-color: blue; } div:has(p span) { background: orange; } <div> <p> <span>Hello</span> </p> </div> <div> <p>Bye</p> </div> JS Fiddle 演示. 值得补充的是，这目前在 Firefox（版本 111.0.1，在 Ubuntu 22.10 上运行）中不起作用。因此，浏览器的差异和不一致是可以预料的。 回答原来的问题，:has不能嵌套。引用MDN： :has() 伪类不能嵌套在另一个 :has() 中。 这是因为许多伪元素基于其祖先的样式有条件地存在，并且允许通过 :has() 查询这些元素可以引入循环查询。

如何影响标签内除特定子标签之外的所有内容

我有以下代码示例 STRONG 第 1 条线，旨在保持相同的水色 第 2 行，本来是黄色的。 ... 我有以下代码示例 <div> <h1> <strong>STRONG Line #1, Intended to stay the same aqua</strong><br> Line #2, Intended to be Yellow. </h1> </div> <span>Line #3, not in the div at all.</span> h1 { background-color: aqua; } /* option 1 */ div h1:not( > strong) { background-color: yellow; } /* option 2 */ div h1:not(:first-child) { background-color: yellow; } 我正在尝试影响除 内容之外的所有 h1 内容 我尝试使用子组合器和 :first-child 选择器但不能，提前感谢 这是测试控制台 开发者.mozilla 如果您直接定位 strong 中的 h1 元素，则可以将其样式设置为与其余内容不同。请参阅以下示例： h1 { background-color: aqua; } div h1 strong { background-color: yellow; } <div> <h1> <strong>STRONG Line #1, Intended to stay the same aqua</strong><br> Line #2, Intended to be Yellow. </h1> </div> <span>Line #3, not in the div at all.</span>

隐藏 7 的倍数之后的第 n 个子项目

所以我从 cms 中设置了物品，并且无法控制它们的数量。 我想使用 css 隐藏超过 7 倍数的所有项目，但只隐藏最后几个。 IE。如果有 10 个项目我需要隐藏 l...

如何使按钮包装器之后的每个后续兄弟消失并通过按下这个按钮再次恢复其可见性？

我的页面上有 2 个按钮，“阅读更多”和“阅读更少”，它们是使用 WP 中的页面生成器创建的。我试图在页面

如何通过按下这个按钮使按钮包装器后的每个同级消失并再次恢复其可见性？

我的页面上有 2 个按钮，“阅读更多”和“阅读更少”，它们是使用 WP 中的页面生成器创建的。我试图在页面

“>”（大于号）CSS 选择器是什么意思？

例如： div > p.some_class { /* 一些声明 */ } > 符号到底是什么意思？

如何在HTML中指定属于同一类的元素？

如何指定每个 li 标签的第一个 p 元素属于同一个类，而不需要手动执行（以防 ul 元素中的 li 标签太多），因为我们知道 :first-child pse。 ..

CSS 仅选择数字样式[重复]

在我的网站上，我有一个部分写着“工作日 10:00 ~ 18:00 /*linebreak/ 周六 10:00 ~ 13:30" 我试图只将数字格式化为“Courier New”......

具有相同特性的父/子类的优先级

在给定的代码片段中，为什么 h1 元素的字体大小是 36px？ 我有这些问题： 如果 h1 是第一个定义的，那么 main 的字体大小（即 32px）应该应用于 h1 标题，因为它是 de...

我正在开发一个项目，我需要显示多个图标以及它们之间的连接线。这是我想要实现的目标的示例：

Figma 图片 我已经设法创建布局并添加图标，但我正在努力创建它们之间的连接线。我尝试过使用 CSS 边框和伪元素，但我看不到...

通过webpack压缩css文件时可以忽略某些关键字吗？

我将一些变量传递到我的CSS文件以在运行时更新CSS属性。我的 css 文件包含一些类，其中包含一些动态属性，例如 。背景 { <# if(variable == true)...

CSS 选择器中是否可以使用元序列和量词？

我希望下面的代码将捕获所有具有样式属性的元素 背景： url(: 或“背景图像： url(. 从“node-html-pa...

悬停在一个 div 上并显示另一个

我想当我将鼠标悬停在页脚绿色上时显示我的 p 元素。问题是，我不知道如何在完全不同的 div 中显示它。在我的 CSS 中，我使用了 .footer-green + .textAppear{}...

CSS中的鼠标按下选择器是什么？

我注意到按钮和其他元素具有默认样式，并按 3 个步骤运行：普通视图、悬停/焦点视图和鼠标按下/单击视图，在 CSS 中我可以更改普通视图的样式和

选择不具有特定类的子元素的元素

我的HTML结构是这样的 某事 某事 &l... 我的HTML结构是这样的 <div> <div> <h1>Something</h1> </div> <div> <h1 class='Handle'>Something</h1> </div> </div> 如果div > div没有“Handle”类的子项，我希望div > div具有样式cursor:move;。我将如何在纯 CSS 中做到这一点，这可能吗？ :not(:has()) 注意：对旧浏览器的支持有限。 下面的示例演示了 :not() 的组合 和:has() 伪类来选择没有指定子类的元素。 div:not(:has(p)) { background: powderblue; } div:not(:has(p)):hover { color: blue; background: azure; } <div> <h1>Does Not Have a Paragraph</h1> </div> <div> <h1>Has a Paragraph</h1> <p>Paragraph</p> </div> 截至 2024 年 3 月，:has() 受到大多数现代浏览器的支持。但是，Firefox 最近才在版本 121（日期为 2023 年 12 月 19 日）中实现了对 :has 的支持。因此，如果客户端使用旧浏览器，请谨慎使用。 :not() 自 2015 年以来已被大多数浏览器支持。 或者，jQuery 支持 :has() 选择器。 CSS中没有父选择器，所以你所要求的是不可能的。您可以做的是使用属性选择器将 cursor:move 放在每个不具有“Handle”类的 h1 上。 h1:not([class=Handle]) { cursor:move; } http://jsfiddle.net/4HLGF/ 另一个选项是调整 HTML，并将 h1 移动到与 div 相同的水平。 <div> <h1>Something</h1> <div> dragable content </div> <h1 class='Handle'>Something</h1> <div> non dragable content </div> </div> 现在您可以对 h1 进行相同的检查，并定位其后面的 div。 h1:not([class=Handle]) + div { cursor:move; } http://jsfiddle.net/4HLGF/2/ 尝试 div > div h1:not([class=Handle]) { cursor:move; }

尝试了解 CSS 选择器如何与 HTML 按钮交互

我是制作网站的新手，因此找到了一个模板可以用作我自己的个人网站的参考，到目前为止，我正在使用尝试删除边框的按钮，因此它是一个文本按钮...

如何找到购买按钮的相对xpath

我想找到购买按钮的xpath。我使用通过 Chrome 进行复制来创建路径，但它们无法在我需要它们工作的网站的每个页面上工作。 我需要一条这样的路径...

您可以选择将类应用于复杂选择器而不重复复杂选择器或声明吗？

上下文 以下 CSS 规则用于多个站点共享的主题。有些网站有菜单项，而其他网站则没有。这些是在标题类之前应用于元素的样式

使用 CSS 选择器在 2 个类之间选择元素

假设我有以下 HTML 结构： 1 2 3 4 假设我有以下 HTML 结构： <div class="open">1</div> <div>2</div> <div class="close">3</div> <div>4</div> <div class="open">5</div> <div>6</div> <div>7</div> <div>8</div> <div class="close">9</div> <div>10</div> 我想选择“打开”和“关闭”类之间的所有元素（例如，div 编号 1,2,3,5,6,7,8。 到目前为止，我所做的是使用以下 CSS： .open ~ *:not(.close ~ *) { color: red; } 但它只捕获第一组，而不捕获以下组。 如何选择所有“组”？ 我尝试解决问题的游乐场： https://stackblitz.com/edit/stackblitz-starters-8fvzok?file=styles.css 亲爱的朋友。我知道你想选择 div 编号 (2,4,6,7,8,10) 这就是为什么你可以尝试这个代码： div:not([class]){ color: red; }