带有 CSS 选择器的标签内第一个跨度后的冒号答案

【问题标题】：Colon after first span inside label with CSS selectors带有 CSS 选择器的标签内第一个跨度后的冒号
【发布时间】：2016-12-09 16:00:15
【问题描述】：

使用::after CSS pseudo-element，我在<label> 中的<span> 之后添加冒号，.control-label 类来自Bootstrap：

label.control-label > span::after {
  content: ":"
}

<label for="notRequiredInput" class="control-label">
    <span>Not required input</span>
</label>

但是，当需要<input> 时，我必须使用无法删除的星号来处理这个标记（至少在一段时间内我无法修改它）：

<label for="requiredInput" class="control-label">
    <span>Required input</span> <span class="text-danger">*</span>
 </label>

然后我在星号之后还有额外的冒号。我试过了：

label.control-label::first-child::after {
  content: ":"
}

但我最终得到了意想不到的结果：我只有在星号之后才有冒号。有没有办法只在标签内的第一个跨度之后放置冒号？我包含一个涵盖我的问题的 sn-p - 提前感谢您的每一个帮助。

label.control-label > span::after {
  content: ":"
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <label for="notRequiredInput" class="control-label">
    <span>Not required input</span>
  </label>
  <input class="form-control" type="text" id="notRequiredInput">
</div>
<div class="form-group">
  <label for="requiredInput" class="control-label">
    <span>Required input</span> <span class="text-danger">*</span>
  </label>
  <input class="form-control" type="text" id="requiredInput" required>
</div>

【问题讨论】：

标签： html twitter-bootstrap css css-selectors

【解决方案1】：

有没有办法只在标签内的第一个跨度之后放置冒号？

这是您需要的选择器。

label.control-label span:first-child::after {
      content: ":"
    }

label.control-label span:first-child::after {
  content: ":"
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="notRequiredInput" class="control-label">
    <span>Not required input</span>
  </label>
  <input class="form-control" type="text" id="notRequiredInput">
</div>
<div class="form-group">
  <label for="requiredInput" class="control-label">
    <span>Required input</span>  <span class="text-danger">*</span>
  </label>
  <input class="form-control" type="text" id="requiredInput" required>
</div>

【讨论】：

很好，但我需要：Required input: *，星号前的冒号 - 也许这很奇怪，但如果我想摆脱 HTML 中硬编码的冒号，我需要这样做 - 情况是我第一个跨度后需要冒号，无论标签中有多少跨度:)
为您修复了它...但是没有理由从 HTML 中实际删除冒号...这没有什么问题。
它看起来和我的模型一模一样，非常感谢！ :)
是的，可以有冒号 - 但我的表格很大，我经常忘记添加它，我的 CEO 对此不满意 :) 当然，其中一种解决方案是自定义表格像<my-text-field></my-text-field>这样的元素指令，它关心所有form-group，但几天之内项目就投入生产，被认为风险太大。

【解决方案2】：

为什么不把冒号放在<label> 元素上？

label.control-label::after {
  content: ":"
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <label for="notRequiredInput" class="control-label">
    <span>Not required input</span>
  </label>
  <input class="form-control" type="text" id="notRequiredInput">
</div>
<div class="form-group">
  <label for="requiredInput" class="control-label">
    <span>Required input</span> <span class="text-danger">*</span>
  </label>
  <input class="form-control" type="text" id="requiredInput" required>
</div>

【讨论】：

没关系，但不幸的是在模型中我有Required input: *，第一个跨度后我需要冒号，无论标签中有多少跨度。

【解决方案3】：

在这种情况下你可以使用伪类:not

label.control-label > span:not(.text-danger)::after {
  content: ":"
}

JSFiddle-example

【讨论】：

【解决方案4】：

label.control-label > span::after {
  content: ":"
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <label for="notRequiredInput" class="control-label">
    <span>Not required input</span>
  </label>
  <input class="form-control" type="text" id="notRequiredInput">
</div>
<div class="form-group">
  <label for="requiredInput" class="control-label">
    <span>Required input</span> <span class="text-danger">*</span>
  </label>
  <input class="form-control" type="text" id="requiredInput" required>
</div>

【讨论】：