如何用Sass选择页面最后一个渲染的.print按钮并设为黄色？

要实现这个需求，核心是精准定位到页面中最后一个出现的.print按钮——不管它位于哪个<p>标签内，也不管<p>里包含几个该按钮。可以借助CSS的:has()、:last-of-type与:last-child选择器结合实现，用Sass书写的代码如下：

// 定位最后一个包含.print按钮的p标签，再选中其中最后一个.print按钮
p:has(.print):last-of-type .print:last-child {
  background-color: yellow;
  // 可按需添加其他样式
  color: #333;
  border: none;
}

选择器逻辑说明： #

1. p:has(.print)：筛选出所有包含.print元素的<p>标签，直接排除没有按钮的p容器。
2. :last-of-type：在上述筛选出的p标签中，选取页面里最后一个出现的那个p（也就是最后一个包含.print按钮的容器）。
3. .print:last-child：选中这个目标p标签里的最后一个.print元素，确保即使该p内有多个按钮，也只修改最后一个。

特殊情况兼容： #

• 若某个<p>里存在多个.print按钮，该选择器会自动选中这个p内的最后一个（同时也是整个页面的最后一个.print按钮）。
• 若所有<p>都没有.print按钮，该选择器不会生效，避免生成无效样式。
• 若需要更精准匹配按钮元素，可把.print替换为button.print，确保只选中按钮类型的.print元素：

p:has(button.print):last-of-type button.print:last-child {
  background-color: yellow;
}

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