:focus 是否像 :hover 那样具有特异性？

Question

这是我的问题。我希望拥有一个图标（搜索图标、日历图标等）的input-group-addon 通过特异性继承其输入字段的悬停、焦点和活动状态。我让它为悬停工作，但由于某种原因，特异性忽略了焦点状态。我认为这是我的代码中的一个冲突的 css 指令，但我在 CODEPEN 中隔离了这个问题，它也在那里。

总之，我希望输入组插件边框在我关注它（选项卡或单击）时与其输入字段无缝更改为黄色，就像我将鼠标悬停在它上面一样。

我的 HTML：

<div class="input-group controls">
    <input type="text" class="form-control" placeholder="Search by Name" />
    <span class="input-group-addon right search"></span>
</div>

我的 CSS（如果可能，请使用 Chrome。我没有在此处包含 corssbrowser 的内容以使其更易于阅读）此外，这最初是基于 SCSS 构建的：

.mar40 {
    margin: 40px auto;
}

.form-control {
    border-width: 2px;
    border-color: #8f8f8f;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #bbbbbb;
    -webkit-border-radius: 34px;
    -moz-border-radius: 34px;
    -ms-border-radius: 34px;
    border-radius: 34px;
    background: #211E1E;
}

.form-control:focus,
.form-control:hover {
    border-color: rgba(248, 151, 29, 0.77);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    transition: all 1s ease;
}

.form-control .input-group-addon {
    background: #8f8f8f;
    border-color: #555555;
    border-width: 2px;
}

.controls .input-group-addon.right.search {
    background: #30373e;
    border: 2px solid #8f8f8f;
    color: #bbbbbb;
    border-left: none;
    border-radius: 0px 20px 20px 0;
    padding: 4px 10px;
    min-width: 0;
}

.controls .input-group-addon.right.search:before {
    content: "\f4a4";
    font-family: 'Ionicons';
    font-size: 16px;
}

.controls:focus .input-group-addon.right,
.controls:hover .input-group-addon.right,
.controls:active .input-group-addon.right {
    border: 2px solid rgba(248, 151, 29, 0.77) !important;
    border-left: none !important;
    transition: all 1s ease;
}

.controls:focus .input-group-addon.right:before,
.controls:hover .input-group-addon.right:before,
.controls:active .input-group-addon.right:before {
    color: rgba(248, 151, 29, 0.77);
    transition: all 1s ease;
}

悬停/焦点/活动所需的效果图

这就是我要关注的内容

还有方便的花花公子CODEPEN

谢谢！

Answer 1

:focus 适用于 input 而不是父容器，因此您的选择器组应如下所示。 （请注意第一行中更改的选择器）

.form-control:focus + .input-group-addon.right,
.controls:hover .input-group-addon.right,
.controls:active .input-group-addon.right {
  border: 2px solid rgba(248, 151, 29, 0.77) !important;
  border-left: none !important;
  transition: all 1s ease;
}

据我所知，当您 :hover 孩子时，您也间接地悬停在父母身上，因此当 .form-control:hover 适用时，.controls:hover .input-group-addon.right 也适用。因此.form-control 和.input-group-addon.right 都获得了边框。

但是当您关注.form-control 时，焦点选择器仅适用于input 而不会应用于其容器。因此只有.form-control 获得边框而不是.input-group-addon。因此，必须将选择器更改为基于input 而不是容器的焦点设置.input-group-addon 的样式。

CodePen Demo