Күрделі CSS селекторларын топтау кезіндегі қате
Топтау кезінде үтірмен бөлінген барлығы толыққанды селектор болуы керек. Мұнда қандай қате жіберуге болатынын қарастырайық.
Бізде мынайдай код бар делік:
#block h2 {
color: red;
}
#block h3 {
color: red;
}
Екі селекторды бір топқа біріктірейік. Міне, дұрыс топтау нұсқасы:
#block h2, #block h3 {
color: red;
}
Ал мынау - дұрыс емес топтау нұсқасы:
#block h2, h3 {
color: red;
}
Бұл дұрыс емес топтау нұсқасында
жаңадан бастаушыларға неге болмасын, #block
h2-ге де, үтірден кейін тұрған h3-ке де
қатысты деп көрінеді. Бірақ селекторлар
үтір арқылы әрекет етпейді және іс жүзінде бұл дұрыс емес
топтау нұсқасын мынадай түрде қайта жазуға болады:
#block h2 {
color: red;
}
h3 {
color: red;
}
Біз қысқарта бастаған бастапқы нұсқамен салыстырыңыз:
#block h2 {
color: red;
}
#block h3 {
color: red;
}
Селекторларды топтауды пайдаланып, кодты жеңілдетіңіз:
#block h1 {
text-align: center;
}
#block h2 {
text-align: center;
color: blue;
}
#block h3 {
text-align: center;
font-size: 16px;
color: red;
}
Селекторларды топтауды пайдаланып, кодты жеңілдетіңіз:
#block h1.eee {
text-align: center;
font-size: 30px;
}
#block h2.zzz {
text-align: center;
font-size: 20px;
}
Селекторларды топтауды пайдаланып, кодты жеңілдетіңіз:
.xxx .kkk {
text-align: center;
}
.eee h2.zzz {
text-align: center;
}
#eee h2 {
text-align: center;
}
Селекторларды топтауды пайдаланып, кодты жеңілдетіңіз:
.eee h2.zzz {
text-align: center;
}
.xxx {
text-align: center;
}