+ Ответить в теме
Показано с 1 по 6 из 6

Тема: последовательность :nth-child

  1. #1

    последовательность :nth-child

    У меня почему то :nth-child который должен быть 1 стал вторым и причин для этого я не вижу.
    то есть <div class="HeaderButton"> который первый в структуре воспринимает значение только 2


    @charset "utf-8";
    /* CSS Document */

    html, body{
    padding: 0;
    margin: 0;
    background: #fff;
    color: #2e2e2e;
    font-family: 'Ubuntu', sans-serif, "sans-serif";
    font-size: 16px;
    }
    a{
    color: #B23730;
    text-decoration: underline;
    }
    main{
    max-width: 1280px;
    margin: 0 auto;

    }
    header{
    height: 150px;
    margin: 60px 0px 0px 0px;
    display: flex;
    jjustify-content: space-between;
    align-items: center;
    }

    .HeaderLogo{
    text-align: center;
    flex-basis: 50%;
    }
    .HeaderButton{
    width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .HeaderButton:nth-child(2){
    margin-left: 300px;
    }
    .Button:nth-child(1){
    margin: 0px 1rem 0px 0px;
    }
    .Button:nth-child(2){
    width: 60px;
    }
    .color{
    color: #B23730;
    }
    .deviz{
    font-size: 12px;
    color: #2e2e2e2;
    }



    <main>
    <header>
    <div class="HeaderLogo">
    <img src="images/logotip1.svg" width="80%" alt=""><br>
    <p class="deviz">Девиз социального приюта <span class="color">Дари добро</span></p>
    </div>
    <div class="HeaderButton">
    <div class="Button"><a href="#">Стать волонтером</a></div>
    <div class="Button"><img src="images/iconka5.svg" alt=""></div>
    </div>
    <div class="HeaderButton">
    <div class="Button"><a href="#">Помочь приюту</a></div>
    <div class="Button"><img src="images/iconka6.svg" alt=""></div>
    </div>
    </header>
    </main>

  2. #2
    Ничего не понятно, запости только то что относится к вопросу

  3. #3
    Потому что учитываются все дочерние элементы родителя.
    В данном случае у header 3 дочерних элемента
    - .HeaderLogo
    - .HeaderButton
    - .HeaderButton
    Как видите .HeaderButton здесь идет вторым и третьим.

  4. #4
    Цитата Сообщение от Proger Посмотреть сообщение
    Потому что учитываются все дочерние элементы родителя.
    В данном случае у header 3 дочерних элемента
    - .HeaderLogo
    - .HeaderButton
    - .HeaderButton
    Как видите .HeaderButton здесь идет вторым и третьим.
    А почему тогда когда я ставлю значение 1 не чего не происходит, получается изменение должны коснуться .HeaderLogo но не касаются

  5. #5
    Цитата Сообщение от sergei1980 Посмотреть сообщение
    когда я ставлю значение 1 не чего не происходит, получается изменение должны коснуться .HeaderLogo но не касаются
    Потому что вы явно указываете другой класс
    Цитата Сообщение от sergei1980 Посмотреть сообщение
    .HeaderButton:nth-child(...

  6. #6

+ Ответить в теме

Похожие темы

  1. Последовательность событий
    от Влад Филь в разделе Jquery
    Ответов: 2
    Последнее сообщение: 11.02.2014, 17:02
  2. Список ul, li и nth-child
    от jvuk в разделе CSS
    Ответов: 0
    Последнее сообщение: 28.01.2014, 17:47
  3. first-child
    от ЗАБор в разделе CSS
    Ответов: 1
    Последнее сообщение: 01.11.2012, 12:42
  4. Как удалить child в simpleXml ?
    от GRean в разделе Базы данных
    Ответов: 0
    Последнее сообщение: 08.08.2010, 09:59
  5. неправильная последовательность при записи
    от Крукозяка в разделе Базы данных
    Ответов: 6
    Последнее сообщение: 01.12.2009, 17:12

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения