Leaderboard
Popular Content
Showing content with the highest reputation on 11/24/2016 in Posts
-
нет, применяться не будет т.к стоит пробел между q2 и q77 - ".q2 :not(.q77)" - q77 всего лишь потомок q2 и работать данные стили не будут пока вы не укажите какому селектору будет применяться превдокласс :not то есть вот .q1 li:first-child .q2 ul:not(.q77) li:hover1 point
-
во первых вы применяете превдокласс :not к тегу li.q77 хотя класс .q77 присвоен тегу ul ! во вторых как я сказал раньше - Селекторы потомки в комбинации с :not не применяются вы не до конца выучили область применения этого псевдокласса по проблеме, я еле нашел ее), столь многоуровневые меню я не видел давно если я правильно понял то вот https://jsfiddle.net/sr5znzrw/1/ css изменил только 94 строку, сделал концовку как li:hover:not(.not) из этого правила следует что стили, будут применятся при наведении всем тегам li - кроме ! тегов li с классом .not <li class="not"><a href="#">333</a></li> также проблему можно было бы решить отношением применяемых стилей к непосредственно дочерним элементам, знаком ">", поиграйтесь если есть желание и код не чуть не длинный1 point
-
Во-первых, это не псевдоэлементы, а псевдоклассы. Их может быть много, но любой псевдокласс применяется к тому элементу, для которого написан. Во-вторых, :not() в CSS Selectors 3 и большинстве браузеров принимает только простой селектор (т.е. либо один тег, либо один класс, либо один псевдокласс, либо один id). Сложные селекторы в :not() появились только в CSS Selectors 4 и работают пока только в Safari 9+. Смысл записи .q1 li:first-child .q2 li:hover:not(.q77 li) я понимаю как "элемент li под курсором, находящийся где угодно внутри элемента с классом q2, находящегося где угодно внутри первого элемента li где угодно внутри элемента с классом q1, и при этом не имеющего предка с классом q77". Для частного случая в примере, когда .q77 появляется внутри .q2 (т.е. стиль должен применяться к любым li внутри .q2, кроме ), можно сделать что-то типа такого: .q1 li:first-child .q2 > li:hover, .q1 li:first-child .q2 :not(.q77) li:hover { /* стили для li непосредственно в .q2 или через любые прослойки, кроме .q77 */ Если же обертка с классом .q77 может быть где угодно на любом уровне, то всё сложно. Нужно или явно перечислить все возможные варианты вложенности с ее участием, или вообще сделать иначе. Например, искусственно поднять специфичность подобным хаком: .q77 li:not(#non-existent-ID) { /* хак для поднятия специфичности выше любой комбинации классов, но ниже !important */ /* переопределяем обратно на обычные стили для li */ } Но еще лучше по возможности не привязываться ко вложенности тегов вообще. Тем более тут всё равно ведь для каждого уровня меню задействован свой класс.1 point
-
скрыть текст можно через opacity: 0; элемент с ссылкой при разрешении 320x480 может display: none и показать замену.1 point
-
Так в моем примере у дочернего элемента(p) opacity равно 1, а у родителя(div) равно 0.5 .1 point
-
Задать фон в rgba? Немного не понятен вопрос.1 point
This leaderboard is set to Kiev/GMT+03:00
-
Upcoming Events
No upcoming events found -
Сообщения форума
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-