-5
我有以下代码：为什么HTML元素顺序会影响CSS效果？
$(document).ready(function() {
$('.input').append('<div class="expander"></div>');
});.input {
position: relative;
height: 5.85714rem
}
.input input {
outline: 0;
width: 100%;
border: none;
background: 0 0;
border-bottom: .07143rem solid rgba(0, 0, 0, .42);
font-size: 1.14286rem;
padding-bottom: .57143rem;
position: absolute;
bottom: 1.42857rem;
}
.input input:hover+label {
color: rgba(0, 0, 0, .54)
}
.input input:active,
.input input:active:hover,
.input input:focus,
.input input:focus:hover,
.input input:hover {
border-bottom: .14286rem solid rgba(0, 0, 0, .87);
padding-bottom: .5rem
}
.input input:active+label,
.input input:focus+label {
color: #304ffe;
font-size: .85714rem;
bottom: 3.85714rem
}
.input input:active+.expander,
.input input:focus+.expander {
width: 100%;
left: 0;
height: .14286rem
}
.input label {
color: rgba(0, 0, 0, .54);
font-size: 1.14286rem;
position: absolute;
left: 0;
bottom: 2.07143rem;
font-weight: 400;
}
.input .expander {
width: 0;
background: #304ffe;
position: absolute;
height: .07143rem;
left: 50%;
bottom: 1.42857rem;
-webkit-transition: all cubic-bezier(.4, 0, .2, 1) 3s;
transition: all cubic-bezier(.4, 0, .2, 1) 3s
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="floating-input input">
<input type="text" name="name" id="name">
<label for="name">Name</label>
</div>在上面的例子中，点击输入移动标签，但边框颜色没有变化。我使用的是jQuery 3.2.1。
.input {
position: relative;
height: 5.85714rem
}
.input input {
outline: 0;
width: 100%;
border: none;
background: 0 0;
border-bottom: .07143rem solid rgba(0, 0, 0, .42);
font-size: 1.14286rem;
padding-bottom: .57143rem;
position: absolute;
bottom: 1.42857rem;
}
.input input:hover+label {
color: rgba(0, 0, 0, .54)
}
.input input:active,
.input input:active:hover,
.input input:focus,
.input input:focus:hover,
.input input:hover {
border-bottom: .14286rem solid rgba(0, 0, 0, .87);
padding-bottom: .5rem
}
.input input:active+label,
.input input:focus+label {
color: #304ffe;
font-size: .85714rem;
bottom: 3.85714rem
}
.input input:active+.expander,
.input input:focus+.expander {
width: 100%;
left: 0;
height: .14286rem
}
.input label {
color: rgba(0, 0, 0, .54);
font-size: 1.14286rem;
position: absolute;
left: 0;
bottom: 2.07143rem;
font-weight: 400;
}
.input .expander {
width: 0;
background: #304ffe;
position: absolute;
height: .07143rem;
left: 50%;
bottom: 1.42857rem;
-webkit-transition: all cubic-bezier(.4, 0, .2, 1) 1s;
transition: all cubic-bezier(.4, 0, .2, 1) 1s
}<div class="floating-input input">
<input type="text" name="name" id="name">
<div class="expander"></div>
<label for="name">Name</label>
</div>又如其中label和.expander规则，以便基本上切换。标签卡住但边框改变。这次我手动添加了<div class="expander"></div>，但它应该是自动的。
预期的结果是标签将移动到输入上方并且边框会改变其颜色。所以预期的结果基本上是两个合并在一起的例子。
什么原因导致这两种效应都不起作用，我该如何解决？