hex{ }不起作用（我试过edge，chrome，opera，但都不起作用），而img#/#hex{}（我在chrome开发工具中找到的）在任何地方都起作用。

下面是我HTML代码：

<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/118/bacon_1f953.png" alt="bacon-img">
<img id="#hex" src="https://emojipedia-us.s3.dualstack.us-west-amazonaws.com/thumbs/120/apple/325/broccoli_1f966.png" alt="broccoli-img">

这是我的css代码，即使我尝试img#hex或简单地#hex，它也不起作用

img{
    background-color: rgba(0, 255, 0, 0.445);
    border-radius: 20px;
}

img:hover{
    background-color: transparent;
    border-radius: 25px;

 
#hex{
    background-color: rgba(255, 0, 0, 0.445) ;
    border-radius: 10px;
}

下面是我的CSS代码，部分工作：因为hover dosennot work on img#\#hex然而，我不知道img#\#hex是如何工作的，或者为什么它工作。

img{
    background-color: rgba(0, 255, 0, 0.445);
    border-radius: 20px;
}

img:hover{
    background-color: transparent;
    border-radius: 25px;

 
img#\#hex {
    background-color: rgba(238, 255, 0, 0.445) ;
    border-radius: 10px;
}

img 1不悬停时是什么enter image description here
在第一个img enter image description here上悬停时的img 2
img 3悬停在第二个img enter image description here上时
我有没有犯了什么错误，或者我的代码有什么问题，或者类似的问题？2请告诉我。3谢谢！
我希望:hover
使用img#\#hex
并在悬停时给予透明背景！