Вот пример, поле ответа bbPress. Селектор №1 на панели html во всплывающей подсказке, если навести элемент:
textarea#bbp_reply_content.bbp-the-content.wp-editor-area
Я предполагаю, что вы имеете в виду панель HTML в инструментах разработчика браузера. Представление HTML здесь сосредоточено на элементе , который вы просматриваете , и покажет имя элемента, любой ID и любые Классы , которые могут влияет на выбор (например, идентификатор должен быть уникальным, и вы можете иметь множество одинаковых элементов с одинаковыми, похожими или совершенно разными наборами классов). Таким образом, результат, который вы здесь получаете, зависит от контекста, в котором вы находитесь, и того, на что вы действительно смотрите:
ElementName.ID.ClassName(s)
Вы не запрашиваете полный селектор, чтобы получить этот элемент, вы просто запрашиваете этот точный элемент . Любые предки не важны для того, что вы спрашиваете.
Однако, хотя этот будет действительным селектором, опасно называть его селектором по той же причине, что и выше; если вы ищете селектор, который будет использоваться для указания определенного элемента c, в CSS будут упущены все виды, которые влияют на применение стилей. Каскадные стили / приоритет, специфичность и многое другое могут привести к сбою такой строки, если она используется в качестве селектора.
селектор # 2, скопированный как "CSS Селектор" из контекстного меню правой кнопки мыши. элемент в dev tools html pane:
div.wp-editor-container:nth-child(1) > textarea:nth-child(2)
Это также селектор, и, как вы можете видеть, он получил больше информации, прежде чем перейти к элементу "textarea". Тем не менее, он по-прежнему фокусируется на контексте "HTML content" для этого указанного c элемента ... его не волнуют идентификаторы или классы, которые могут быть назначены конечному элементу. Он просто говорит: «Дайте мне селектор CSS, который при прочих равных условиях выберет этот элемент».
Трудно сказать, поскольку в качестве первого примера это другой элемент, и мы не можем видеть полную разметку страницы, которую вы используете для своего примера, но я предполагаю, что это div верхнего уровня внутри тела ... либо единственный, либо единственный с этим классом , Браузер предоставляет вам достаточно информации, чтобы убедиться, что вы не ошиблись с go в другой кроличьей норе элементов.
Номер 3 на панели стилей инструментов разработчика:
#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content
Это селектор CSS, который кто-то написал в файле CSS. Он появляется, потому что это селектор, который применяется к выбранному вами элементу. Я уверен, что есть и другие, даже если они просто стили браузера по умолчанию. Например, если вы посмотрите в этом месте элемент на любой странице переполнения стека, вы, вероятно, увидите целый ряд записей:
В то время как два других сгенерированы из браузера, этот селектор является тем, который человек решил использовать и выписал на основании своего желания специфичности и других требований к стилям, которые он хотел применить к этому элементу.