css-selectors 相关问题

如何在CSS中使用nth-child来选择某个元素之后的所有元素？

我见过 jQuery 有一个 :gt(n) 解决方案，但是在 CSS 中可以实现相同的行为吗？ 我想要的是移动网站在某些列表中的元素不超过 3 个。所以我需要一些东西

我正在使用CSS动画，当我加载/重新加载组件/页面时，它会像从右向左移动一样猛烈，之后它就可以正常工作了

'@关键帧slideAnimationBackLarge'：{ '0%': { 变换: 'translateX(15px)', 不透明度: 0 }, '100%': { 变换: 'translateX(0)', 不透明度: 1 }, }, '&.iconTwo': { ...

当最后一行的项目少于n个时如何选择网格容器

我有一个网格容器，每行中的项目数量是固定的。但物品总数未知。有没有办法仅在少于 7 个项目时才选择网格容器...

使用 CSS 定位 h2 之后的所有 p 元素

如何定位标题后面的所有 p 元素，例如... 历史 这是第 1 段 这是第2段 ... 如何定位标题后面的所有 p 元素，例如... <h2 class = 'history'>History</h2> <p>this is paragraph 1</p> <p>this is paragraph 2</p> <p>this is paragraph 3</p> <h2 class = 'present'>Present</h2> <p>I don't want to target this paragraph</p> <p>I don't want to target this paragraph</p> <p>I don't want to target this paragraph</p> 通过使用 .history + p 我可以定位第 1 段，但是如何定位其他段落，直到到达“当前”H2 标签？ 如果没有任何其他 p 元素，您可以使用 ~ 代替 +: .history ~ p 如果在第二个 p 之后还有更多 h2 元素，并且您只想选择 h2.history 和 h2.present 之间的元素，我认为当前的 CSS 选择器不可能做到这一点。通用兄弟选择器 ~ 匹配 p 之后的 每个 h2 兄弟，无论其中是否还有其他兄弟。 也就是说，您可以使用 jQuery 轻松完成它： $('.history').nextUntil('.present') 您将如何定位标题后每组中的最后一个 P？

为什么 .class:last-of-type 不能按我的预期工作？

为什么这不起作用？ http://jsfiddle.net/84C5W/1/ p{ 显示：无； } p.visible:last-of-type { 显示：块； } 这应该被隐藏&... 为什么这不起作用？ http://jsfiddle.net/84C5W/1/ p{ display: none; } p.visible:last-of-type { display: block; } <div> <p class="visible">This should be hidden</p> <p class="visible">This should be displayed</p> <p class="">This should be hidden</p> </div> 事实上，我的 <p> 元素都不可见。如果我在选择器中删除对 .visible 的引用，这确实会显示 div 中的最后一个 <p>，但这不是我想要的。 当然，我始终只能保留一个 .visible，但这是为了 Reveal.js 演示，我无法控制 JavaScript。 如何使用 .visible 类选择 div 中的最后一个元素？我不想为此使用 JavaScript。 您的问题是您正在阅读 :last-of-type 并认为它作为 :last-of-class 选择器工作，而实际上它具体意味着 仅元素。不幸的是，类的最后一个实例没有选择器。 来自 W3C： :last-of-type伪类表示一个元素，该元素是其类型的最后一个同级元素。 您有 p.visible:last-of-type 作为选择器，它执行以下操作： 查看 HTML 中每个包含元素中的每个元素列表（例如 1 个或多个元素；没有兄弟姐妹的子元素仍可以应用 :last-of-type） 找到列表中的最后一个元素 检查它是否是一个 <p> 元素 检查它是否有 .visible 类。 简而言之，您的选择器只会将其样式应用于也具有 类 <p> 的 .visible 。在您的标记中，只有前两个 <p> 元素具有该类；第三个没有。 这里有不同风格的demo来说明： p:last-of-type { /* this will be applied in the third paragraph because the pseudo-selector checks for nodes only */ color: green; } p.visible:last-of-type { /* this does not get applied, because you are using the pseudo-selector with a specific class in addition to the node type. */ color: red; } <p class="visible">First paragraph.</p> <p class="visible">Second paragraph.</p> <p>Third paragraph.</p> 根据您的最终目标， 如何选择 div 中带有 .visible 类的最后一个元素？我不想为此使用 JavaScript。 最简单且最高效的方法是反转您尝试应用样式的方式；而不是尝试隐藏三个 div 中的两个，其中要隐藏的 div 之一具有类，而要隐藏的另一个 div 没有类，并且要显示的 div 与要隐藏的 div 共享相同的类其中 also 有一个类（看到了吗？这很令人困惑），请执行以下操作： 仅将类添加到较小的元素（或元素组）。 将元素的默认样式设置为您不希望类实现的样式。 将类的样式设置为您想要实现的效果。 p { display: none; } .visible { display: block; } <div> <p>This should be hidden</p> <p class="visible">This should be displayed</p> <p>This should be hidden</p> </div> 正如您从这个演示中看到的，不仅您的 HTML 和 CSS 更简单，而且还具有仅使用类选择器而不是 *-of-type 伪选择器的好处，这将使页面加载速度更快（查看更多就在下面）。 为什么没有后面跟着或父选择器？ 通过动态更改页面上的一个类名，可能会降低许多网页的速度。 Dave Hyatt 在 2008 年致力于 WebKit 实现时，提到了避免这些实现的一些原因： 使用父选择器，很容易意外导致 文档范围内的卑躬屈膝。人们可能并且将会滥用这个选择器。 支持它就是给人们一大堆绳子来吊死自己 与. CSS3 选择器的可悲事实是它们真的不应该 如果您关心页面性能，则完全可以使用。装饰你的标记 与类和 ID 并纯粹匹配这些，同时避免所有 使用兄弟、后代和子选择器实际上会产生 页面在所有浏览器中的表现明显更好。 问题是:last-of-type只匹配元素选择器。在您的示例中，您尝试匹配 class 选择器。这就是为什么它不起作用。 示例：http://dabblet.com/gist/4144885 定位倒数第二个标签。 .visible:nth-last-of-type(2) {} 为了将来参考，这将在 CSS level 4 中介绍：https://www.w3.org/TR/selectors4/#the-nth-last-match-pseudo 在撰写本文时，浏览器支持还不存在：http://css4-selectors.com/selector/css4/structural-pseudo-class/ 准备好后，这应该就是解决方案： p { display : none; } p.visible:nth-last-match(0) { display : block; } <div> <p class="visible">This should be hidden</p> <p class="visible">This should be displayed</p> <p class="">This should be hidden</p> </div> 这是我解决非类问题的方法 - 不幸的是，这是一个 Javascript 解决方案： function lastOfType(className){ var allElemsOfType = document.getElementsByClassName(className); if (!allElemsOfType || !allElemsOfType.length) return null; else return allElemsOfType[allElemsOfType.length - 1]; } lastOfType('visible').style.display = 'block' .visible { display: none; } p { display: none; } <p class='visible'>1</p> <p class='visible'>2</p> <p>3</p> 由于 :has() 在本文发布时现已可用，因此这实际上是可能的，尽管性能成本未知。 您可以通过检查某个元素是否没有任何匹配的后续兄弟元素来做到这一点 p{ display: none; } p.visible:not(:has(~.visible)) { display: block; }

如何在CSS中仅选择可见的偶数或奇数元素？

或者，如何仅在可见元素中交替颜色？或者，仅对那些未隐藏的？我尝试过这个，但是没有用，因为 nth-of-type 考虑了所有孩子，甚至是那些有 .hidden cl 的孩子...

使用带有::before的CSS选择器进行抓取不显示文本

我正在尝试使用 scrapy 从这个 eBay 列表中删除周一上午 9:30 的内容。 来自 scrapy shell scrapy shell https://www.ebay.com/itm/145599690533?： >>> response.css('span.ux-timer__time-left::

不确定如何在 CSS 网格中使用第 n 个选择器，因为每当我向其中添加一些内容时，它似乎都会更改所有元素

正如标题所说。每当我使用 nth:child (1) 仅选择一个元素时，它似乎会选择所有元素，并且我对其应用的任何更改都会将其应用于所有元素。 。网格 {

有没有办法将一些CSS选择器组与优先逻辑（组与组）结合起来？

我觉得这是一个奇怪的问题，我什至都不知道如何写。 好吧，我必须使用 querySelectorAll() 过滤一大堆元素。我需要，但真的不知道是不是

为什么当我为轮播添加样式时我的菜单消失了？

我尝试创建两个 CSS 文件，但它不起作用。我在下面加入了我的代码、HTML、标题 CSS 和 Carousel CSS 以及 javascript，以创建响应式标题。 从我发送的屏幕截图可以...

如何隐藏 <ul> 标签而无需仅使用 CSS 修改 HTML

我对以下 HTML 有疑问：如何隐藏 标签而不必仅使用 CSS 修改 HTML？ .principal 输入[type="checkbox"]:not(:checked)+#menuPrincipal { 我对以下 HTML 有疑问：如何隐藏 <ul> 标签，而不必仅使用 CSS 修改 HTML？ .principal input[type="checkbox"]:not(:checked)+#menuPrincipal { overflow: hidden; height: 0px; } .principal input[type="checkbox"]:checked+#menuPrincipal { transition: height 0.6s ease; height: 100vh; overflow: auto; } <header> <nav class="principal"> <input type="checkbox" name="menuCheck" id="menuCheck"> <label for="menuCheck" aria-role="button"></label> <ul id="menuPrincipal"> <li><a href="">enlace 1</a></li> <li><a href="">enlace 2</a></li> <li> <input type="checkbox" name="submenuCheck" id="submenuCheck"> <label for="submenuCheck" aria-role="button">enlace 3</label> <ul> <li><a href="">Sub Enlace 1</a></li> <li><a href="">Sub Enlace 2</a></li> </ul> </li> </ul> </nav> </header> 由于它不是直接下一个兄弟，因此您必须使用波形符 ~ 而不是加号，否则您必须删除 input 和 ul 之间的标签 我还将您的转换移至ul，以便它可以双向转换，而不仅仅是在从选中状态变为未选中状态时进行转换。 #menuPrincipal { transition: height 0.6s ease; } .principal input[type="checkbox"]:not(:checked)~#menuPrincipal { overflow: hidden; height: 0px; } .principal input[type="checkbox"]:checked~#menuPrincipal { height: 100vh; overflow: auto; } <header> <nav class="principal"> <input type="checkbox" name="menuCheck" id="menuCheck"> <label for="menuCheck" aria-role="button"></label> <ul id="menuPrincipal"> <li><a href="">enlace 1</a></li> <li><a href="">enlace 2</a></li> <li> <input type="checkbox" name="submenuCheck" id="submenuCheck"> <label for="submenuCheck" aria-role="button">enlace 3</label> <ul> <li><a href="">Sub Enlace 1</a></li> <li><a href="">Sub Enlace 2</a></li> </ul> </li> </ul> </nav> </header>

我创建了一个网站菜单，并尝试创建一个轮播，当我使用 CSS 设置轮播样式时，菜单消失了？我需要一些帮助谢谢

我尝试创建两个 CSS 文件，但它不起作用。我在下面加入了我的代码、HTML、标题 CSS 和 Carousel CSS 以及 javascript，以创建响应式标题。 从我发送的屏幕截图可以...

如何从 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); }