浅谈css当中:focus-within的好玩之处CSS :focus-within的具体使用

 .ctn { position: relative; width: 318px; margin: 100px auto; height: 370px; padding: 20px; box-sizing: border-box; background: #fff; z-index: 10; box-shadow: 0 0 15px #cfcfcf; } .ctn h2 { font-size: 20px; font-weight: bold; margin-bottom: 30px; } .ctn input { padding: 10px; width: 100%; border: 1px solid #e9e9e9; border-radius: 2px; outline: none; box-sizing: border-box; font-size: 16px; } img { position: absolute; top: -23%; left: 50%; width: 80px; height: auto; transform: translate(-50%, 0); } .xPassword img { display: none; width: 103px; height: auto; top: -26%; } //以上毫无价值，可以忽略，下方两个才是重点 .xPassword:focus-within ~ img { display: none; } .xPassword:focus-within img { display: block; }