选择器中的伪类

Question

以下HTML标记

<div id="child">
    <input type="text"/>
</div>

和CSS样式表

input[type="text"]:focus{
    border: 1px solid green;
}
#child {
    border: 10px solid grey;
    border: 20px black solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

给出。但我想要同时应用hover和focus伪类的效果。我认为像这样的代码的复制粘贴：

input[type="text"]:focus{
    border: 1px solid green;
}

input[type="text"]:hover{
    border: 1px solid green;
}

不是最好的方法，因为它的代码非常大。有没有办法不用JS？

Answer 1

在您的情况下，通过为多个选择器设置单个样式块有助于减少代码的东西：

input[type="text"]:focus, input[type="text"]:hover
{
    border: 1px solid green;
}