时间戳

首页 > 解决方案 > 一个列表中的更改也反映在第二个列表中，以及 html

html - 一个列表中的更改也反映在第二个列表中，以及 html

问题描述

我在弄清楚这段代码出了什么问题时遇到了很多问题。我正在为我的网站创建一个页脚，其中包含两个无序列表。问题是每当我在我的第一个列表中进行一些更改时，这些更改也会自动反映在第二个列表中。有什么问题？

    .footer1{
        background: linear-gradient(to right, #348AC7, #7474BF);
        width: 100%;
        height: 350px;
        display: block;
    }
    .footer2{
        padding-left: 200px;
        padding-top: 40px;
        width: 400px;
       display: block;
        
    }
    .footer2 h1{
        color: white;
    }
    .footer2 p{
        font-size: 18px;
    }
    .footer3{
        padding-left: 1000px; 
        display: block;
    }
    .footer3 h1{
        color: white;
        position: absolute;
        top: 50px;
        display: block;
    }
    .footer3 ul,li{
        list-style-type: none;
        
        display: block;
    }
    .footer3 ul{
        display: block;
    }
    .footer3 a{
        text-decoration: none;
        color: black;
        font-size: 20px;
        position: relative;
        bottom: 200px;
        right: 30px;
        display: block;
    }
    .footer3 a:hover{
        color: red;
    }
    .footer2 ul,li{
        color: black; 
        display: block;
      
    }
    .footer2 ul{
        display: block;
    }
    .footer2 a{
        color: black;
        text-decoration: none;
        display: block;
        
    }
    .footer2 a:hover{
        color: red;
    }
<div class="footer1">
    <div class="footer2">
        <h1>About Us</h1>
        <p>The cartzilla E-commerce website is a very popular online shopping site where people get to buy all the things just by sitting at home.The list of categories that we have are electronics,furniture,home appliances,fasionable clothes etc.</p>
        <ul>
            <li><a href="#">Mumbai</a></li>
            <li><a href="#">+91-72088101541</a></li>
            <li><a href="#">kevinkhimasia13@gmail.com</a></li>
        </ul>
    </div>

   <div class="footer3">
        <h1>Quick links</h1>
        <ul>
            <li><a href="index.php">Home</a></li>
            <br>
            <li><a href="#">Contact Us</a></li>
            <br>
            <li><a href="#">About Us</a></li>
            <br>
            <li><a href="#">FAQ</a></li>
        </ul>
    </div>
</div>

标签： htmlcss

解决方案

看到的问题是对footer2 的更改会反映在footer3 中，它们不是独立的。

如果我们查看 CSS 并提取两个类似的定义，我们会看到：

.footer3 ul,li{
    list-style-type: none;
    
    display: block;
}

出现在：

.footer2 ul,li{
        color: black; 
        display: block;

}

在 CSS 中，级联意味着后面的东西（通常）优先于前面的东西。

现在，.footer3 ul,li意思是'在 .footer 元素中设置任何 ul 和任何地方的任何li。

要使其样式化 .footer3 中的 li，您需要编写为：

.footer3 ul, .footer li{
    list-style-type: none;
    
    display: block;
}

为了安全起见，对 footer2 的声明执行相同的操作，因为您不想影响文档中的其他 li 元素，这些元素的定义可能在样式表级联中更进一步。

推荐阅读