සංකීර්ණ CSS තේරීම් කාණ්ඩකරණය කිරීමේදී දෝෂය

කාණ්ඩකරණය කිරීමේදී කොමාවකින් වෙන් කරනු ලබන සියල්ල, සම්පූර්ණ තේරීමක් නිරූපණය කළ යුතුය. අපි බලමු මෙහි දෝෂයක් සිදු කළ හැකි ස්ථානය කුමක්ද කියා.

අපට මේ වගේ කේතයක් ඇතැයි සිතමු:

css#block h2 {
  color: red;
}
#block h3 {
  color: red;
}

අපි තේරීම් දෙක එක කාණ්ඩයකට එකතු කරමු. කාණ්ඩකරණය කිරීමේ නිවැරදි ආකාරය මෙයයි:

css#block h2, #block h3 {
  color: red;
}

කාණ්ඩකරණය කිරීමේ වැරදි ආකාරය මෙයයි:

css#block h2, h3 {
  color: red;
}

මෙම වැරදි කාණ්ඩකරණ ආකාරයේදී, ආරම්භකයින්ට කිසියම් හේතුවක් නිසා හැඟෙන්නේ #block යනු h2 සහ කොමාවට පසුව ඇති h3 දෙකටම අදාළ වන බවයි. නමුත් තේරීම් කොමාවක් හරහා ක්‍රියා නොකරන අතර ප්‍රායෝගිකව මෙම වැරදි කාණ්ඩකරණ ආකාරය මෙසේ නැවත ලිවිය හැකිය:

css#block h2 {
  color: red;
}
h3 {
  color: red;
}

අපි කෙටි කිරීම ආරම්භ කළ මුල් ආකාරය සමඟ සසඳන්න:

css#block h2 {
  color: red;
}
#block h3 {
  color: red;
}

css#block h1 {
  text-align: center;
}
#block h2 {
  text-align: center;
  color: blue;
}
#block h3 {
  text-align: center;
  font-size: 16px;
  color: red;
}

css#block h1.eee {
  text-align: center;
  font-size: 30px;
}
#block h2.zzz {
  text-align: center;
  font-size: 20px;
}

css.xxx .kkk {
  text-align: center;
}
.eee h2.zzz {
  text-align: center;
}
#eee h2 {
  text-align: center;
}

css.eee h2.zzz {
  text-align: center;
}
.xxx {
  text-align: center;
}