div网格中一个元素的CSS选择器[重复]答案

【问题标题】：CSS selector for one element in a grid of divs [duplicate]div网格中一个元素的CSS选择器[重复]
【发布时间】：2021-04-05 17:30:54
【问题描述】：

我想要一个 CSS 选择器，它返回 114、214 和 314 的 div。我尝试了以下方法：

$(".test div:first>div:nth-of-type(4)"));

但它只返回 114 的 div。什么选择器适用于所有三个？谢谢！

<div class = "test">
<div><div>111</div><div>112</div><div>113</div><div>114</div><div>115</div><div>116</div></div>
<div><div>121</div><div>122</div><div>123</div><div>124</div><div>125</div><div>126</div></div>
<div><div>131</div><div>132</div><div>133</div><div>134</div><div>135</div><div>136</div></div>
<div><div>141</div><div>142</div><div>143</div><div>144</div><div>145</div><div>146</div></div>
</div>
<div class = "test">
<div><div>211</div><div>212</div><div>213</div><div>214</div><div>215</div><div>216</div></div>
<div><div>221</div><div>222</div><div>223</div><div>224</div><div>225</div><div>226</div></div>
<div><div>231</div><div>232</div><div>233</div><div>234</div><div>235</div><div>236</div></div>
<div><div>241</div><div>242</div><div>243</div><div>244</div><div>245</div><div>246</div></div>
</div>
<div class = "test">
<div><div>311</div><div>312</div><div>313</div><div>314</div><div>315</div><div>316</div></div>
<div><div>321</div><div>322</div><div>323</div><div>324</div><div>325</div><div>326</div></div>
<div><div>331</div><div>332</div><div>333</div><div>334</div><div>335</div><div>336</div></div>
<div><div>341</div><div>342</div><div>343</div><div>344</div><div>345</div><div>346</div></div>
</div>

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

使用:first-child，而不是:first。

https://api.jquery.com/first-selector/

从 jQuery 3.4 开始，:first 伪类已被弃用。去掉它从您的选择器中提取并稍后使用 .first() 过滤结果。

:first 伪类等价于 :eq( 0 )。它也可能是写成:lt(1)。虽然这仅匹配单个元素， :first-child 可以匹配多个：每个父母一个。

$(".test div:first-child>div:nth-of-type(4)")

【讨论】：