예제를 보면서 개별성 규칙에 따라 어떻게 점수를 계산하는지 자세히 살펴봅시다. 다음 코드는 서로 다른 선택자 방식으로 h1 태그에 color 속성을 적용하고 있습니다. 하지만 결국 h1 태그에 적용된 색상은 파란색(blue)입니다. 파란색이 적용된 이유는 개별성 규칙에 따라 클래스 선택자는 0010(10점), 태그 선택자는 0001(1점)이 되어 점수가 높은 클래스 선택자가 적용됐기 때문입니다.
<style>
.title{color:blue} /* 0, 0, 1, 0 */
h1{color:red} /* 0, 0, 0, 1 */
</style>
</head>
<body>
<h1 class="title">h1</h1>
</body>
선택자에 따른 개별성 점수를 표시하는 예제를 몇 개 더 살펴봅시다. 개별성 규칙은 선택자 문법에서 각 선택자가 몇 번 사용됐는지에 따라 점수를 계산하므로 다음과 같은 결과가 나옵니다.
<style>
nav > h2{} /* 0, 0, 0, 2 */
nav .title{} /* 0, 0, 1, 1 */
#main .sub{} /* 0, 1, 1, 0 */
a:hover{} /* 0, 0, 1, 1 */
a:hover span::first-letter{} /* 0, 0, 1, 3 */
</style>