What does a pipe (|) do in a CSS selector?

It separates namespace and element name.

Unless a default namespace has been defined, *|*:link is a complicated way of writing *:link or just :link.

In an XML document, you could have the following:

<el xmlns="http://name/space" />
<style>
@namespace namespace_example url(http://name/space);
namespace_example|el {background: red;}
</style>