带类的元素内的最后一个带类的元素的 CSS 选择器

Posted 2023-03-06

【中文标题】带类的元素内的最后一个带类的元素的 CSS 选择器

【英文标题】：CSS Selector For Last Element With Class Within Element With Class

【发布时间】：2020-01-21 08:52:53

【问题描述】：

我正在使用引导程序，并将我的输入放在他们自己的 .form-group 中。我所有的输入也都包含在一个带有 .well 类的 div 中。

我想删除引导程序为.form-group 设置的默认margin-bottom:15px，但前提是它的父级.well div 中的.form-group 的最后一个实例。

<div class="well">
<div class="form-group">
    <div class="col-md-6">
        <div class="form-group">
            <label class="m-b-none">Name</label>
            <div class="input-group">
                <input class="form-control" name="Name">
                <div class="input-group-addon"><i class="fa fa-check-circle"></i></div>
            </div>
        </div>
        <div class="form-group">
            <label class="m-b-none">Surname</label>
            <div class="input-group">
                <input class="form-control" name="Surname">
                <div class="input-group-addon"><i class="fa fa-check-circle"></i></div>
            </div>
        </div>
    </div>
</div>

所以我想在每个具有 well 类的元素中将最后一个 form-group 上的 margin-bottom 设置为 0px。

我尝试了下面的代码，但它只是将样式应用于所有 .form-groups

.well .form-group:last-of-type 
    margin-bottom: 0!important;

.well .form-group:last-of-type 
    margin-bottom: 0 !important;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
  <div class="form-group">
    <input/>
  </div>
  <div class="form-group">
    <input/>
  </div>
</div>
<div class="well">
  <div class="form-group">
    <input/>
  </div>
  <div class="form-group">
    <input/>
  </div>
</div>

【问题讨论】：

您的代码似乎有效。可以发minimal reproducible example吗？

我正在抓取代码的精确副本，我想我可以看到它为什么不起作用。所有输入都包装在自己的表单组中，因此选择器会将其视为最后一个类型。

【参考方案1】：

解决方案是为此使用引导程序。 mb-0 是一个引导实用程序类，用于将 margin-bottom 设置为 0。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
   <div class="form-group">
     <input/>
   </div>
   <div class="mb-0 form-group">
     <input/>
   </div>
</div>
<div class="well">
   <div class="form-group">
     <input/>
   </div>
   <div class="mb-0 form-group">
     <input/>
   </div>
</div>

更多关于mb-0：What is class=“mb-0” in Bootstrap 4?

【讨论】：

我知道我可以做到这一点，但我不想检查到目前为止我添加的每个输入并添加那个类。我只想使用一个 CSS 选择器来捕获整个项目。

这样做你会面临一连串的问题。养成编写函数式 CSS 的习惯：rangle.io/blog/styling-with-functional-css

【参考方案2】：

我尝试的 CSS 选择器确实有效。 html 是使用一些 C# 扩展方法生成的，我没有意识到所有输入都被包装在 .form-group div 中。 CSS 选择器会将其视为last-of-type 的.well。一旦我删除了这个 div，选择器就起作用了。

.well .form-group:last-of-type 
    margin-bottom: 0!important;

【参考方案3】：

如果您不想添加类，也可以直接使用:last-child 选择器进行此操作。

.well .form-group:last-child 
     margin-bottom: 0!important;

【参考方案4】：

您可以使用> 指定.well 类型为div 的下一个子级

.well > div.form-group:last-child margin-bottom: 0 !important;