如何应用css输入last-child？答案

【问题标题】：How to apply css input last-child?如何应用css输入last-child？
【发布时间】：2013-06-27 01:06:57
【问题描述】：

对不起，如果我的帖子重复。我找不到我的问题的解决方案。我有包含 2 个 ASPXButton 的 div 标签。它在运行代码时呈现 input[type="submit"] 标签。第一个输入标签工作良好，最后一个输入标签不能继承css。这是我的代码：

ASPX

<div class="loginButton">
  <div style="float:left; margin-left:-9px;">
      <input type="checkbox" id="on_off" name="remember" class="on_off_checkbox" value="1" />
      <span class="f_help">Remember me</span>
  </div>
  <div class=" pull-right" style="margin-right:-8px;">
      <div class="btn-group">
        <dx:ASPxButton AutoPostBack="false" ID="but_login" CssClass="btn" Native="true" EnableDefaultAppearance="false" runat="server" Text="Login">
        </dx:ASPxButton>
        <dx:ASPxButton ID="forgetpass" CssClass="btn" Native="true" EnableDefaultAppearance="false" runat="server" Text="Forget Pass"></dx:ASPxButton>
      </div>
  </div>
  <div class="clear"></div>
</div>

CSS

.btn-group > .btn.large:first-child {
  margin-left: 0;
  -webkit-border-bottom-left-radius: 6px;
          border-bottom-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
          border-top-left-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-topleft: 6px;
}

.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
  -webkit-border-top-right-radius: 6px;
          border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
          border-bottom-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
}

那么我的代码有什么问题？

【问题讨论】：

标签： c# html asp.net css webforms

【解决方案1】：

CSS 中的类与 Asp 代码中的类不匹配。

【讨论】：

现在您使用内联样式（这通常不好，随着时间的推移它可能会使您的代码可读性降低）。我建议您将所有样式移至 css 文件。
CssClass="btn" no large or dropdown-toggle ?
@Agares 我做了，但没有任何改变

【解决方案2】：

试试这个

<style type="text/css">
    .btn-group > .btn:first-child
    {
        margin-left: 0;
        -webkit-border-bottom-left-radius: 6px;
        border-bottom-left-radius: 6px;
        -webkit-border-top-left-radius: 6px;
        border-top-left-radius: 6px;
        -moz-border-radius-bottomleft: 6px;
        -moz-border-radius-topleft: 6px;
    }

    .btn-group > .btn:last-child
    {
        -webkit-border-top-right-radius: 6px;
        border-top-right-radius: 6px;
        -webkit-border-bottom-right-radius: 6px;
        border-bottom-right-radius: 6px;
        -moz-border-radius-topright: 6px;
        -moz-border-radius-bottomright: 6px;
    }
</style>

【讨论】：

【解决方案3】：

向第二个 div 添加一个 CssClass，例如。

<dx:ASPxButton ID="forgetpass" CssClass="btn newClass" Native="true" EnableDefaultAppearance="false" runat="server" Text="Forget Pass"></dx:ASPxButton>

然后添加css

.newClass
{
//your code
}

【讨论】：

【解决方案4】：

您可以通过 css.... 遵循这个概念。

input[type="checkbox"]:last-child {margin-left:20px;}

input[type="radio"]:last-of-type:checked:after{background-color:#000;}

请关注:last-of-type

【讨论】：