Uyini umehluko phakathi kwekilasi lesikhethi se-CSS kanye ne-id? i-id kanye nokusetshenziswa kwekilasi ku-HTML

Uyini umehluko phakathi kwekilasi lesikhethi se-CSS kanye ne-id? i-id kanye nokusetshenziswa kwekilasi ku-HTML

U-Chen Weiliangesebenzayo njengamanjeSEO, thuthukisa isayithiWordPressindaba ephathwayo.

Nakuba ngike ngafunda ulwazi oluthile oluyisisekelo lwe-HTML ne-CSS ngaphambili, kodwa angikaze ngilusebenzise isikhathi, ikakhulukazi ukusetshenziswa kwengxenye ye-CSS, kulula ukukukhohlwa.

Ngakho-ke, rekhoda futhi ufingqe umehluko nokusetshenziswa kwe-id yesikhethi se-CSS nekilasi lapha:

• i-id ihambisana ne-#div
• ikilasi lihambisana ne-.div

Umehluko phakathi kwe-id nekilasi

incazelo ye-id

• I-id iyithegi egxilile, esetshenziselwa ukuchaza isitayela esikhulu ekhasini lewebhu, esichazwa ngendlela ye-#div.
• Isibonelo: ukuhlukanisa amakholomu, phezulu, umzimba, phansi, njll...
• Isetshenziselwa ukuchaza into ethile, engavela kanye kuphela ekhasini futhi engakwazi ukubizwa ngokuphindaphindiwe.

incazelo yekilasi

• Ikilasi yiqembu lesitayela, elisetshenziselwa ukuchaza izitayela ezinemininingwane ekhasini lewebhu. Lichazwa ngendlela ye-.div futhi lingaphinda.
• Isibonelo: imenyu ethile, umugqa wombhalo, njll...
• Ekhasini elifanayo, lingabizwa ngokuphindaphindiwe ngezakhi eziningi

Isikhethi se-div ngokwaso asinazo izici. Ngokuchaza i-css yayo, ilawula ezinye izakhiwo ezifana nobubanzi, ubude, umbala wangemuva nosayizi wombhalo we-div.

OkujwayelekileE-commerceiwebhusayithi,yakha iwebhusayithiIkhasi lewebhu le-html elakhiwe uhlelo elokubona ukwakheka kwekhasi nge-CSS.

Yini isikhethi?

Incazelo yesitayela ngasinye se-CSS iqukethe izingxenye ezi-2:

选择器 {样式}

• Ingxenye engaphambi kwe-{} "isikhethi".
• "Isikhethi" sibonisa "isitayela" se-{} esisebenza kuso.
• Okungukuthi, iyiphi ingxenye yekhasi lewebhu lapho lesi "sitayela" sisebenza khona?

Isibonelo sekhodi

Nansi indlela yokukhetha nokwenza isitayela isigaba="sebha eseceleni":

.sidebar
{ 
background-color:black;
}

Nansi indlela yokukhetha nokwenza isitayela isici nge-id="footer":

#footer
{ 
background-color:black;
}