@page rules applied for setting different styles are not taking effect as intended.

[jiang0112]

I want to set a different style for the same element on the first page compared to the other pages, but the following approach doesn't seem to work.

bug
code.txt

[MurakamiShinyu]

That is not possible in the current CSS Paged Media specification. The @page rule cannot contain style rules. See the spec: https://drafts.csswg.org/css-page-3/#at-page-rule

[jiang0112]

When my content is filled in, the page automatically paginates, but I need the first and second pages to have different styles. How can I achieve this?

[MurakamiShinyu]

Vivliostyle.js supports the ::nth-fragment() pseudo-element. So you can use it to apply different styles to the first and second pages. For example, you can use the following CSS:

.base-evaluation::nth-fragment(1) {
  color: blue;
  width: 600px;
}

.base-evaluation::nth-fragment(n+2) {
  color: black;
  width: 800px;
}

Test: https://vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/fb6ae3973843bf6cd3fd5dca5b5dee5c/raw/issue1330-code-fix.html

By the way, I found a typo in your CSS code: text-transform: uppercasse; should be text-transform: uppercase;.
Also, I think <script src="../../../dist/paged.polyfill.js"></script> is unnecessary in the HTML code. Vivliostyle.js tries to handle scripts but it may cause unexpected results.