Dab tsi yog qhov txawv ntawm CSS selector class thiab id? id thiab chav kawm siv hauv HTML

Dab tsi yog qhov txawv ntawm CSS selector class thiab id? id thiab chav kawm siv hauv HTML

Chen Weiliangtam sim no uaSEO, optimize qhov chawWordPressntsiab.

Txawm hais tias kuv tau kawm qee yam kev paub HTML thiab CSS ua ntej, tab sis kuv tsis tau ua haujlwm rau ib ntus, tshwj xeeb tshaj yog kev siv CSS, nws yooj yim tsis nco qab.

Yog li, sau thiab xaus qhov sib txawv thiab kev siv CSS selector id thiab chav kawm ntawm no:

• id sib raug rau #div
• chav kawm sib raug rau .div

Qhov txawv ntawm id thiab chav kawm

id piav

• id yog ib daim ntawv ruaj khov, uas yog siv los txheeb xyuas cov qauv loj dua hauv nplooj ntawv web, uas tau txhais hauv daim ntawv #div
• Piv txwv li: faib kab, sab saum toj, lub cev, hauv qab, thiab lwm yam ...
• Siv los txhais cov ntsiab lus tshwj xeeb, uas tuaj yeem tshwm sim ib zaug hauv ib nplooj ntawv thiab tsis tuaj yeem hu rov qab.

chav piav qhia

• Chav kawm yog ib pawg style, uas yog siv los txheeb xyuas cov ncauj lus kom ntxaws hauv nplooj ntawv web.
• Piv txwv li: ib daim ntawv qhia tshwj xeeb, kab ntawv, thiab lwm yam ...
• Nyob rau tib nplooj ntawv, nws tuaj yeem raug hu rov qab los ntawm ntau lub ntsiab lus

Tus div selector nws tus kheej tsis muaj zog los ntawm kev txhais nws cov css, nws tswj qee qhov kev teeb tsa xws li qhov dav, qhov siab, xim tom qab thiab cov ntawv loj ntawm div.

DavE-kev lag luamlub vev xaib,tsim lub vev xaibhtml nplooj ntawv web tsim los ntawm qhov kev pab cuam yog kom paub cov nplooj ntawv layout los ntawm CSS.

Tus selector yog dab tsi?

Lub ntsiab txhais ntawm txhua CSS style muaj 2 ntu:

选择器 {样式}

• Qhov ua ntej ntawm {} yog "selector".
• Tus "selector" qhia qhov "style" ntawm {} uas nws ua.
• Qhov ntawd yog, nyob rau lub caij twg ntawm nplooj ntawv web no "style" ua haujlwm?

Qauv piv txwv

Nov yog yuav ua li cas xaiv thiab style ib chav kawm = "sidebar" caij:

.sidebar
{ 
background-color:black;
}

Nov yog yuav ua li cas xaiv thiab style ib lub caij nrog id="footer":

#footer
{ 
background-color:black;
}