Дочерние элементы ul — HTML, CSS — Ответ 16172496
Дочерние элементы
Помогите пожалуйста разобраться. Есть такой код. ul.list-result-full ul>li:nth-child(odd)
Дочерние элементы
Столкнулся с проблемой , элемент ul не разрешен как дочерний элемент ul в этом контексте, как.
Дочерние элементы и after
<li> <a role="menuitem" href="">Главная</a> <ul role="menu"> .
Дочерние элементы с float в родительском контейнере — пропадает граница
Подскажите почему пропадает граница обрамления в родительском контейнере <div> , когда в 3-м.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Селектор на все элементы дочерние элементу с указанным классом
Здравствуйте, мне нужно выбрать все li и ol элементы внутри элемента div( ну или внутри любого.
Максимальная высота родительского элемента 0, но дочерние элементы видны
Здравствуйте. Есть родительский блок ul. Если поставить ему display none, то все элементы списка.
Как выбрать у родительского элемента дочерние элементы его дочерних элементов?
Здравствуйте, появилась такая задача. Имеется следующая структура html документа: <div.
Удалить элементы в бинарном дереве, которые больше корня; поменять дочерние элементы местами
Здравствуйте, вот моя программа. Мне нужно удалить элементы в бинарном дереве, которые больше.
дочерние элементы
есть лист бокс, в нем итемы состоят из стэк панел, в котором в свою очередь есть лайбл и пару.
Избегаем популярных ошибок в HTML5
Разбирая сайты для Галереи HTML5 и отвечая на вопросы читателей на сайте Доктор HTML5, я вынужден просматривать целую кучу страниц на HTML5 и, конечно же, их исходный код. В этой статье я расскажу вам об ошибках и сомнительной разметке, которые мне частенько приходится видеть, и объясню, как их избежать.
Не используйте как обёртку для оформления Скопировать ссылку
Одна из самых распространённых проблем, которую я часто вижу в разметке сайтов — это произвольная замена элементов структурными элементами из HTML5, особенно замена оформительской обёртки на . В XHTML или HTML4 я бы увидел что-нибудь такое:
Моя супер-пупер страница
Вместо этого я вижу следующее:
Моя супер-пупер страница
Честно говоря, это неправильно: — это не обёртка. Элемент определяет смысловую секцию содержимого для создания структуры документа. Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу , как описано у Крока Кеймена. Если же вам всё ещё нужна дополнительная обёртка, используйте . Раз уж Доктор Майк объясняет, что не мёртв, а вам не удаётся найти ничего более удачного, пожалуй, этот элемент будет самым подходящим для создания оформительской обёртки.
Таким образом, корректной разметкой для упомянутого выше примера с использованием HTML5 и пары ролей ARIA будет следующий код. Обратите внимание, что вам, в зависимости от дизайна, всё ещё могут понадобится экстра-элементы .
Моя супер-пупер страница
Если вы не уверены, какие элементы использовать, я рекомендую вам обратиться к нашей пошаговой схеме выбора HTML5-элементов для разметки содержимого.
Используйте и осознанно Скопировать ссылку
Элемент удалён из спецификации HTML5 и не рекомендован к использованию, прим. редактора.
Нет смысла писать разметку, если этого можно не делать, так ведь? К сожалению, я часто вижу элементы и там, где они совсем не нужны. Вы можете узнать все подробности в наших статьях, посвящённых элементу и элементу , но я коротко резюмирую:
- Элемент представляет собой группу вводного содержимого или навигационных средств и обычно содержит структурный заголовок.
- Элемент группирует набор элементов от до , представляя собой структурный заголовок в случае, когда заглавие имеет несколько уровней, вроде подзаголовков, альтернативных названий или слоганов.
Злоупотребление Скопировать ссылку
Думаю, что вы в курсе, что можно использовать в документе несколько раз. Но эта возможность привела к следующим ошибкам:
Мой лучший пост
Если ваш содержит единственный заголовок, избавьтесь от ненужного . Элемент в любом случае гарантирует, что заголовок войдёт в смысловую структуру документа. И поскольку не содержит нескольких элементов, как указано в его описании, зачем вам код, который, в общем-то, не нужен? Будьте проще:
Мой лучший пост
Неправильное использование Скопировать ссылку
Раз уж зашла речь о заголовках — я часто вижу неправильное использование . Не следует использовать в сочетании с в случае, когда:
- дочерний заголовок всего один или
- элемента будет достаточно и без .
Первая проблема выглядит так:
Мой лучший пост
Ричард Кларк
В этом случае стоит избавиться от и оставить только заголовок:
Мой лучший пост
Ричард Кларк
Следующая проблема состоит в очередном использовании элементов там, где они необязательны:
Моя компания
Основана в 1893 году
Когда — это единственный дочерний элемент , то какой смысл в этом ? Если в нём нет дополнительных элементов, соседствующих с , смело избавляйтесь от .
Моя компания
Основана в 1893 году
Больше примеров использования вы можете найти в отдельной, более подробной статье.
Не оборачивайте все списки ссылок в Скопировать ссылку
На момент написания статьи существует более 30-ти новых элементов и неудивительно, что у нас разбегаются глаза, когда дело доходит до создания осмысленной структурной разметки. Поэтому не стоит злоупотреблять всеми доступными сейчас суперсемантическими элементами. Что, к сожалению, часто происходит с элементом . Спецификация определяет роль следующим образом:
Элемент представляет собой часть страницы, которая ссылается на другие страницы или части текущей, то есть раздел с навигационными ссылками.
Замечание: не все группы ссылок на странице должны быть обёрнуты в элемент — этот элемент, главным образом, предназначен для группировки главных навигационных блоков. В частности, в подвалах часто содержатся короткие списки ссылок на различные части сайта, вроде правил использования сервиса, домашней страницы и копирайтов. Элемента вполне достаточно для группировки такого рода ссылок; и несмотря на то, что элемент может быть использован в таких случаях, обычно в этом нет необходимости.
Спецификация WHATWG HTML
Ключевая фраза — «главных навигационных блоков». Мы можем дискутировать весь день о значении слова «главный», но для меня это значит:
- Самая главная навигация;
- Поиск по сайту;
- Вторичная навигация (что спорно);
- Внутренняя навигация (по длинной статье, например).
И хотя здесь не может быть «правильного» или «неправильного» использования, поверхностный опрос вкупе с моей собственной интерпретацией говорят, что следующие случаи не подходят для использования :
- Постраничная навигация;
- Социальные ссылки, за исключением тех случаев, когда такие ссылки являются основной навигацией, к примеру, на сайтах About Me и Flavours;
- Тэги к записи в блоге;
- Категории записи;
- Навигация третьего уровня;
- Подвалы, набитые ссылками.
Если вы не уверены, стоит ли оборачивать список ссылок в , просто спросите у себя: «главная ли это навигация?» Чтобы было легче ответить на этот вопрос, обратитесь к следующим правилам:
- «Не используйте , если кажется, что в этом случае может подойти и с заголовком », — Ян Хиксон, IRC.
- Добавите ли вы этот блок в список ссылок «перейти» для улучшения доступности?
Если ответ на оба эти вопроса «нет», то, скорее всего, это не .
Общие ошибки с элементом Скопировать ссылку
Ах, . Правильным использованием этого элемента вместе с подельником не так-то просто овладеть. Рассмотрим некоторые общие проблемы, которые я вижу при использовании .
Не каждая картинка это Скопировать ссылку
Ранее я советовал вам не писать лишний код там, где этого не требуется. Та же ошибка и здесь. Я видел сайты, где каждая картинка была обёрнута в . Нет никакой необходимости в добавлении экстра-разметки вокруг картинок только ради самого процесса. Вы просто делаете лишнюю работу и нисколько не улучшаете описание содержимого страницы.
Спецификация обозначает как «содержимое в потоке, с необязательным заглавием, самодостаточное, обычно упоминаемое в качестве смысловой единицы в основном тексте». Как раз в этом состоит вся красота элемента , который может быть перемещён из основного содержимого, скажем, в колонку, что никак не повлияет на основной поток документа.
Если это исключительно оформительская картинка, никаким образом не упомянутая в основном документе, то это точно не . Есть и другие варианты использования, но просто спросите себя: «Нужна ли эта картинка для лучшего понимания контекста?» Если нет, то это вероятно не , а, возможно, . Если да, спросите себя: «Можно ли переместить эту картинку в примечания к тексту?» Если ответ на оба вопроса «да», то это, вероятнее всего, .
Ваш логотип — это не Скопировать ссылку
Плавно переходим к следующей проблеме, вышеупомянутые правила применимы и к ней. Вот пара регулярно встречающихся примеров:
Название компании
Добавить здесь нечего: это совсем неправильно. Мы можем спорить до посинения насчёт того, должно ли лого находиться внутри , но мы здесь не за этим. Настоящая проблема — в неправильном употреблении . Этот элемент должен использоваться, только если он упоминается в документе или контексте общего структурного элемента. Будет честным признать, что ваш логотип вряд ли будет упомянут подобным образом. Просто не делайте так. Всё, что вам нужно, это:
Название компании
Элемент — это не только картинки Скопировать ссылку
Другое распространённое заблуждение насчёт — что он может быть использован только для картинок. Это не так. Элемент может быть видео, аудио, графиком (на SVG, к примеру), цитатой, таблицей, блоком кода, фрагментом текста или любой комбинацией этих и многих других элементов. Не ограничивайте использование только картинками. Наша работа, как энтузиастов от веб-стандартов, заключается в том, чтобы максимально точно описывать содержимое при помощи разметки.
Некоторое время назад я писал про детальнее. Рекомендую почитать, если вам интересно узнать подробности или просто освежить знания.
Не используйте ненужные атрибуты type Скопировать ссылку
Эта проблема, пожалуй, является самой распространённой среди заявок в Галерею HTML5. И хотя это, по сути, не ошибка, мне кажется, что правильнее будет её избегать.
Дело в том, что в HTML5 не нужно добавлять атрибут type для элементов и . Если эти элементы автоматически добавляются вашей CMS, то избавиться от них может быть непросто, но если вы пишете код руками или полностью контролируете шаблоны, то нет никакого смысла писать избыточные атрибуты. Поскольку все браузеры ожидают, что скриптами будет JavaScript, а стилями CSS, вам это совсем не нужно:
Вместо этого просто напишите:
Кроме того, вы можете уменьшить объём кода, который пишете для задания кодировки документа и других вещей. Глава про семантику в «Погружении в HTML5» Марка Пилгрима объясняет всё.
Неправильное использование атрибутов форм Скопировать ссылку
Вы, должно быть, знаете, что HTML5 предложил набор новых атрибутов для элементов форм. Мы расскажем о них подробнее в ближайшие месяцы, а пока я покажу вам некоторые вещи, которые делать не стоит.
Одиночные атрибуты Скопировать ссылку
Некоторые новые атрибуты для элементов форм являются одиночными, и только одно их присутствие в разметке обеспечивает смену поведения. Эти атрибуты включают:
- autofocus
- autocomplete
- required
Надо признаться, я нечасто встречал подобное, но если в качестве примера взять атрибут required , то попадалось следующее:
В конечном счёте это никому не вредит. HTML-парсер видит атрибут required в разметке, поэтому требуемая функциональность будет включена. Но что, если поставить код вверх ногами и написать required=»false» ?
Парсер по-прежнему увидит атрибут required и применит поведение, несмотря на то, что вы пытались сказать ему не делать этого. Явно не то, что вам было нужно.
Существует три правильных способа задания одиночных атрибутов, второй и третий из которых нужны только если вы пишете XHTML:
- required
- required=»»
- required=»required»
Если применить эту запись к нашему примеру (в HTML), получится следующее:
Резюмируя Скопировать ссылку
Было бы просто невозможным перечислить здесь все странные приёмы и образцы разметки, с которыми мне довелось столкнуться, но эти — одни из самых часто встречавшихся. А какие ещё ошибки разметки бросались вам в глаза? Расскажите в комментариях.
Элемент div не разрешен как дочерний элемент
При технической диагностике сайта возникают критические ошибки HTML «Элемент div не разрешен как дочерний элемент для label». Я обратил внимание, что данная ошибка возникает на тех страницах, где есть текстовый модуль, но требуется более профессиональный анализ. Так как в кодах я не разбираюсь, прошу помочь в устранении критичных ошибок в коде, т.к. это влияет на нормальное индексирование и продвижения страниц.
Размещено 11/16/2021 07:41:25
Sergey Suvorov
User
Автор
Вид кода страницы со строки ошибки
Читать больше
Размещено 11/16/2021 07:42:27 От Sergey Suvorov
Sergey Suvorov
User
Автор
Читать больше
Размещено 11/16/2021 10:30:20 От Sergey Suvorov
Sergey Suvorov
User
Автор
Читать больше
Размещено 11/16/2021 10:32:15 От Sergey Suvorov
Здравствуйте. Дайте, пожалуйста, ссылку на страницу сайта, где наблюдается эта ситуация.
Отправил уведомление о Вашем вопросе сотрудникам компании, ожидайте ответ от них тут в комментариях.
Читать больше
Размещено 11/16/2021 12:33:51 От Aleksej H.
Sergey Suvorov
User
Автор
Алексей, здравствуйте! Спасибо за ответ. Вот прямо с сервиса диагностики сайта:
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 6211 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 6660 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 7109 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 7558 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 8007 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 905, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 1581, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 473, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 495, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 512, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 734, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 539, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 849, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 435, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 398, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 441, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 515, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 515, столбец 8364
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
- На строке 515, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 6211 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 6660 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 7109 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 7558 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 449, столбец 8007 - Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 905, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 515, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 515, столбец 8364
- Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 515, столбец 8364
Читать больше
Размещено 11/16/2021 14:22:45 От Sergey Suvorov
глянул твою карту Сколько же у тебя страниц?! проверь яндексом или на be1. Во первых не нужно платить , а во вторых они накручивают больше чем есть на самом деле.
Читать больше
Размещено 11/16/2021 15:06:37 От Максим Г.
Sergey Suvorov
User
Автор
Сайт не такой и большой. Страниц 115. Я уверен, что хороший магазин может в несколько раз больше страниц иметь. Сервис https://labrika.ru/ внушает доверие. Очень качественный. Исправил несколько косяков, но вот еще есть, которые от меня, скорее всего, не зависят. Стоимость бизнес тарифа около 300 руб в мес. Это вполне доступно.
Читать больше
Размещено 11/16/2021 15:22:15 От Sergey Suvorov
Sergey Suvorov
Сервис labrika внушает доверие. Стоимость бизнес тарифа около 300 руб в мес. Это вполне доступно.
Я знаю этот сервис Просто зачем платить если всё есть бесплатно.
Читать больше
Размещено 11/16/2021 20:17:01 От Максим Г.
Читать больше
Размещено 11/16/2021 20:21:18 От Максим Г.
Sergey Suvorov
User
Автор
Да, согласен, сервис отличный, а в чем то даже превосходит лабрика. Спасибо.
Читать больше
Размещено 11/16/2021 21:03:02 От Sergey Suvorov
Sergey Suvorov
User
Автор
Жду ответ от специалиста хотя бы будет вопрос рассмотрен или нет? Спасибо!
Читать больше
Размещено 11/17/2021 09:18:35 От Sergey Suvorov
It seems like most of the warnings are generated by the Mobile Contact Object
Can you attempt to remove this object just temporarily and see if the result is any different?
Please try this out and keep me posted here
Похоже, что большинство предупреждений генерируется объектом мобильного контакта.
Можете ли вы попытаться удалить этот объект на время и посмотреть, изменится ли результат?
Пожалуйста, попробуйте это и держите меня в курсе здесь
Читать больше
Размещено 11/17/2021 13:53:34 От Stefano G.
Sergey Suvorov
User
Автор
Ты имеешь ввиду мини чат?
Читать больше
Размещено 11/17/2021 14:11:54 От Sergey Suvorov
Sergey Suvorov
User
Автор
Я удалил мини чат и провел диагностику. Да, все ошибки исчезли со всех страниц сайта кроме главной страницы.
Читать больше
Размещено 11/17/2021 14:30:34 От Sergey Suvorov
Sergey Suvorov
User
Автор
https://mango-ekb.club/
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 6211
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 6660
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 7109
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 7558
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 8007
https://mango-ekb.club/index.php
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 6211
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 6660
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 7109
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 7558
Элемент «div» не разрешен как дочерний элемент для «label» в этом контексте.
На строке 446, столбец 8007
Читать больше
Размещено 11/17/2021 14:36:11 От Sergey Suvorov
Sergey Suvorov
User
Автор
Я пока не буду помещать на сайт мини чат.
Читать больше
Размещено 11/17/2021 14:38:02 От Sergey Suvorov
Thank you for your report
I can see that these are generated by specific codes of the Content Slider Object
I’ve notified the developers of this so that they can take a look at it
Спасибо за ваш доклад
Я вижу, что они генерируются определенными кодами объекта Content Slider.
Я уведомил разработчиков об этом, чтобы они могли взглянуть на это
Элемент ul не разрешен как дочерний элемент для ul в этом контексте
HTML-элемент используется для неупорядоченного списка — в частности для маркированного списка.
Интерактивный пример
Свойства
Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от user agent и не работает со всеми браузерами.
Предупреждение: Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте CSS. Для схожего эффекта с compact , подойдёт свойство CSS line-height с значением 80% .
Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под HTML3.2 и переходными на HTML 4.0/4.01 являются:
- circle
- disc
- square Четвёртый маркер задан в интерфейсе WebTV, но не все браузеры смогут его отобразить: triangle .Если данный атрибут отсутствует и если атрибут CSSlist-style-type (en-US) не присвоен к данному элементу, пользовательский агент (user agent) выберет маркер в зависимости от вложенного уровня в списке.
Предупреждение: Не используйте этот атрибут, ибо он устаревший; используйте свойство CSS list-style-type (en-US).
Примечания об использовании
-
Элемент
-
используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, непорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS, используя свойство list-style-type (en-US).
Элементы
-
и могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между
и
-
без ограничений.
Элементы и
-
используются для списков. Различие лишь в том, что в элементе порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент , в противном случае используйте
-
.
Примеры
Простой список
ul> li>first itemli> li>second itemli> li>third itemli> ul>
Результат HTML кода выше: