Ok, after trying a bunch of stuff, I'm lost. I really would like auto-generated TOCs but the example one from the CSS3 docs I found certainly didn't work. Manually generated tables aren't either. I have:

<div id="toc">
  <h1>Table of Contents</h1>
  <a href="#section1"></a>
  <a href="#section1.1"></a>
</div>

h1 id="section1">Section 1</h1>

...

#toc a {
  display: block;
  content: target-content(attr[href]);
}

#toc a::after {
  content: leader('. ') target-counter(attr[href], page);
}

and as far as I can tell from the documentation and other threads that should work. But it doesn't. There are no errors in the error logs.

Ideally I want to auto-generate my TOC from the h1/h2 tags (that all have specific classes).

What's wrong?

Use attr(href), not attr[href] and it should work.

Woops. Think I'm getting my wires crossed with jQuery syntax or something.