A CSS-ben kiválasztott elemekre megírt stílusok az előbbi leckében leírt sokféle kiválasztásnak köszönhetően lehetnek közösek, sokszor leírtak (duplák), és egyediek is, ezért a CSS feldolgozása során a böngésző el kell tudja dönteni, hogy melyik stílust kell alkalmaznia. pl:

    div,
    .product
    {
        font-size: 14px;
        color: "red"
    }
    .product div
    {
        color: "green"
    }


        

Ez abban az esetben okoz a legnagyobb problémát, ha két különböző stílusban két különböző értéket adunk, mint a fenti példában, mindkét esetben megváltoztatjuk a ".product div" számára a betűk színét.

Ezen problémák elkerülése érdekében hozták be a pontozási rendszert, mely segít eldönteni, hogy melyik stílus lesz az amit a böngésző alkalmazzon.

Működése egyszerű: minden kiválasztás (selector) kap egy pontot, ami a benne levő selector-ok pontjainak összegéből számolódik ki.

A pontozás lényege, hogy a nagyon általánosan meghatározott selector-ok alacsony pontszámmal rendelkeznek, ahogy egyre jobban szűkítik a kört, egyre nagyobb pontszámmal.

A pontozás az alábbi módon néz ki:

Tehát az első példát véve, ha összeadjuk a pontokat a következőket kapjuk:

    div = 1 pont

    .product = 10 pont

    .product div = 10 + 1 = 11 pont

    div .product = 10 + 1 = 11 pont

    div.product = 10 + 1 = 11 pont


        

Így az eredményből tudjuk, hogy az összes dívben a betűk színe piros lesz, ahol viszont a div egy másik elemben található melynek osztálya "product", akkor a div elemben a betűk színe zöld lesz.

A betűk mérete a div elemekre és a product osztállyal rendelkező elemekre is vonatkozik, így bíztos, hogy arra a div elemre is vonatkozni fog amely a product osztállyal rendelkező elem al elemei között található.

Fontos tudnivaló, hogy amennyiben egy adott elemre több selector hivatkozik, melyeknek pontszáma megegyezik, abban az esetben az lesz érvényes amelyik utoljára hajtódik végre (a css tartalom végéhez közelebb áll).

Azt is fontos tudni, hogy amennyiben egy adott elem örököl egy tulajdonságot (pl. betű méretet), és az elemre direkt is meg van határozva betű méret, ez esetben a direkt lesz a fontosabb.

    div.product
    {
        font-size: 14px;
    }

    span
    {
        font-size: 10px;
    }


        

Például a fenti esetben a div-ünk és a span-unk is rendelkezik egy betű mérettel. Amennyiben a HTML szerkezetünk úgy van össze állítva, hogy a span benne van a div-ben, melynek van product osztálya, akkor a span elem örökli a div-nek meghatározott 14px-es betű méretet, melynek a pontszáma erősebb, mint a span pontszáma, a span betű mérete mégis 10px lesz, mert az direkt neki szól, nem örökölte.