css 样式不适用于 aspx，但适用于 html答案

【问题标题】：css style not working on aspx but working on htmlcss 样式不适用于 aspx，但适用于 html
【发布时间】：2021-07-30 07:06:07
【问题描述】：

为什么当我使用 html 编码并在我选择单选按钮时保持选中状态时这个 css 有效，但在我使用 aspx 时却没有

.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #80D2DA;
  border-color: #80D2DA;
}

aspx 代码

<div class="col-lg-4 col-6 pt-lg-0 pt-2">
                  <asp:RadioButton ID="RadioButton1" runat="server" class="btn-check"  GroupName="Testing" Text="1"  />
                   <label class="btn btn-secondary w-100 p-lg-3 p-3" for="RadioButton1">above 37&deg;C</label>
                </div>

【问题讨论】：

尝试 CssClass 作为属性而不是普通类
效果不佳
在到达浏览器时检查生成的 html，这是您和 css 所期望的吗？
是的，但我希望单选按钮变暗，就像它被按下一样，但是当我在 asp 中使用时它不起作用，但当我在 html 中编码时它起作用

标签： html asp.net

【解决方案1】：

嗯，那些按钮类看起来是引导类的——因此我建议您采用母版页，然后所有页面都包含引导格式和类。

正如我之前所说 - 你最好使用单选按钮列表。这里的原因很多 - 如果您使用 RadioButton 列表，那么您可以使用后面的代码非常轻松地设置该单选按钮列表，如果您有 2 或 15 个选项，那么后面的代码变得非常简单。

因此，我会确保正确包含引导项，因此您不必尝试按原样进行格式化。

但是，您可以而且应该能够让这个工作：

      <style>
            .btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
              color: #fff;
              background-color: #80D2DA;
              border-color: #80D2DA;
            }
        </style>

        <div class="col-lg-4 col-6 pt-lg-0 pt-2">
              <asp:RadioButton ID="RadioButton1" runat="server" class="btn-check"  GroupName="Testing" Text="1"  />
               <label class="btn btn-secondary w-100 p-lg-3 p-3" for="RadioButton1">above 37&deg;C</label>
            </div>

上面的结果是：

如果我点击它，我会得到这个：

但是，您可以而且应该提供至少多一点的标记。

如前所述，单选按钮列表要好得多，并且可以帮助您摆脱世界贫困。

因此，正如建议的那样，这要好得多：

        <asp:RadioButtonList ID="RadioButtonList1" runat="server" cssclass="MyRadio">
            <asp:ListItem Value="1">below 36&deg;C</asp:ListItem>
            <asp:ListItem Value="2">36&deg;C - 37&deg;C</asp:ListItem>
            <asp:ListItem Value="3">above 37&deg;C</asp:ListItem>
        </asp:RadioButtonList>

上面给出了这个：

不仅上面相当干净，那么在后面的代码中，你可以这样做：

    Debug.Print("Index selected = " & RadioButtonList1.SelectedIndex)
    Debug.Print("Value of Radio select = " & RadioButtonList1.SelectedValue)
    Debug.Print("Text of Radio select = " & RadioButtonList1.SelectedItem.Text)

输出：（比如先选择）

Index selected = 0
Value of Radio select = 1
Text of Radio select = below 36°C

以上也意味着你可以在后面的代码中设置值。

因此您不必“创建组”，也不必单独删除或创建每个按钮。更好的是，您甚至可以从表格中驱动单选按钮的列表 - 总而言之，您会发现这种方法标记较少，使用后面的代码效果更好（您可以获得索引值，“值”，或上面的文本 - 甚至更好的是，您可以在代码中简单地设置该单选按钮列表的值或索引 - 再一次，您只需处理一个不错的简单控件。

但是，如果你要折腾一种风格——那么上面的风格应该可以工作，但如前所述，那些 btn 类确实看起来像引导程序——所以假设你在每个页面中都包含引导程序，它们应该可以工作（并且因此无需为按钮添加该样式）。

【讨论】：