关于Tailwind CSS选择器peer-[:nth-of-type(3)_&]:block的含义及使用问题

一、选择器含义拆解 #

peer-[:nth-of-type(3)_&]:block是Tailwind的自定义peer变体，核心逻辑如下：

• peer-：基于兄弟节点中带有peer类的元素触发样式
• [:nth-of-type(3)_&]：_是空格的转义，实际对应nth-of-type(3) &，其中&代表应用该类的当前元素（即你的div）
• 最终生成的CSS选择器为：.peer:nth-of-type(3) ~ .peer-\[:nth-of-type\(3\)_&\]:block，意思是当当前元素是第3个peer类元素的后续兄弟时，为其设置display: block

二、当前HTML的问题 #

你的HTML结构中，div位于第一个peer元素之后，而第3个peer元素在div的后面。CSS的后续兄弟选择器~只能选择目标元素之后的兄弟，无法反向匹配，因此这个选择器根本不会作用到div上。此外，div默认设置了block类，即使选择器生效也看不出变化，因为本来就是显示状态。

三、修正方案 #

1. 调整HTML结构 #

将div移到第3个peer元素的后面，确保它是第3个peer的后续兄弟：

<input type="text" class="peer" placeholder="1"/>
<input type="text" class="peer" placeholder="2"/>
<input type="text" class="peer" placeholder="3"/>
<div class="hidden peer-[:nth-of-type(3)_&]:block">
  <p>fasdfasaf</p>
  <p>545235</p>
</div>

2. 关键修改点 #

• 把div放到第3个peer之后，让后续兄弟选择器~能匹配到它
• 将div的默认类从block改为hidden，这样当选择器触发时，才会从隐藏变为显示

3. 扩展：基于peer状态触发（如聚焦） #

如果需要在第3个输入框获得焦点时才显示div，可修改类为peer-[:nth-of-type(3)_&:focus]:block，此时CSS会匹配第3个peer聚焦状态下的后续兄弟div，HTML结构保持上述调整即可。

内容的提问来源于stack exchange，提问作者Acaibird