[20/28] Проблема с nth-child. Работает очень странно!

magistr4815 · 10.Август.2017 21:17:18

Добрый день. Вообще почти сделал задание, осталось увеличить ширину у последнего пункта “Достижения”, так как не совпадало.

Прописал:

.main-menu li:nth-child(4) a {
width: 135px;
}

Ширина изменяется у 1 элемента и у 4!!!

Если прописать background: red;, то вообще ересь происходит:

Цвет применяется ко всем элементам кроме active. Что это за берд?
Я наверно что-то сделал точно не так, но и nth-child здесь тоже ТОЧНО работает НЕ ВЕРНО!

Html:

<body>
    <ul class="main-menu">
        <li><a href="/courses">Курсы</a></li>
        <li><a href="/demos">Демонстрации</a></li>
        <li class="active"><a href="/public_profiles">Участники</a></li>
        <li><a href="/achievements">Достижения</a></li>
    </ul>
</body>

CSS:

html, 
body {
    margin: 0;
    padding: 0;
}

body {
    width: 430px;
    min-height: 280px;
    padding: 10px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: #ecf0f1;
}

ul {
    margin: 0px;
    padding: 0px;
}

.main-menu li {
    display: inline-block;
    list-style: none;
    margin-right: -5px;
    
    border-left: 2px solid #2c3e50;
}

.main-menu a {
    display: block;
    padding: 10px 15px;
    background: #2980b9;
    color: white;
    text-decoration: none;
    
    
    /*border: 1px solid black;*/
}

.active a  {
    background: #1abc9c;
}

.main-menu li:nth-child(4) a {
    
}

Само задание Мастерская: создаём меню / Испытание: горизонтальное меню: 20/28

НО! Если сделать через last-child, то все работает и через ширину и через паддинг!
Как такое может быть?

.main-menu li:last-child a {
    width: 104px;
}

Вариант ответа типа: “Да сделай через Last и забей” - не устроит.

Сделал 2 отдельных файла на компе html и css - там отображается относительно нормально:
Хотя тоже вопрос, че не так с шрифтом? Вроде кодировка прописана!

Но в песочницах у всех по разному:

Alexey_Ivanov · 11.Август.2017 06:24:50

А зачем вообще привязываться к 4-му пункту? Кто мешает задать фоновый синий цвет всему списку .main-menu? В плане “ереси” с красным цветом. Никакой ереси нет. Есть понятие “каскадирование”: Вы выше задаёте .main-menu a { background-color: red; }, а НИЖЕ идёт точно такой же по специфичности (и там, и там 11) селектор .active a { background: …; }. В итоге сильнее окажется то, что ниже, а именно .active a. Вот он и переопределяет цвет активного пункта с красного на зелёный. Хотите по-другому - поменяйте эти селекторы местами: тогда все пункты будут красными.

Alexey_Ivanov · 11.Август.2017 06:50:42

@Ineska, привет! Не могу тут на один вопрос ответить по поводу nth-child(4) и last-child: самое интересное, что показатели в мини-браузере (когда меняется и первый, и четвёртый элемент одновременно) не совпадают со вкладкой “Результат” в контрольном окне снизу - там всё корректно. Я чего-то не знаю ещё или это глюк? Спасибо!

Ineska · 11.Август.2017 07:42:17

Не знаю, что сказать. У меня оба варианта работают одинаково правильно…
А вообще удлинять пункт меню, задавая фиксированную ширину - это плохой вариант. Здесь только через padding. Или более красивый вариант с фоном для списка меню.

magistr4815 · 11.Август.2017 10:14:42

Не много не понял ответ “в плане ереси”.
Я задаю красный цвет только в:
.main-menu li:nth-child(4) a {
background: red;
}
И он почему то применяется ко всем элементам, вопрос в том, почему ко ВСЕМ? если прописан только к четвертому элементу?
И в некоторых песочнице и в самом браузере если выносить код на жесткий диск отображается верно. Вы всю тему посмотрели? Я же там указал, что отображается ВЕЗДЕ по разному.
По поводу переопределения active - я это вижу, что один (третий пункт) у нас горит зеленым, я про него и не спрашиваю. Он должен гореть зеленым.)
Вы ответили совершенно на другой вопрос.

Alexey_Ivanov · 11.Август.2017 11:48:14

Ок, тогда ждите, когда кто-то поймёт то, что Вы написали, и ответит на те вопросы, которые Вы имели в виду.

magistr4815 · 11.Август.2017 12:51:11

Вот конкретно. Что не понятно то ?

Ineska · 11.Август.2017 14:47:11

Если смотреть только на это правило, то оно не может покрасить все ссылки в красный цвет.
Попробуйте сбросить код и написать заново.
P.S. Примите к сведению, что CAPS, бесконечное число восклицаний и много полужирного начертания никак не влияет на скорость получения ответа.

magistr4815 · 11.Август.2017 15:03:50

Я понимаю что

оно не может покрасить все ссылки в красный цвет.

но я же ниже приложил скрины из разнообразных песочниц, где этот код работает так же не корректно, верней, где то правильно, а где то нет.
http://forum.academy/uploads/default/original/2X/3/300950fe0eaa809ba3a15632684f32afdb96722b.png
http://forum.academy/uploads/default/original/2X/9/9482c17fe0350ef02b45855448793c6e4eb39d57.png
Вот я и хотел узнать, это глюк? или я что то сделал не так. И если это глюк, то пусть поправят. Хотел обратить на это внимание.
Если не верите мне, то можете перекопировать HTML и CSS код в задание. Ссылка на задание!

Ineska · 12.Август.2017 05:23:36

Скрины из песочницы мне мало о чем говорят. Чтобы найти проблему, нужен код. А ссылки на свои песочницы вы не предоставили.

mikola · 26.Август.2017 12:01:30

день добрый! у меня на 93% все норм.
html,
body {
margin: 0;
padding: 0;
}

body {
width: 430px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.main-menu {

margin: 0;
padding: 0;
list-style: none;

border: 1px solid #e5e5e5;

}
.main-menu li {
display: inline-block;
margin-right: -4px;
border-left: 2px solid #2c3e50;
background:#2980b9;
padding-right:20px

}
.main-menu a {text-decoration:none;
display: block;
padding: 8px 8px;
color:#ffffff;
margin-left: -1px;
}
.main-menu li.active{background:#1abc9c; }