AMP星级评分提交成功后隐藏星级表单的问题咨询

嘿，我明白你遇到的困扰了——AMP表单的样式逻辑有时候容易踩坑，尤其是自定义组件比如星级评分这类元素。你之前用的form.amp-form-submit-success > input没生效，大概率是选择器没命中正确的目标元素，毕竟AMP的星级评分不是普通的<input>标签，而且它可能也不是表单的直接子元素。

咱们一步步来解决这个问题：

1. 先修正CSS选择器，命中正确组件 #

AMP官方的星级评分是<amp-star-rating>自定义元素，而非你选中的<input>（内部可能生成input，但外部选择器无法直接捕获）。

假设你的表单结构大概是这样：

<form method="POST" action-xhr="/submit-rating" class="amp-form">
  <amp-star-rating name="user-rating" value="0" required></amp-star-rating>
  <button type="submit">提交评分</button>
</form>

那你需要把CSS调整为直接选中<amp-star-rating>元素：

form.amp-form-submit-success amp-star-rating {
  display: none;
}

2. 更精准控制：给组件加自定义类 #

如果星级组件被嵌套在其他容器里，或者你想避免样式冲突，可以给星级组件加个专属类：

<amp-star-rating class="rating-widget" name="user-rating" value="0" required></amp-star-rating>

然后CSS改成：

form.amp-form-submit-success .rating-widget {
  display: none;
}

3. 进阶方案：用AMP状态绑定控制显示 #

如果CSS方式还是有问题（比如AMP的样式优先级限制），可以试试更可靠的AMP状态管理方案：

首先在页面头部引入AMP状态脚本（如果还没添加）：

<script async custom-element="amp-state" src="https://cdn.ampproject.org/v0/amp-state-0.1.js"></script>

然后修改表单和星级组件：

<amp-state id="formState">
  <script type="application/json">
    {"submitted": false}
  </script>
</amp-state>

<form 
  method="POST" 
  action-xhr="/submit-rating" 
  class="amp-form"
  on="submit-success:AMP.setState({formState: {submitted: true}})"
>
  <amp-star-rating 
    name="user-rating" 
    value="0" 
    required
    hidden="formState.submitted"
  ></amp-star-rating>
  <button type="submit">提交评分</button>
</form>

这种方式通过AMP状态变量formState.submitted控制星级组件的hidden属性，提交成功后自动切换状态隐藏组件，兼容性和灵活性都更强。

最后别忘了AMP样式规则 #

所有自定义CSS必须放在<style amp-custom>标签里，AMP不允许在其他位置编写样式，这也是容易忽略的细节哦～

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