:在Nokogiri有CSS伪类
在Nokogiri中，CSS伪类是指在CSS选择器中使用的特殊关键字，用于选择特定的元素。在Nokogiri中，可以使用CSS选择器来查找和操作HTML或XML文档中的元素。
以下是一些常见的CSS伪类：
:first-child：选择一个元素的第一个子元素。:last-child：选择一个元素的最后一个子元素。:nth-child(n)：选择一个元素的第n个子元素。:first-of-type：选择一个元素的第一个同类型元素。:last-of-type：选择一个元素的最后一个同类型元素。:nth-of-type(n)：选择一个元素的第n个同类型元素。:not(selector)：选择不符合指定选择器的元素。:empty：选择没有子元素或文本内容的元素。:root：选择文档根元素。:contains(text)：选择包含指定文本内容的元素。
以下是一些使用CSS伪类的示例：
# 选择第一个子元素
doc.css('div:first-child')
# 选择最后一个子元素
doc.css('div:last-child')
# 选择第二个子元素
doc.css('div:nth-child(2)')
# 选择第一个同类型元素
doc.css('div:first-of-type')
# 选择最后一个同类型元素
doc.css('div:last-of-type')
# 选择第二个同类型元素
doc.css('div:nth-of-type(2)')
# 选择不是p元素的子元素
doc.css('div:not(p)')
# 选择没有子元素或文本内容的元素
doc.css('div:empty')
# 选择文档根元素
doc.css(':root')
# 选择包含指定文本内容的元素
doc.css('div:contains("Hello")')需要注意的是，Nokogiri中的CSS伪类选择器与CSS标准中的伪类选择器可能存在一些差异，因此在使用时需要注意。
相关·内容
我有下面的代码，我只想选择一个元素的first child，这个元素是first child，以蓝色显示，最后一个子元素是fourth child，显示为红色。
然而，大孩子也是这样选择的，第二个孩子的孩子。第一个孩子是蓝色的，其他的是红色的。有没有办法我只能选择孩子而不包括孙子。
如果有什么不清楚的地方，请在下面评论一下，我会尽快回复。
提前谢谢。
.parent > ul > li > ul
{
display:none;
}
.has_children:hover > ul
{
display:block;
}
.parent > ul :fir
浏览 6提问于2015-11-16得票数 0
回答已采纳
3回答
如何为下面的html选择第一个跨度、第二个跨度或最后一个跨度？
<div>
<b>Text<b/>
<span></span>
<span></span>
<span></span>
</div>
如何选择给定集合中的第n个元素？
浏览 1提问于2019-04-19得票数 1
回答已采纳
我不知道element:first-child和element:first-of-type有什么区别
例如，您有一个div
div:first-child
所有作为父元素的第一个子元素的<div>元素都是→。
div:first-of-type
所有<div>元素都是其父元素的第一个<div>元素。
这似乎是完全一样的事情，但它们的工作方式不同。
谁能解释一下吗？
浏览 7提问于2014-07-09得票数 159
回答已采纳
我在HTML5 <article>标签上使用了一些CSS2和CSS3选择器，但它们中的一些(但不是全部)并没有像我预期的那样工作。
下面是一个可运行的示例：
/* Working as expected: */
div.wrapper p:first-child { color: red; }
div.wrapper p:nth-child(even) { color: fuchsia; }
/* NOT working as expected: */
div.wrapper article:nth-child(1) { color: blue; }
div.wrapper
浏览 5提问于2011-06-07得票数 7
回答已采纳
我对css中的第n个子选择器很好奇。但现在我很难理解它的逻辑。下面给出的例子突出显示了第一个和最后一个跨度。
<div>
<span>This span is limed!</span>
<span>This span is not. :(</span>
<em>This one is odd. </em>
<span>Sadly, this one is not...</span>
<span>But this one is!</span>
</div&g
浏览 3提问于2013-10-20得票数 6
回答已采纳
如何指定整个文档的:first-of-type？
我想要样式的第一个<p>的HTML，无论它在哪里(我不想写section p:first-of-type，因为它可能位于另一个HTML的其他地方)。
p {
background:red;
}
p:first-of-type {
background:pink;
}
p:last-of-type {
background:yellow;
}
<body>
<section>
<p>111</p>
<p>222</p>
浏览 0提问于2014-12-17得票数 12
我尝试过几次，每次都会发生这样的情况:当我使用:last-child选择器时，它只选择文档的最后一个子元素，而:first-child选择器则选择文档的第一个子元素all。有人能解释一下为什么吗？
示例：
：第一个孩子
<style>
p:first-child {background: pink;}
</style>
<body>
<p> This is the first child of the body so the background color is pink </p>
<p> This is some te
浏览 6提问于2012-11-17得票数 0
我正在使用:first-child和:last-child伪选择器选择特定的div，但:first-child在我签入的任何浏览器中都不起作用。
我查看了caniuse.com和css-tricks.com，一致认为:first-child得到了广泛的支持，所以我想可能有一些我不知道的bug。我在本地节点服务器上运行应用程序。我已经验证了我的css和html。有没有人注意到任何可能会阻止:first-child工作的bug？
HTML
<div class="col-md-6 blurbs">
<label>NEWS</label>
&l
浏览 0提问于2013-11-13得票数 13
回答已采纳
2回答
考虑以下代码：
<h2>
Working example
</h2>
<div class="test">
<button>FirstChild (Yellow)</button>
<button>Middle</button>
<button>Middle</button>
<button>LastChild (Red)</button>
</div>
<div class="test"&g
浏览 8提问于2017-08-29得票数 2
回答已采纳
2回答
我在将嵌套的列表和其他所有东西排成一行时遇到了一点小问题。我为一个站点使用了semantic.gs网格：正如你所看到的，底部的嵌套列表没有与上面的黑线或div“幻灯片”对齐。在外部列表的左侧和右侧都有一个小间隙。通过调整浏览器窗口的大小，可以更清楚地看到问题所在。
有什么技巧或方法来处理这个问题吗？我发现我可以消除这种差距的唯一方法是使用CSS3列，但它们不能跨浏览器工作。有没有办法让它们跨浏览器工作？或者，有没有其他方法可以让列表项只留出内边距？或者我应该只使用CSS3列，并为IE做一个后备？
HTML：
<article id="memberContainer">
浏览 2提问于2012-04-22得票数 0
2回答
为什么最后一个p没有突出显示？
w3schools说：
为p元素指定背景色，它是父元素的最后一个子元素。
所以最后一个p应该被高亮显示，对吗？
<style>
div p:last-child {
background: #ff0000;
}
</style>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p&
浏览 6提问于2014-10-27得票数 3
回答已采纳
我只是注意到当在同一个元素上使用CSS :first-child和:last-child时，它们不能工作。只使用了一个。我想知道为什么会这样，在CSS中是否有解决方法？这看起来像是CSS的错误--第一个元素也可以是最后一个元素。
我在谷歌上找不到关于这个话题的任何东西。每个教程都假设至少有2个元素。
我正在寻找类似这样的东西：“第一个孩子也是最后一个孩子”选择器。它存在吗？
浏览 10提问于2012-08-23得票数 21
回答已采纳
问题
我希望将样式应用于元素的最后一个子元素，即，而不是特定类型的。
请不要混淆:最后一个元素，如果不是特定类型的。
示例
<div class="container>
<div>Child 1</div>
<div>Child 2</div>
<span>Child 3</span>
<template></template>
<span>Child 4</span>
<template></template&g
浏览 0提问于2019-06-06得票数 3
我正在尝试设计第一个和最后一个孩子的样式，在span中使用一个特定的类。在CSS中是否使用>并不重要，除非我删除第一个和最后一个DIV，否则这段代码不会工作，即使它们与我尝试面向的类无关。
为什么？
CSS：
.parent-span .cta-wrapper {background:gray;}
.parent-span:last-child > .cta-wrapper {background:red; }
.parent-span:first-child > .cta-wrapper {background:green}
HTML：
<div>xxxx
浏览 0提问于2018-02-04得票数 0
我在每个<option>上使用以下函数来确定它是否被选中：
var _matches = function(el, selector) {
var fn = el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector;
return fn.call(el, selector);
};
在jsdom中，它在NodeJS中工作得很好，它适用于浏览器中的选择器:checked
浏览 5提问于2015-05-07得票数 3
回答已采纳
很明显，第n个孩子的伪品在桌子上和tds或trs一起工作得很好。但是span标签呢？
HTML:
<div id="refals_wr" style="font: normal 14px Verdana, Geneva, sans-serif; border-top: 2px dashed #CCC;">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
浏览 3提问于2014-08-28得票数 4
回答已采纳
<!-- HTML -->
<section class="row slide">
<div class="span4">
<h1>
<span>Some</span>
<br />
<span>Title</span>
</h1>
</div>
</section>
<section clas
浏览 0提问于2012-07-04得票数 2
回答已采纳
3回答
你好，我是selenium的新手，我有一个关于如何使用selenium定位特定元素的问题。
我的HTML如下所示：
<div id="locator">
<table class = "table-1">
</table>
<div class="something else">
</div>
<table class = "table-1">
<tbody>
<tr>
<th>...</t
浏览 3提问于2014-03-04得票数 0
4回答
看起来CSS伪类:last-child不工作在表单元素上，但是:first-child工作。
form:first-child {
border: 1px solid blue;
}
form:last-child {
border: 1px solid red;
}
<body>
<form>
<p>First Form</p>
</form>
<form>
<p>Second Form</p>
</form>
</body>
浏览 0提问于2017-11-27得票数 0
回答已采纳
我有这样的HTML结构：
<section id="main-content" class="photo-grid">
<h2>Photos</h2>
<div class="col-1-4">
<a href="#">
<p>File 503</p>
<img src="#" />
<
浏览 1提问于2014-05-16得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
