Страницы

Поиск по вопросам

воскресенье, 9 июня 2019 г.

Не понимаю поведения класса при добавлении к нему ul

В заголовке сформулировал вопрос. Пример кода - jsfiddle
body { background-color: lavender; } .icons_main_class { list-style: none; margin: 0; padding: 0; margin-right: 10px; text-align: right; } .icons_main_class li { background-image: url(https://image.flaticon.com/sprites/share/packs/174834-social-media-logos.png); display: inline-block; padding: 0; margin: 0; width: 32px; height: 32px; background-size: 13rem; border-radius: 5px; } .social1 { background-position: 20% -0.3%; } .social2 { background-position: 40% 0; } .social3 { background-position: 99% 0; }


Есть вот такой код, где я спрайтами попытался сделать что-то типа кнопок соц сетей и вроде бы все работает как надо. Но вот меня мучит один вопрос (реально хочу знать и понимать), если к классу .icons_main_class добавить ul (то есть так - .icons_main_class ul {...}) , то почему-то перестает работать text-align. Как я понимаю и меню эта слетает в исходное положение (left). И вот мне интересно почему, ведь мы по сути обращаемся к классу, который содержится в том же теге ul, но если его прописать, то случается такая фигня, расскажите пожалуйста в чем дело и почему так происходит и еще когда добавляем этот ul то слева откуда то появляется margin, хотя в свойствах его нет, тоже непонятный момент.


Ответ

ul.icons_main_class { list-style: none; background: red; } /* Потому, что ты не правильно последовательность селекторов прописываешь*/ /* ты говоришь, возьми тег ul который в каком то блоке классом icons_main_class2 */ /* и пропиши ему правила ниже, а такой последовательности селекторов нет*/ .icons_main_class2 ul { list-style: none; background: red; }

  • social1
  • social1

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

Отправить комментарий