要实现将HTML上的类名和ID名自上到下打印到指定的CSS文件，我们可以使用JavaScript和jQuery库来完成这个任务，以下是详细的教学内容：

我们需要在HTML文件中引入jQuery库，确保页面已经加载完毕，使用JavaScript编写一个函数，该函数可以遍历HTML元素，获取所有的类名和ID名，并将它们打印到指定的CSS文件中。

以下是一种实现方法：

1、在HTML文件中引入jQuery库：

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

2、编写一个JavaScript函数，用于获取HTML元素的类名和ID名：

function printClassAndIdNames() {
  // 获取所有HTML元素
  const allElements = $('*');
  // 初始化一个空数组，用于存储类名和ID名
  const classAndIdNames = [];
  // 遍历所有HTML元素
  allElements.each(function () {
    // 获取元素的类名和ID名
    const classNames = $(this).attr('class').split(' ');
    const idNames = $(this).attr('id').split(' ');
    // 将类名和ID名添加到数组中
    classAndIdNames.push({
      classNames: classNames,
      idNames: idNames,
    });
  });
  // 打印数组到控制台
  console.log(classAndIdNames);
}

3、调用上述函数，打印HTML元素的类名和ID名：

$(document).ready(function () {
  printClassAndIdNames();
});

4、如果您希望将结果打印到指定的CSS文件中，可以使用以下方法：

function printClassAndIdNamesToCss() {
  // 获取指定CSS文件的路径
  const cssFilePath = 'path/to/your/css/file.css';
  // 获取CSS文件对象
  const cssFile = document.createElement('style');
  cssFile.type = 'text/css';
  cssFile.id = 'printedclassidnames';
  cssFile.innerHTML = '';
  // 创建一个函数，用于将数组内容添加到CSS文件中
  function addArrayToCss(array) {
    for (const item of array) {
      const className = Object.values(item).join(' ');
      cssFile.innerHTML += .${className}\n;
    }
  }
  // 初始化一个空数组，用于存储类名和ID名
  const classAndIdNames = [];
  // 遍历所有HTML元素
  $('*').each(function () {
    // 获取元素的类名和ID名
    const classNames = $(this).attr('class').split(' ');
    const idNames = $(this).attr('id').split(' ');
    // 将类名和ID名添加到数组中
    classAndIdNames.push({
      classNames: classNames,
      idNames: idNames,
    });
  });
  // 将数组内容添加到CSS文件中
  addArrayToCss(classAndIdNames);
  // 将CSS文件添加到HTML文档中
  document.head.appendChild(cssFile);
}
// 调用上述函数，将结果打印到指定的CSS文件中
$(document).ready(function () {
  printClassAndIdNamesToCss();
});

通过以上代码，您可以实现在HTML文件加载完成后，将所有HTML元素的类名和ID名打印到指定的CSS文件中，需要注意的是，此示例仅适用于简单的HTML结构，对于更复杂的HTML结构，您可能需要对代码进行一些调整，以确保正确地遍历和处理所有元素，根据实际需求，您还可以自定义打印规则，例如选择特定的类名或ID名进行打印。