:has选择器与Grid布局异常排查——同一代码不同页面表现差异

核心问题原因 #

1. 硬编码行列属性覆盖网格区域：#div3和#div4同时设置了grid-area与grid-row/grid-column属性，后者优先级更高，会固定元素的行列位置。当:has(#div3:hover)触发容器的grid-template-areas变更时，#div3不会跟随区域调整位置，反而会和#div1在第三行第一列重叠，导致#div1的文本被图片覆盖，同时网格布局无预期变化。
2. HTML结构不规范：footer标签位于</body>闭合标签之后，不符合HTML规范，可能导致浏览器渲染时出现上下文异常。

修复步骤 #

• 移除#div3和#div4的grid-row、grid-column属性，仅保留grid-area，让网格区域定义完全控制元素位置。
• 将footer标签移至body内部，确保DOM结构规范。

修改后的代码 #

CSS代码

.container {
    display: grid;
    grid-template-columns: repeat(2, 39vw);
    grid-template-rows: 10vh 10vh 40vh;
    justify-content: center;
    width: 80%;
    margin: auto;
    column-gap: 1%;
    grid-template-areas:
    " e e "
    " a b "
    " c d " ;
}
#h3 {
    grid-area: e;
    grid-column: 1/3;
    grid-row: 1/2;
    background-color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2vh;
    margin-top: 2vh;
    color: #ffffff;
}
#h3 p {
    background-color: inherit;
    font-size: 4vb;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}
#div1 {
    grid-area: a ;
    display: flex;
    justify-content: center;
    align-self: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    background-color: #272727;
}
#div2 {
    grid-area: b ;
    display: flex;
    justify-content: center;
    align-self: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    background-color: #272727;
}
#div3 {
    grid-area: c;
}
#div4 {
    grid-area: d;
}
#div4 img, #div3 img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#div1:hover, #div2:hover{
   z-index: 2;
    background-color: #ffffff;
    opacity: 80%;
    color: black;
}
#div1 p, #div2 p{
    align-self: center;
    background-color: inherit;
}
.container:has(#div1:hover){
    grid-template-areas: 
    "e e"
    "a b"
    "a d";
    z-index: 2;
}
.container:has(#div3:hover){
    grid-template-areas: 
    "e e"
    "a b"
    "a d";
    z-index: 2;
}
.container:has(#div4:hover, #div2:hover){
    grid-template-areas: 
    "e e"
    "a b"
    "c b";
    z-index: 2;
}

HTML代码

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Illustrator</title>
    <link rel="stylesheet" href="/css/illu.css">
</head>
<body>
    <div id="nom">
        <nav>
            <ul>
                <li><a href="index.html">Mon Travail</a></li>
                <li><a href="mailto:cool.email@gmail.com">Me Contacter</a></li>
            </ul>
        </nav>
    </div>
    <div class="header">
        <div id="header"><header><H3>Mes travaux Illustrator</H3></header></div>
    </div>
   
    <footer>
        <div class="container">
            <div id="h3"><p>Vous voudriez peut être jeter un oeil à ...</p></div>
            <div id="div1"><p>Mes travaux InDesign</p></div>
            <div id="div2"><p>Mes travaux Acrobat</p></div>
            <div id="div3"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMuj6_VR3oP0fa_jDFqoy3Hjy3xq0SlQjRLRnoAteoGQ&s" alt="InDesign"></div>
            <div id="div4"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Adobe_Acrobat_Reader_icon_%282020%29.svg/2101px-Adobe_Acrobat_Reader_icon_%282020%29.svg.png" alt="Acrobat"></div>
        </div>
    </footer>
</body>
</html>

内容的提问来源于stack exchange，提问作者Benoit Belmont