在代码编辑器的4个不同区域中显示的CSS选择器之间有什么区别？

Question

我知道在浏览器代码检查器中确定元素选择器的4种方法：

1. 在检查器的html窗格中找到选择器

2. 将鼠标悬停在html窗格中的选择器上，将弹出一个工具提示，其中将显示选择器，但它会比html窗格中显示的选择器更为冗长或不同。]]

3. 在检查器的样式窗格中找到未显示为灰色的选择器

4. 右键单击html窗格中的选择器，然后单击“复制选择器”，这将是具有更高特异性的选择器

通常，同一元素的选择器的所有4个版本具有不同的格式或特异性。

我想知道这四个版本之间的理论区别是什么？

这里是一个示例，bbPress回复框。如果将鼠标悬停在html窗格中的工具提示中，则选择器＃1：

textarea#bbp_reply_content.bbp-the-content.wp-editor-area
从开发工具html窗格中的元素的右键菜单中，选择器＃2复制为“ CSS选择器”：

div.wp-editor-container:nth-child(1) > textarea:nth-child(2)
开发工具样式窗格中的＃3：

#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content
3非常不同的格式和不同的特异性。我想知道这三个之间的理论区别是什么？

我知道在浏览器代码检查器中确定元素选择器的4种方法：将选择器放在检查器的html窗格中，将鼠标悬停在html窗格中的选择器上方，然后将出现工具提示...]]

Answer 1

这里是一个示例，bbPress回复框。 HTML中的选择器＃1窗格，如果您将鼠标悬停在元素上，则在工具提示中：

textarea#bbp_reply_content.bbp-the-content.wp-editor-area