jquery获取页面所有标题，构建标题树，分别用css和vue展示出来

要使用 CSS 和 Vue.js 来展示页面标题树，您可以按照以下步骤进行操作：

1. 首先，使用 jQuery 获取页面中的所有标题元素，并构建标题树。您可以使用之前提供的代码来实现这一步骤。

2. 使用 CSS 样式来展示标题树。您可以为每个标题元素设置不同的样式，以区分它们的层级关系。例如，您可以使用缩进、不同的字体大小或颜色等方式来呈现标题的层级结构。

3. 使用 Vue.js 来动态渲染标题树。通过创建一个 Vue 实例，并将标题树作为数据传递给 Vue 实例。然后，在 Vue 实例中使用递归组件的方式来渲染标题树。

以下是一个示例代码，演示如何使用 CSS 和 Vue.js 来展示页面标题树：

HTML：

<div id="app">
  <tree-node :node="titleTree"></tree-node>
</div>

CSS：

.tree-node {
  margin-left: 10px;
}

.tree-node h1 {
  font-size: 24px;
  font-weight: bold;
}

.tree-node h2 {
  font-size: 20px;
  font-weight: bold;
}

.tree-node h3 {
  font-size: 16px;
  font-weight: bold;
}

/* 根据需要定义更多层级的样式 */

Vue.js：

Vue.component('tree-node', {
  props: ['node'],
  template: `
    <div class="tree-node">
      <h1>{{ node.text }}</h1>
      <tree-node v-for="child in node.children" :node="child" :key="child.text"></tree-node>
    </div>
  `
});

new Vue({
  el: '#app',
  data: {
    titleTree: // 标题树数据，根据您的实际情况进行填充
  }
});

在上述代码中，我们定义了一个名为 `tree-node` 的 Vue 组件，用于渲染标题树。该组件接收一个 `node` 属性，该属性表示当前节点的数据。在组件的模板中，我们使用递归的方式来渲染子节点，并根据节点的层级应用不同的样式。

最后，我们创建了一个 Vue 实例，并将标题树作为数据传递给该实例的 `titleTree` 属性。然后，在页面中的 `#app` 元素内使用 `tree-node` 组件来渲染标题树。

请注意，您需要在页面中引入 Vue.js 和 jQuery 库才能运行上述代码。同时，您需要根据实际情况来填充标题树的数据。