В заголовке сформулировал вопрос.
Пример кода - 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; }
Комментариев нет:
Отправить комментарий