如何应用css输入最后一个子项

本文关键字：输入 最后一个 css 何应用 应用 | 更新日期: 2023-09-27 18:20:18

如果我的帖子重复，很抱歉。我找不到解决问题的办法。我有div标签包括2个ASPXButton。它在运行代码时呈现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;
}

那么我的代码出了什么问题？

如何应用css输入最后一个子项

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

尝试这个

<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>

在第二个div中再添加一个CssClass，例如

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

然后在css 中添加

.newClass
{
//your code
}

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

input[type="checkbox"]:last-child {margin-left:20px;}
input[type="radio"]:last-of-type:checked:after{background-color:#000;}

请关注:last-of-type

相关文章：