如何应用：聚焦多个相同的选择器？

Question

我试图在输入类型数字聚焦时更改底部边框颜色。我部分成功了，但 css 并未应用于所有选择器。问题来了：

左侧（比索）没有焦点，但它具有与 Kg 相同的选择器。这是代码：https://jsfiddle.net/snake93/nLdrcv71/1/

input[type=number] {
    color: #666;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dcdcdc !important;
    border-radius: 0px !important;
    background: #fafafa00;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff00 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: .25rem;
    border-width: 0px 0px 1px 0px !important;
    border-radius: 0px !important;
}

.form-control:focus,
.form-control:focus + span {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

.input-group-text:focus {
    background:red !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>

<div class="input-group mb-3">
  <span class="input-group-text">Peso</span>
  <input type="number" class="form-control">
  <span class="input-group-text">Kg</span>
</div>

Answer 1

选择器

.form-control:focus + span

仅影响具有

.form-control

类的元素之后的跨度。相反，您可以使用

.input-group:focus-within span

，当具有

.input-group

类的元素获得焦点时，它会将您的样式应用于子级跨度。

.form-control:focus,
.input-group:focus-within span {
    color: #00a1ff;
    background-color: #fff0;
    ...

---

编辑：我添加了完整的标记来证明该解决方案确实有效。

input[type=number] {
    color: #666;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dcdcdc !important;
    border-radius: 0px !important;
    background: #fafafa00;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff00 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: .25rem;
    border-width: 0px 0px 1px 0px !important;
    border-radius: 0px !important;
}

.form-control:focus,
.input-group:focus-within span {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

.input-group-text:focus {
    background:red !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>

<div class="input-group mb-3">
  <span class="input-group-text">Peso</span>
  <input type="number" class="form-control">
  <span class="input-group-text">Kg</span>
</div>

Answer 2

替换 HTML 元素的顺序，使“Peso”位于

<input type="number">

之后，切换到使用

~

CSS 通用同级组合器 选择所有相邻的同级，并使用 CSS

order

更改CSS 中 Flex 子项的顺序。

input[type=number] {
    color: #666;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dcdcdc !important;
    border-radius: 0px !important;
    background: #fafafa00;
}

.first-input {
    order: 1;
}

.second-input {
    order: 2;
}

.third-input {
    order: 3;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff00 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: .25rem;
    border-width: 0px 0px 1px 0px !important;
    border-radius: 0px !important;
}

.form-control:focus,
.form-control:focus ~ span {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

.input-group-text:focus {
    background:red !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>

<div class="input-group mb-3">
  <input type="number" class="second-input form-control">
  <span class="first-input input-group-text">Peso</span>
  <span class="third-input input-group-text">Kg</span>
</div>

通用兄弟组合器 (~

) 分隔两个选择器并匹配第二个元素的所有迭代，这些迭代位于第一个元素之后（尽管不一定是立即），并且是同一父元素

元素的子元素。

来源：

MDN

order

CSS 属性设置在 Flex 或网格容器中布局项目的顺序。容器中的项目按升序 order

 值排序，然后按源代码顺序排序。

来源：

MDN

---

我的解决方案受到 Paco Coursey 的博客文章

CSS Previous Sibling Selector的启发。

Answer 3

每当输入聚焦或模糊时，只需在其上切换 .focused 类即可。

你的CSS应该是这样的（刚刚在其他“+ span”后面添加了一个.focused）：

.form-control:focus, .form-control:focus + span, .focused {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

并且您必须添加以下 JavaScript 代码：

let input = document.getElementsByClassName("form-control")[0];
let firstSpan = document.getElementsByClassName("input-group-text")[0];

input.addEventListener("focus", addClass);
input.addEventListener("blur", removeClass);

function addClass() {
    firstSpan.classList.add("focused");
}

function removeClass() {
    firstSpan.classList.remove("focused");
}

这是工作小提琴：

https://jsfiddle.net/y1h8abnw/39/