reactjs Tailwind:如何定位div子元素的最后一个ul?

mmvthczy  于 2023-11-18  发布在  React
关注(0)|答案(1)|浏览(283)

我有一个<div>,它有一个间接的ul作为孩子的列表:

  1. <div class="bg-white">
  2. <div> // 1st child block
  3. <nav>
  4. <ul>
  5. </ul>
  6. </nav>
  7. </div>
  8. <div> // 2nd child block
  9. <nav>
  10. <ul>
  11. </ul>
  12. </nav>
  13. </div>
  14. ... // 5 blocks in total
  15. </div>

字符串
在Tailwind中,如何只针对最后一个子块的ul,我尝试了[&_ul:nth-child(5)]:right-0[&_ul:last]:right-0[&_ul]:last:right-0,没有一个工作。

axr492tv

axr492tv1#

在Tailwind CSS中,你不能仅仅使用伪类直接指向特定子块的最后一个<ul>。但是,你可以通过使用自定义类或更特定的选择器来应用样式。

  1. <div class="bg-white">
  2. <div> <!-- 1st child block -->
  3. <nav>
  4. <ul>
  5. <!-- List items -->
  6. </ul>
  7. </nav>
  8. </div>
  9. <div> <!-- 2nd child block -->
  10. <nav>
  11. <ul>
  12. <!-- List items -->
  13. </ul>
  14. </nav>
  15. </div>
  16. <!-- ... 5 blocks in total -->
  17. <div class="relative"> <!-- Targeting the last child block -->
  18. <nav>
  19. <ul class="absolute right-0">
  20. <!-- List items -->
  21. </ul>
  22. </nav>
  23. </div>
  24. </div>

字符串
在这种情况下,通过将relative类添加到最后一个子块,它允许其中的<ul>绝对位于该块的右侧。
或者,如果你不能修改HTML结构,需要一个纯CSS解决方案,你可以通过JavaScript或服务器端渲染来使用内联样式或额外的类,以特定的<ul>为目标,使用Tailwind类。例如,使用JavaScript:

  1. // Using JavaScript to add a Tailwind class to the last <ul> element
  2. const lastUl = document.querySelector('.bg-white > div:last-child ul');
  3. lastUl.classList.add('right-0');


请记住根据实际的HTML结构相应地调整选择器,以确保正确的目标。

展开查看全部

相关问题