-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>，但它應該是自動的。
預期的結果是標籤將移動到輸入上方並且邊框會改變其顏色。所以預期的結果基本上是兩個合併在一起的例子。
什麼原因導致這兩種效應都不起作用，我該如何解決？