checkbox:checked可控制图文但无法作用于label按钮的问题排查

我用checkbox:checked实现名片的图片与文本切换，目前图片和文本的样式切换正常，但label按钮的rotate(135deg)样式始终不生效，以下是对应的代码，求排查原因：

HTML/PHP代码 #

<input class="adg-team-wrapper-check" type="checkbox" name="" id="<?php echo esc_attr( $team_slug ) . '-check'; ?>">
<div class="adg-team-wrapper-content">
  <?php
  if ( $team_pic && is_array( $team_pic ) ) :
    echo sprintf(
      '<img id="%1$s" class="adg-team-wrapper-image w-100 h-100" src="%2$s" alt="%3$s" title="%4$s">',
      esc_html( $team_slug . '-pic' ),
      esc_attr( $team_pic['url'] ),
      esc_attr( $team_pic['alt'] ),
      esc_attr( $team_pic['title'] )
    );
  endif;
  echo '<div class="adg-team-wrapper-text">' . wp_kses_post( $team_description ) . '</div>'             
  ?>
</div>
<?php 
echo sprintf( '<h4 id="%1$s" class="adg-team-wrapper-title adg-txt-gold">%2$s</h4>', 
  $team_slug . '-name',
  $team_name 
); 
?>
  
<p class="adg-team-wrapper-extract"><?php echo esc_html( $team_role ); ?></p>
<label class="adg-team-wrapper-label" for="<?php echo esc_attr( $team_slug ) . '-check'; ?>">
  <i class="fa-solid fa-plus"></i>
</label>

SCSS代码 #

&:checked {
    + .adg-team-wrapper-content {
      > .adg-team-wrapper-image {
      width: 0% !important;
      opacity: 0;
      visibility: hidden;
    }

    .adg-team-wrapper-text {
      width: 100%;
      opacity: 1;
      visibility: visible;
    }
          
    .adg-team-wrapper-label {
      transform: rotate(135deg);
    }
  }
}

问题原因及修复方案 #

1. 核心问题：选择器层级错误 #

你的SCSS把.adg-team-wrapper-label的样式嵌套在+ .adg-team-wrapper-content内部，但从HTML结构来看，label是checkbox的同级元素，并非.adg-team-wrapper-content的子元素，导致选择器无法匹配到目标label。

2. 修复后的SCSS代码 #

将label的样式移到+ .adg-team-wrapper-content外部，使用通用兄弟选择器~匹配checkbox后续的同级label：

&:checked {
  + .adg-team-wrapper-content {
    > .adg-team-wrapper-image {
      width: 0% !important;
      opacity: 0;
      visibility: hidden;
    }

    .adg-team-wrapper-text {
      width: 100%;
      opacity: 1;
      visibility: visible;
    }
  }

  // 匹配checkbox之后的同级label元素
  ~ .adg-team-wrapper-label {
    transform: rotate(135deg);
  }
}

3. 额外排查点 #

如果修复后仍不生效，检查label的基础样式：行内元素默认不支持transform属性，需设置块级或行内块级显示：

.adg-team-wrapper-label {
  display: inline-block; // 或 block
  transition: transform 0.3s ease; // 可选：添加过渡动画让切换更流畅
}

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