Question

我无法正确检查红色背景内的元素，因为当我将鼠标悬停在红色背景外时，body和html元素不断显示，如何避免这种情况？

* {
    margin: 0;
    padding: 0;
}

body {
    background: royalblue;
    font-family: monospace;
}

header {
    position: relative;
    top: 10px;
    margin: 0 auto;
    width: 100%;
    background: red;
}
.nav {
    position: relative;
    top: 0px;
    list-style: none;
    text-align: center;
    padding: 10px 0;
}

.nav li {
    margin: -3px;
    display: inline;
    padding: 7px 3px;
    border: 1px solid silver;
}

.nav a {
    position: relative;
    text-decoration: none;
    color: white;
    padding: 10px 50px;
    font-size: 15px; 
}

<body>  
     <header>
        <ul class="nav">     
            <li><a href="homepage.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
            <li id="log"><a href="index.html">Login</a></li>             </ul>     
     </header> 
</body>

Answer 1

您可以在检查器中看到的轮廓中选择要检查的元素。按下...旁边的“▶”以展开它，然后浏览选择所需的元素。

如何避免在检查元素时显示html和body元素？

1 个答案: