css-selectors 相关问题

如何定位标题后面的所有 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？

html css css-selectors

回答 2 投票 0

为什么 .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; }

html css css-selectors

回答 6 投票 0

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

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

css css-selectors

回答 1 投票 0

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

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

python css web-scraping scrapy css-selectors

回答 1 投票 0

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

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

css flexbox css-selectors

回答 1 投票 0

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

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

css css-selectors

回答 1 投票 0

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

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

javascript html css-selectors carousel response-headers

回答 2 投票 0

如何隐藏 <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>

html css css-selectors

回答 1 投票 0

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

javascript html css-selectors carousel response-headers

回答 1 投票 0

如何从 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"'

web-scraping xpath scrapy css-selectors

回答 1 投票 0

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

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

selenium-webdriver xpath css-selectors

回答 1 投票 0

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

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

html css flexbox css-selectors tailwind-css

回答 1 投票 0

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

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

css css-selectors web-component

回答 1 投票 0

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

css css-selectors pseudo-class

回答 1 投票 0

css-selectors 相关问题

最新问题