Steve Souders' aforementioned tests use JavaScript’s new Date(). However, nowadays, modern browsers (iOS/Safari were a notable exception at the time of testing) support the Navigation Timing API (https://www.w3.org/TR/navigation-timing/) which gives us a more accurate measure we can use. For the tests, I implemented it like this:

<script>
    ;(function TimeThisMother() {
        window.onload = function(){
            setTimeout(function(){
            var t = performance.timing;
                alert("Speed of selection is: " + (t.loadEventEnd - t.responseEnd) + " milliseconds");
            }, 0);
        };
    })();
</script>

This lets us limit the timing of the tests between the point all assets have been received (responseEnd) and the point the page is rendered (loadEventEnd).

So, I set up a very simple test. 20 different pages, all with an identical, enormous DOM, made up of 1000 identical chunks of this markup:

<div class="tagDiv wrap1">
  <div class="tagDiv layer1" data-div="layer1">
    <div class="tagDiv layer2">
      <ul class="tagUl">
        <li class="tagLi"><b class="tagB"><a href="/" class="tagA link" data-select="link">Select</a></b></li>
      </ul>
    </div>
  </div>
</div>

20 different CSS selection methods were tested to colour the inner most nodes red. Each page differed only in the rule applied to select the inner most node within the blocks. Here were the different selectors tested and a link to the the test page for that selector:

The test was run 5 times on each browser and the result averaged across the 5 results. The browsers tested:

A previous version of Internet Explorer (rather than the latest Internet Explorer available to me) was used to shed some light on how a non evergreen browser performed. All the other browsers tested received regular updates so I wanted to be sure that there wasn't a considerable difference in the way modern regularly updating browsers deal with CSS selectors and how slightly older ones do.

Here are the results. All times in milliseconds: