Блог

Главная - Вопросы по программированию - Изменения в одном списке отражаются во втором списке, а также в html

Изменения в одном списке отражаются во втором списке, а также в html

#html #css

#HTML #css

Вопрос:

У меня много проблем с выяснением того, что пошло не так в этом коде. Я создаю нижний колонтитул для своего веб-сайта, который состоит из двух неупорядоченных списков. Проблема в том, что всякий раз, когда я вношу некоторые изменения в свой первый список, изменения автоматически отражаются и во втором списке. В чем проблема?

     .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>

Комментарии:

1. лучше вы можете определить свой ul, вызвав класс difference

2. И какой пример изменения вы вносите в один из списков, который создает эту проблему?

Ответ №1:

Проблема заключается в том, что изменения в footer2 отражаются в footer3, они не являются независимыми.

Если мы посмотрим на CSS и извлекем два похожих определения, мы увидим, что:

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

предшествует:

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

}

В CSS каскадирование означает, что что-то, идущее после (обычно), имеет приоритет над чем-то, идущим раньше.

Теперь .footer3 ul,li это означает «стилизовать любой элемент ul в .footer и любой элемент li в любом месте.

Чтобы придать ему стиль li в .footer3, вам нужно написать как:

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

На всякий случай сделайте то же самое для объявлений для footer2, поскольку вы не хотите влиять на другие элементы li в документе, определения которых могли быть дальше по каскаду таблиц стилей.