구체성 문제인가요 ?

Question

< html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > 호버한 메뉴 외 나머지 흐려지는 네비게이션 < style > body { margin : 0 ; } .container { background-color : royalblue ; height : 100vh ; position : relative ; } .box { /* border: 1px solid black; */ width : 250px ; position : absolute ; top : 50% ; transform : translateY ( -50% ); } .box a { display : block ; color : white ; text-decoration : none ; padding : 10px 0px 10px 30px ; font-size : 1.5em ; opacity : 1 ; transition : 0.5s ; } .box:hover a { opacity : 0.3 ; } a:hover { opacity : 1 ; } < body > < div class = "container" > < div class = "box" > < a href = "#" > New Arrivals < a href = "#" > Summer Collection < a href = "#" > Winter Collection < a href = "#" > Special Offers < a href = "#" > Trends a:hover하면 작동이 안되고 .box a:hover 하면 작동이되는데 이건 구체성의 차이인가요 ? 그리구 순서가 바뀌면 안되는 이유가 하나만 적용이 되는건데 왜 하나만 적용이 되는지 궁금합니다 -!

코딩웍스(Coding Works) · Answer

선택자를 .box a로 했으니까 호버도 .box a:hover로 하시는게 맞습니다. 선택자를 동일한 방식으로 지정하시지 않아서 그렇습니다. 그런데... 구체성이 무슨 말이죠?

rudals8920 · Answer

아 선택자에 따라서 호버도 똑같이 해주는거구나 감사합니다. (위의 선택자를 a로 바꿔서 동일한 선택자로 a:hover를 주었는데도 안되네요ㅠㅠ 제가 잘 못 이해 한건가요 ?)