div在html错误中从彼此获取属性

Question

我试图使一个投资组合页面，使用HTML，CSS和JS。遇到一个奇怪的错误。我在一个div上执行的CSS样式也以某种方式出现在另一个div上。奇怪的是，第二个ones....It会响应自己的样式，而第一个div在代码中会更加清晰

​

$(document).ready(function () {

    $(window).scroll(function() { // of scroll function of windows
        if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
            $('.navbar').addClass("sticky"); // add sticky class 2 navbar
        } else {
            $('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky

         }
    });


    //toggle menu/navbar script
    $('.menu-btn').click(function(){ // this activates the inbuilt click function of js on the menu button
        $('.navbar .menu').toggleClass("active");
        $('.menu-btn i').toggleClass("active");


    });


   
});

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');



*{
    user-select: text;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;    




}

/* navbar styling */

.navbar{ 

    width: 100%;
    z-index: 999;
    position:fixed;
    padding: 30px 0;
    width: 100%;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.55s ease;

}

.navbar.sticky{
    transition: background-color 0.55s ease;
    padding: 15px 0;
    background-color: crimson;
}
.max-width{

    max-width: 1300px;
    padding: 0 80px;
    margin: auto; 
}

.navbar .max-width{

    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .logo a{

    font-size: 35px;
    font-weight: 600;
    color: cyan;

}



.navbar .logo a span{
    color: cyan
}

.navbar.sticky .logo a span{
    color: white;
    transition: all 0.3s ease;

}


.navbar .menu li{

    list-style: none;
    display: inline-block;
}
.navbar .menu li a{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: color 0.3s ease;
    
}

.navbar .menu li a:hover{
    color: crimson;
}
    
.navbar.sticky .menu li a:hover{
    color: white;
}

 /* menu button styling */

.menu-btn{
    color: white;
    font-size: 23px;    
    cursor: pointer;
    display: none;
}





/*home section styling */

.home{
    cursor: default;
    display: flex;
    background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;/* Enter the background image location */
    
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    min-height: 500px;
    font-family: 'Ubuntu', sans-serif;
    background-color: black;
    

}


.home .max-width{

    margin: auto 0 auto 40px;


}

.home .home-content .text-1{
    font-size: 27px; 
}

.home .home-content .text-2{
    font-size: 75px; 
    font-weight: 600;
    margin-left: -3px;
}

.home .home-content .text-3{
    font-size: 40px; 
    margin: 5px, 0 ; 
}

.home .home-content .text-3 span{

    color: crimson;
    font-weight: 500;
}

/*    .home .home-content a{
    display: inline-block;
    background: crimson;
    color: white;
    font-size: white;
    padding: 12px 36px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}    HIRE ME BUTTON STYLE*

.home .home-content a:hover{
    color: crimson;
    background: none; */







/* ABOUT SECTION STYLING */

section{
    padding: 100px 0;
}



.about{

    font-family: "Poppins", sans-serif;
    user-select: text;

}

.about .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;
    color: black;

    
}
.about .title::before{

    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: black;
    transform: translateX(-50%);
}


.about .title::after{

    content: "who i am";
    position: absolute;
    padding: 5px;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: crimson;
    background: white;
}

.about .about-content{

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;


}

.about .about-content .left {
    
    width: 45%;
}


.about .about-content .left img{

    height: 400px;
    width: 400px;
    object-fit: cover;
    border-radius: 6px;


}

.about .about-content .right {
    
    width: 55%;
}

.about .about-content .right .text {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
    color: black;
}

.about .about-content .right .text span{
    color: white;

}


.about .about-content .right .lorem{

    color: black;
    background: none;
}




.about .about-content .column  a{

    display: inline-block;
    background: crimson;
    color: white;
    font-size: 20px;
    padding: 12px 36px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}

.about .about-content .right a:hover{
    background: none;
    color: crimson;

}
























    






/* -----------------------------------------------------------------------------*/
/*start media query :start*/

@media(max-width: 1104px){
    .home .max-width{
        margin-left: 0px;
    }

}


@media(max-width: 991px){

    .max-width{
        padding: 0 50px;
        }

}

@media(max-width: 947px){

    

        
    .menu-btn{
        position: fixed;
        display: block;
        z-index: 999;
        color: white;
    }    
        

 

    .navbar .menu{
        position: fixed;
        height:100vh;
        width: 100%;
        left: -100%;
        top: 0;
        text-align: center;
        padding-top: 80px;
        background: black;
        transition: all 0.3s ease;
    }

    .menu-btn i.active:before{
        content: "\f00d";
    }

    .navbar .menu.active{
        left: 0;
    }

    .navbar .menu li{
        display: block;


    }

    .navbar .menu li a{

        display: inline-block;
        margin:20px 0;
        font-size: 25px;

    }


    .home .home-content .text-2{
        font-size: 70px; 
        
    }
    
    .home .home-content .text-3{
        font-size: 35px; 
    }

    



}


@media(max-width: 690px){
    
    .max-width{
        padding: 0 23px;
        }

    .home .home-content .text-2{
        font-size: 70px; 
        
    }
    
    .home .home-content .text-3{
        font-size: 32px; 
    }
}

@media(max-width: 500px){
    
    

    .home .home-content .text-2{
        font-size: 50px; 
        
    }
    
    .home .home-content .text-3{
        font-size: 32px; 
    }
}

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale = 1.0">
    <title> Personal Portfolio Website </title>
    <link rel="stylesheet" href="./styles.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>

<body>

    <nav class="navbar">
        <div class="max-width">
            <div class="logo"><a href="#">Portfo<span>lio.</span></a></div>

            <ul class="menu">
                <li><a href="#">Home</li>
                <!--navbar -->
                <li><a href="#">About</li>
                <li><a href="#">Skills</li>
                <li><a href=#>Projects</li>
                <li><a href=#>Experience</li>
                <li><a href="#">Contact</li>
            </ul>
            <div class="menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </nav>


    <!-- home section start -->

    <section class="home" id="home">
        <div class="max-width">
            <div class="home-content">
                <div class="text-1">Hello, my name is</div>
                <div class="text-2">Merlin</div>
                <div class="text-3">And I'm an <span class="typing">Undergrad</span></div>

            </div>

        </div>
    </section>




    <!-- ABOUT SECTION STARTS-->

    <section class="about" id="about">
        <!-- Start Section-->
        <div class="max-width">
            <h2 class="title">About Me</h2>
            <div class="about-content">
                <div class="column left">
                    <img src="./Images/653438.jpg" alt="Image">
                </div>
                <div class="column right">
                    <div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
                    <div class="lorem">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores
                            cumque
                            doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem
                            consequatur. Hic quas amet, aliquam nihil voluptatem, porro culpa doloremque qui numquam
                            atque
                            rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam,
                            adipisci
                            cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos!
                            Perferendis? </p>
                    </div>
                    <a href="#">Download Resume</a>
                </div>
            </div>

        </div>
    </section>



















    <script src="./script.js"></script>





</body>

</html>

​

在About部分中，只有Resume按钮会被高亮显示，但整个列的右div都会受到某种影响。当我只运行关于部分时，一切都运行得很好。但是当我运行整个文件时，同样的错误弹出。我已经尝试从div中删除lorem部分，并将

再试一试，还是会出现同样的错误。同样的部分在某种程度上也引用了导航栏，因为当点击它时，它会转移到导航栏。请调查一下这个。

Answer 1

出现错误是因为您没有关闭菜单中的锚点标记，请将其更改为

<ul class="menu">
    <li><a href="#">Home</a></li>
    <!--navbar -->
    <li><a href="#">About</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href=#>Projects</a></li>
    <li><a href=#>Experience</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Answer 2

在about部分中有这样的样式：

.about .about-content .column  a{

    display: inline-block;
    background: crimson;
    color: white;
    font-size: 20px;
    padding: 12px 36px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}

.about .about-content .right a:hover{
    background: none;
    color: crimson;

}

也就是说，“关于”右侧的每个锚点链接都是以这种方式设置样式的-带有深红色背景(悬停时变为深红色文本，没有背景)。

因为菜单中的锚标签没有关闭，所以你打开了锚标签(嵌套的锚标签不是合法的HTML BTW)，浏览器似乎正在尽最大努力理解这些打开的锚标签。当你到达右边的about部分时，它仍然认为有一个锚标签(至少，在Windows10上的我的Edge中，当我使用开发工具检查工具检查它试图解释的实际HTML时，它放在那里的就是这个标签)。所以它采用了深红色的样式。

以下是菜单中锚定标记关闭的代码片段，简历的文本部分没有深红色的背景：

​

$(document).ready(function() {

  $(window).scroll(function() { // of scroll function of windows
    if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
      $('.navbar').addClass("sticky"); // add sticky class 2 navbar
    } else {
      $('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky

    }
  });


  //toggle menu/navbar script
  $('.menu-btn').click(function() { // this activates the inbuilt click function of js on the menu button
    $('.navbar .menu').toggleClass("active");
    $('.menu-btn i').toggleClass("active");


  });



});

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
  user-select: text;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}


/* navbar styling */

.navbar {
  width: 100%;
  z-index: 999;
  position: fixed;
  padding: 30px 0;
  width: 100%;
  font-family: 'Ubuntu', sans-serif;
  transition: all 0.55s ease;
}

.navbar.sticky {
  transition: background-color 0.55s ease;
  padding: 15px 0;
  background-color: crimson;
}

.max-width {
  max-width: 1300px;
  padding: 0 80px;
  margin: auto;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a {
  font-size: 35px;
  font-weight: 600;
  color: cyan;
}

.navbar .logo a span {
  color: cyan
}

.navbar.sticky .logo a span {
  color: white;
  transition: all 0.3s ease;
}

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  color: crimson;
}

.navbar.sticky .menu li a:hover {
  color: white;
}


/* menu button styling */

.menu-btn {
  color: white;
  font-size: 23px;
  cursor: pointer;
  display: none;
}


/*home section styling */

.home {
  cursor: default;
  display: flex;
  background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;
  /* Enter the background image location */
  height: 100vh;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
  min-height: 500px;
  font-family: 'Ubuntu', sans-serif;
  background-color: black;
}

.home .max-width {
  margin: auto 0 auto 40px;
}

.home .home-content .text-1 {
  font-size: 27px;
}

.home .home-content .text-2 {
  font-size: 75px;
  font-weight: 600;
  margin-left: -3px;
}

.home .home-content .text-3 {
  font-size: 40px;
  margin: 5px, 0;
}

.home .home-content .text-3 span {
  color: crimson;
  font-weight: 500;
}


/*    .home .home-content a{
    display: inline-block;
    background: crimson;
    color: white;
    font-size: white;
    padding: 12px 36px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}    HIRE ME BUTTON STYLE*

.home .home-content a:hover{
    color: crimson;
    background: none; */


/* ABOUT SECTION STYLING */

section {
  padding: 100px 0;
}

.about {
  font-family: "Poppins", sans-serif;
  user-select: text;
}

.about .title {
  position: relative;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 60px;
  padding-bottom: 20px;
  font-family: 'Ubuntu', sans-serif;
  color: black;
}

.about .title::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 180px;
  height: 3px;
  background: black;
  transform: translateX(-50%);
}

.about .title::after {
  content: "who i am";
  position: absolute;
  padding: 5px;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: crimson;
  background: white;
}

.about .about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.about .about-content .left {
  width: 45%;
}

.about .about-content .left img {
  height: 400px;
  width: 400px;
  object-fit: cover;
  border-radius: 6px;
}

.about .about-content .right {
  width: 55%;
}

.about .about-content .right .text {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
  color: black;
}

.about .about-content .right .text span {
  color: white;
}

.about .about-content .right .lorem {
  color: black;
  background: none;
}

.about .about-content .column a {
  display: inline-block;
  background: crimson;
  color: white;
  font-size: 20px;
  padding: 12px 36px;
  margin-top: 20px;
  border-radius: 6px;
  border: 2px solid crimson;
  transition: all 0.3s ease;
}

.about .about-content .right a:hover {
  background: none;
  color: crimson;
}


/* -----------------------------------------------------------------------------*/


/*start media query :start*/

@media(max-width: 1104px) {
  .home .max-width {
    margin-left: 0px;
  }
}

@media(max-width: 991px) {
  .max-width {
    padding: 0 50px;
  }
}

@media(max-width: 947px) {
  .menu-btn {
    position: fixed;
    display: block;
    z-index: 999;
    color: white;
  }
  .navbar .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    text-align: center;
    padding-top: 80px;
    background: black;
    transition: all 0.3s ease;
  }
  .menu-btn i.active:before {
    content: "\f00d";
  }
  .navbar .menu.active {
    left: 0;
  }
  .navbar .menu li {
    display: block;
  }
  .navbar .menu li a {
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
  }
  .home .home-content .text-2 {
    font-size: 70px;
  }
  .home .home-content .text-3 {
    font-size: 35px;
  }
}

@media(max-width: 690px) {
  .max-width {
    padding: 0 23px;
  }
  .home .home-content .text-2 {
    font-size: 70px;
  }
  .home .home-content .text-3 {
    font-size: 32px;
  }
}

@media(max-width: 500px) {
  .home .home-content .text-2 {
    font-size: 50px;
  }
  .home .home-content .text-3 {
    font-size: 32px;
  }
}

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width-device-width, initial-scale = 1.0">
  <title> Personal Portfolio Website </title>
  <link rel="stylesheet" href="./styles.css">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>

<body>

  <nav class="navbar">
    <div class="max-width">
      <div class="logo"><a href="#">Portfo<span>lio.</span></a></div>

      <ul class="menu">
        <li><a href="#">Home</li>
                <!--navbar -->
                <li><a href="#">About</a></li>
        <li><a href="#">Skills</a></li>
        <li><a href=#>Projects</a></li>
        <li><a href=#>Experience</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="menu-btn">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </nav>


  <!-- home section start -->

  <section class="home" id="home">
    <div class="max-width">
      <div class="home-content">
        <div class="text-1">Hello, my name is</div>
        <div class="text-2">Merlin</div>
        <div class="text-3">And I'm an <span class="typing">Undergrad</span></div>

      </div>

    </div>
  </section>




  <!-- ABOUT SECTION STARTS-->

  <section class="about" id="about">
    <!-- Start Section-->
    <div class="max-width">
      <h2 class="title">About Me</h2>
      <div class="about-content">
        <div class="column left">
          <img src="./Images/653438.jpg" alt="Image">
        </div>
        <div class="column right">
          <div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
          <div class="lorem">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores cumque doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem consequatur. Hic quas amet, aliquam nihil voluptatem, porro
              culpa doloremque qui numquam atque rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam, adipisci cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos! Perferendis? </p>
          </div>
          <a href="#">Download Resume</a>
        </div>
      </div>

    </div>
  </section>



















  <script src="./script.js"></script>





</body>

</html>

​