有点晚了但是...

for (let link of document.querySelectorAll("link, style")) {
    try {
      if (!link.sheet) {
        console.warn("Warning:", "Property 'sheet' is not set on element", link)
      } else
        for (let rule of link.sheet.rules) {
          console.log(rule.selectorText)
        };
    } catch (e) {
      console.warn("Warning:", e.message, ". Try set crossorigin='anonymous' on element", link)
    }
  };

或者在Chrome开发工具窗口（F12）中，找到“元素”，然后找到“样式”选项卡。在“过滤器”文本框的右侧有一个“.cls”选项。单击它，应该会出现一个“添加新类”输入。聚焦该输入并按Ctrl + Space。应该会出现当前打开的文档中所有类样式的选择列表。
它看起来像这样：

在Chrome开发工具中，您可以使用元素选项卡选择元素，然后转到“计算”选项卡，该选项卡显示每个元素所附加的所有内容。
如果页面很大，有很多元素，你需要查看所有的CSS，我会直接进入元素，查看head或header html元素，然后直接进入文件。根据页面的架构，有些开发人员会把它放在footer元素中，有些则放在内联元素中。
你也可以在chrome开发工具中按CTRL+F，然后写“stylesheet”，它会弹出所有的页面，并附上CSS表单。

是的，基本上您会启动控制台并键入：

document.querySelectorAll("*[class]");

querySelectorAll方法在本例中就像CSS属性选择器一样工作。

以下是我目前的做法：

function getAllClasses() {
  const classSet = new Set();
  const allElements = document.getElementsByTagName("*");
  for (let i = 0, n = allElements.length; i < n; i++) {
    allElements[i].classList.forEach(cls => classSet.add(cls))
  }
  return Array.from(classSet);
}
console.log(getAllClasses())