请问CSS多个伪类如何写在同一条规则集里?

请问CSS多个伪类如何写在同一条规则集里?

问题描述:请问CSS多个伪类如何写在同一条规则集里?

相关代码:

.banner .formcon form>input:hover{
    border: 1px solid #07cbc9;
}

.banner .formcon form>input:focus {
    border: 1px solid #07cbc9;
}

.banner .formcon form>textarea:hover {
    border: 1px solid #07cbc9;
}

.banner .formcon form>textarea:focus {
    border: 1px solid #07cbc9;
}


例如我想让form标签下的input和textarea标签在focus和focus状态下改变样式,有没有更简便的写法?
相关截图:
.banner .formcon form>input:hover{
    border: 1px solid #07cbc9;
}

.banner .formcon form>input:focus {
    border: 1px solid #07cbc9;
}

.banner .formcon form>textarea:hover {
    border: 1px solid #07cbc9;
}

.banner .formcon form>textarea:focus {
    border: 1px solid #07cbc9;
}
Text.

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
imooc_慕慕 2023-02-12 16:05:24

同学你好,聚焦样式无效,参考修改如下:

https://img1.sycdn.imooc.com//climg/63e89d9609405a1603470154.jpg

简化参考如下:

https://img1.sycdn.imooc.com//climg/63e89da709082af603990078.jpg

textarea元素同理。

祝学习愉快~

  • 提问者 梓柯 #1
    为什么focus单独写border样式可以生效呢?简化写在一起他就不生效了
    Text.
    2023-02-12 16:20:21
  • imooc_慕慕 回复 提问者 梓柯 #2

    同学你好,同学可以自己测试一下,单独使用也不生效,

    https://img1.sycdn.imooc.com//climg/63e8a2c209c1026207010131.jpg

    如果同学公共样式中设置了input元素的outline:0;属性,那么border属性才会生效,如果没有那会当聚焦的时候样式是无效的。

    祝学习愉快~

    2023-02-12 16:26:48
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师