css-selectors 相关问题

如果所有子级都隐藏，则隐藏父级

我有一个包含组的列表，并使用 CSSOM 使用文本字段动态过滤内容。这是一种仅使用 CSS 来实现“搜索”的方法。 不幸的是当过滤器过滤时

更改 Angular 中切换按钮的颜色

我无法更改 Angular 中切换按钮的颜色。 这是我的代码： 切换 ::ng-deep .custom-toggl...

如何选择页面中的最后一个元素？

有没有办法用CSS选择特定元素的最后一次出现？ 这是一个例子：DEMO 我尝试了最后一个孩子，但这不是我想要的。我用过这个类： HTML： ... 有没有办法用CSS选择特定元素的最后出现？ 这是一个例子：DEMO 我尝试过last-child但这不是我想要的。我用过这个课程： HTML： <ul> <li><span>test</span></li> <li> <span>test</span> <span>test</span> </li> </ul> <div> <span>test</span> <span>test</span> </div> <p> <span>test</span> <span>red</span> </p> CSS： span:last-child{ color:red; font-weight:bold; } 我希望最后一个带有“红色”内容的span是红色的。我怎样才能用CSS做到这一点？ 更新： 对于具有相同父元素的元素，有一个使用 last-of-type 的解决方案。但不同的父母呢？ 试试这个：（你应该知道父包装元素） body > *:last-child > span:last-child{ color: red; } 工作小提琴 这是从我的博客中获取的解决方案：https://css-tip.com/last-element-dom/ span { &:nth-last-child(1 of &):not(:has(~ * &) *):not(:has(~ &) *):not(:has(~ * &)):not(:has(&)) { color: red; font-weight: bold; } } <ul> <li><span>test</span></li> <li> <span>test</span> <span>test</span> </li> </ul> <div> <span>test</span> <span>test</span> </div> <p> <span>test</span> <span>red</span> </p> 一个更复杂的例子： span { &:nth-last-child(1 of &):not(:has(~ * &) *):not(:has(~ &) *):not(:has(~ * &)):not(:has(&)) { color: red; font-weight: bold; } } <div>Some content</div> <div> <span>Some content</span> <span> <span>Some content</span> <span>Some content</span> <span>Some content</span> </span> <span>Some content</span> <span>Some content</span> </div> <div> <span>Some content</span> <span>Some content</span> </div> <span> <span>Some content</span> <span>Some content</span> </span> <div> <span> <span>Some content</span> <span>Some content</span> </span> <span> <span>Some content</span> <span>Some content</span> <span>Some content</span> </span> <span> <span>Some content</span> <span>Some content</span> <span>Some content <span>Some content</span> <span>Some content</span> </span> <span> <span> <span> <span>Some content</span> <span>Some content</span> <span>Some content</span> </span> </span> </span> <span> <span>Some content</span> <span>Some content</span> <span>Some content</span> </span> </span>

在 React 中不使用 CSS 模块可以实现作用域样式吗？

我的项目使用了CSS模块，但是输出的类名会添加hash后缀。这是不需要的，因为我想保持类名的语义。 在 Vue.js 中，作用域样式可以通过

选择第一个出现的标签，但使用 CSS 忽略层次结构

我偶然发现了这个关于 CSS 选择器的问题。即选择第一次出现的 但忽略其层次结构。我知道我可以使用 JavaScript 来 document.querySelectorAll('s...

如何在CSS中的另一个规则中使用规则？

我觉得我的要求有点奇怪，但我也没有别的办法。 有没有办法在现实生活中执行这个伪 css 规则： 假设我有规则： .myCssRule1{ 颜色：红色； } 我不能（不要...

如何让 CSS 影响所有其他不可见的元素

我正在尝试使用 CSS 来替换我的 div 中的背景颜色。我可以做到这一点，但是哪些 div 显示会发生变化。我希望能够仅替换当前可见的内容。不然就p...

使用CSS ::之前和定位在文本后对齐星号

我有一个文本元素。我无法修改该文本。因此，我将尝试通过 CSS:: 修改该文本，然后再使用 content:'test' 样式和position: 绝对样式。在文本元素之后...

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 <