提问人：one-hand-octopus 提问时间：11/16/2023 更新时间：11/16/2023 访问量：41
顺风：如何瞄准 div 子的最后一个 ul？
Tailwind: how to target the last ul of a div's children?
问：
我有一个，它有一个间接作为子项的列表：<div>ul
<div class="bg-white">
<div> // 1st child block
<nav>
<ul>
</ul>
</nav>
</div>
<div> // 2nd child block
<nav>
<ul>
</ul>
</nav>
</div>
... // 5 blocks in total
</div>
在 Tailwind 中，如何仅针对最后一个子块，我尝试了 ， ， ， 没有奏效。ul[&_ul:nth-child(5)]:right-0[&_ul:last]:right-0[&_ul]:last:right-0
答：
5赞
hassan
11/16/2023
#1
在 Tailwind CSS 中，您不能仅使用伪类直接定位特定子块的最后一个。但是，您可以使用自定义类或更具体的选择器来应用样式。<ul>
<div class="bg-white">
<div> <!-- 1st child block -->
<nav>
<ul>
<!-- List items -->
</ul>
</nav>
</div>
<div> <!-- 2nd child block -->
<nav>
<ul>
<!-- List items -->
</ul>
</nav>
</div>
<!-- ... 5 blocks in total -->
<div class="relative"> <!-- Targeting the last child block -->
<nav>
<ul class="absolute right-0">
<!-- List items -->
</ul>
</nav>
</div>
</div>
在这种情况下，通过将类添加到最后一个子块，它允许其中的类绝对位于该块的右侧。relative<ul>
或者，如果您无法修改 HTML 结构并且需要纯 CSS 解决方案，则可以通过 JavaScript 或服务器端渲染使用内联样式或其他类来针对特定 Tailwind 类。例如，使用 JavaScript：<ul>
// Using JavaScript to add a Tailwind class to the last <ul> element
const lastUl = document.querySelector('.bg-white > div:last-child ul');
lastUl.classList.add('right-0');
请记住根据实际的 HTML 结构相应地调整选择器，以确保正确的定位。
评论
[&_div:nth-last-child(1)_ul]:right-0