CSS 选择器，它接受所有 label.control-label，除了带有 class.floating-labels 的表单

Question

我有这段代码：

label.control-label{
    font-weight: bold;
}
label.control-label::after{
    content: ":";
}

这使得 Bootswatch Paper's labels for input bold and adds : after label, and it works very well. Then I found a way to create floating label: Paper description and example of floating labels 并且为了防止其他形式的行为改变，我将 class .floating-labels 添加到其中一个形式并创建了这个 CSS:

/* Based on Ryan Walters solution http://jsfiddle.net/RyanWalters/z9ymd852/ 

*/

/* --- material floating label --- */

form.floating-labels .form-group {
    display: flex;
    height: 55px;
}

form.floating-labels .control-label {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.4;
    pointer-events: none;
    position: absolute;
    transform: translate3d(0, 22px, 0) scale(1);
    transform-origin: left top;
    transition: 240ms;
}

form.floating-labels .form-group.focused .control-label {
    opacity: 1;
    transform: scale(0.75);
}

form.floating-labels .form-control {
    align-self: flex-end;
}

form.floating-labels .form-control::-webkit-input-placeholder {
    color: transparent;
    transition: 240ms;
}

form.floating-labels .form-control:focus::-webkit-input-placeholder {
    transition: none;
}

form.floating-labels .form-group.focused .form-control::-webkit-input-placeholder {
    color: #bbb;
}

它也可以工作，并且不会弄乱没有 .floating-labels class 的表格，除了一个错误 - : 也被添加到浮动标签中，看起来有点诡异的。所以我想创建 CSS 选择器，它接受所有 label.control-label 而没有分配在 form 和 class.floating-labels 中的这些。我创建了这个 CSS，但解决方案是 不起作用 :

label.control-label:not(form.floating-labels label.control-label){
    font-weight: bold;
}
label.control-label:not(form.floating-labels label.control-label)::after {
    content: ":";
}

如果有人帮助我实现 CSS 选择器，我将非常高兴，它将占用所有 label.control-label 除了 form 和 class .floating-labels - 先感谢您。代码片段：

label.control-label:not(form.floating-labels label.control-label){
  font-weight: bold;
}

label.control-label:not(form.floating-labels label.control-label)::after{
  content: ":";
}

<form>
  <label class='control-label'>Should has ':' and be bold</label>
    <input>
 </form>
<form class='floating-labels'>
  <label class='control-label'>Should NOT be bold</label>
    <input>
 </form>

解决方案，基于@Diego López 的回答：

form:not(.floating-labels) label.control-label{
    font-weight: bold;
}
form:not(.floating-labels) label.control-label::after{
    content: ":";
}

Answer 1

尝试将 > 选择器与您已经在使用的 :not()

form:not(.floating-labels) > label.control-label{
  font-weight: bold;
}

form:not(.floating-labels) > label.control-label::after{
  content: ":";
}

Answer 2

您需要使用以下CSS来完成。

form.floating-labels label.control-label {
    font-weight: normal;
}
form.floating-labels label.control-label::after {
    content:"";
}

下面是一个工作片段。

label.control-label {
  font-weight: bold;
}
label.control-label::after {
  content: ":";
}
form.floating-labels label.control-label {
  font-weight: normal;
}
form.floating-labels label.control-label::after {
  content: "";
}

<form>
  <label class='control-label'>Should has ':' and be bold</label>
  <input>
</form>
<form class='floating-labels'>
  <label class='control-label'>Should NOT be bold</label>
  <input>
</form>

CSS 选择器，它接受所有 label.control-label，除了带有 class.floating-labels 的表单

CSS selector which takes all label.control-label except from form with class .floating-labels

html

css

twitter-bootstrap

twitter-bootstrap-3