Բարդ 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;
}