Kiteuzi cha css ni nini. na kipengele kimoja zaidi cha Ndugu au dada. Sheria chache za mtindo

Kiteuzi huamua ni kipengele gani cha kutumia sheria fulani ya CSS.

Wateuzi wa kimsingi

Viteuzi vya Kipengele Kiteuzi hiki cha msingi huchagua kipengele ambacho sheria hiyo itatumika.
Sintaksia:kipengele
Mfano: Kiteuzi cha ingizo kitachagua vipengele vyote vinavyotumika kuunda vidhibiti shirikishi katika fomu za wavuti."> . Viteuzi vya Madarasa Kiteuzi hiki cha msingi huteua vipengele kulingana na thamani ya sifa ya darasa lao.
Sintaksia: .Jina la darasa
Mfano: kiteuzi cha .index kitachagua vipengele vyote vilivyo na darasa linalolingana (ambalo lilifafanuliwa katika sifa ya class="index" au sawa). Viteuzi vya Vitambulisho Kiteuzi hiki cha msingi huteua vipengele kulingana na thamani ya sifa ya vitambulisho vyao. Kumbuka kwamba kitambulisho lazima kiwe cha kipekee, yaani, kitumike kwa kipengele kimoja tu kwenye hati ya HTML.
Sintaksia:#Jina la kitambulisho
Mfano: Kiteuzi #toc kitachagua kipengee chenye id toc (ambayo ilifafanuliwa katika id="toc" sifa au sawa). Kiteuzi cha Universal Kiteuzi hiki cha msingi huchagua vipengele vyote. Pia ipo katika mitaa na nafasi za kimataifa majina
Sintaksia:*ns|* *|*
Mfano: Kiteuzi * kitachagua vitu vyote. Viteuzi vya Sifa Kiteuzi hiki cha msingi huteua vipengele kulingana na mojawapo ya sifa zao na/au thamani yake.
Sintaksia:
Mfano: Kiteuzi kitachagua vipengele vyote vilivyo na sifa ya kucheza kiotomatiki (bila kujali thamani yake).

Wachanganyaji

Kiunganishi cha "+" huchagua kipengee ambacho kinafuata mara moja kipengele maalum, ikiwa wana mzazi wa kawaida.
Sintaksia: A+B
Mfano: kichaguzi cha ul + li kitachagua kipengee chochote ambacho ni mara tu baada ya kipengele

Sintaksia:

Mfano:

, ambazo ziko baada ya kipengele, hufafanua aya ya maandishi.">

ndani ya mzazi mmoja. Viteuzi vya Watoto Kiunganishi cha ">" huteua vipengee ambavyo ni watoto wa karibu wa kipengele kilichobainishwa.
Sintaksia: A>B
Mfano: selector ul > li itachagua vitu vyote vilivyo ndani ya kipengee

Sintaksia:

Mfano:

muda wa div

, ambazo ziko ndani ya kipengele) ni chombo cha msingi cha vipengele vya maudhui ya mtiririko. Haiathiri maudhui au umbizo hadi iundwe kwa kutumia CSS. Kuwa "> haiwakilishi kitu chochote. Wakati huo huo, inatumika kuweka maudhui katika kikundi, na kuyaruhusu kutengenezwa kwa urahisi kwa kutumia ">

Vipengee vya uwongo

Vipengele vya uwongo ni dhahania, tofauti na vipengee vya HTML ambavyo hutoa wasilisho. Kwa mfano, katika HTML hakuna vipengele vya mtu binafsi kuashiria herufi ya kwanza au mstari wa kwanza wa maandishi, au kitone kwa orodha isiyopangwa. Vipengele vya uwongo vinawakilisha vitu kama hivyo na hutoa uwezo wa kuvitengeneza kwa kutumia CSS.

Madarasa ya uwongo

Madarasa ya uwongo hukuruhusu kuchagua vipengee kulingana na maelezo ambayo hayako kwenye mti wa kipengele, kama vile hali au data nyingine ambayo ni vigumu kutenganisha vinginevyo. Kwa mfano, wanaweza kuchagua kiungo ambacho kimetembelewa au hakijatembelewa hapo awali.

Vipimo

Vipimo	Hali

Seti ya sheria za muundo (ambazo kwa upande wake zinajumuisha wateule walio na kizuizi cha tangazo) zinazotumika kwa lebo fulani za html, kwa sababu ambayo mwonekano wa tovuti huundwa.

Kiteuzi cha CSS-Hii sehemu Sheria za CSS kuwajibika kwa kuamua maalum vitambulisho vya html, ambayo mitindo ya kubuni iliyotajwa katika sheria hii itatumika.

Kwa hivyo, ni shukrani kwa wateuzi kwamba kivinjari kinaelewa ni vipengele vipi vya msimbo wa ukurasa vinahitaji kutumia mitindo maalum ya kubuni.

Zana ya kuchagua kipengele cha CSS ni rahisi kunyumbulika na inafaa kwa kuchagua vipengee vya msimbo mahususi na vikundi vizima vya vipengee vilivyobainishwa na sifa fulani.

Aina za viteuzi vya css

Kama vile sentensi katika maandishi, viteuzi vya CSS vinaweza kuwa rahisi au changamano. Tofauti kati yao ni kwamba ngumu hupatikana kwa kuchanganya kadhaa rahisi na hutumiwa kwa zaidi urekebishaji mzuri muundo wa mwisho wa rasilimali.

Tofauti pekee maandishi ya kawaida katika laha za mtindo wa kuachia, ni muhimu kwa mpangilio gani na wateuzi gani tunaotumia. Kwa kuongezea, hii itaamua sio tu ni vitu gani tunachagua na kulingana na vigezo gani, lakini pia kasi ya usindikaji wa nambari yetu kwa ujumla, lakini tutazungumza juu ya hila katika nakala zaidi.

Wateuzi rahisi

Kiteuzi cha jumla - ni wajibu wa kuchagua vipengele vyote kwenye hati. Imebainishwa na nyota. Kawaida hutumiwa kuweka upya mitindo chaguo-msingi ya vivinjari, ili kila mtu anayetembelea tovuti asipoteze muundo wake ikiwa anatumia baadhi. mipangilio yako mwenyewe kivinjari au programu jalizi mbalimbali...
* (mtindo fulani;)
Kiteuzi cha aina - huchagua lebo zote zinazolingana aina fulani. Imebainishwa na jina la lebo. Inatumika kwa kazi kanuni za jumla kubuni hati, kwa mfano, kuweka fonti tofauti vichwa na maandishi wazi hati.
h1 (mtindo fulani;)
- itatumia sheria ya css kwa vitambulisho vyote jina maalum darasa. Imebainishwa na kitone chenye jina la darasa lililoandikwa mara baada yake. Labda kichaguzi cha kawaida katika mpangilio. Kawaida hutumiwa kuweka mitindo tofauti ya kubuni kwa vitambulisho vya aina moja, lakini tofauti katika utendaji.
Safu wima ya kushoto (mtindo fulani;)
Kiteuzi cha kitambulisho - kinatumika kuunda vipengee vya kipekee kwenye ukurasa. Inabainishwa na heshi ikifuatiwa na kitambulisho cha jina. Inatumika ikiwa unahitaji kutoa moja kipengele maalum kurasa.
#alertButton (mtindo fulani; )
- huchagua lebo ambazo zina sifa. Imebainishwa na jina la sifa katika mabano ya mraba. Inaweza kutumika kutengeneza kundi la vitambulisho ambalo ndani yake kuna a sifa hii, na kwa kikundi cha lebo ambazo zina sifa fulani yenye thamani maalum.
[ type] ( mtindo fulani; ) [ type= "submit" ] ( style fulani; ) input[ type= "submit" ] ( mtindo fulani; )

Wateuzi tata

Kiteuzi cha ukoo - huchagua vipengee vya ukoo (vitambulisho vilivyo ndani ya lebo nyingine). Imeainishwa kutengwa na nafasi (mzazi - nafasi - mtoto).
div p (mtindo fulani;)
Kiteuzi cha kipengee cha mtoto - huchagua kipengee kilichowekwa moja kwa moja ndani ya kipengele kingine. Imebainishwa na ">" ishara (mzazi-angalia-mtoto). Kipengele cha mtoto hutofautiana na kipengele cha kizazi kwa kuwa huja mara moja baada ya mzazi (kiwango cha kwanza cha kuota). Wakati mtoto anachukuliwa kuwa lebo yoyote ndani ya mwingine, bila kujali kiwango cha kuatamia.
Sidebar>ul (mtindo fulani;)
Kiteuzi cha kipengee dada - huchagua lebo inayokuja mara moja baada ya lebo nyingine (haijafungwa ndani, lakini kwenda mbele zaidi). Imeainishwa na nyongeza (kipengele cha kwanza - pamoja na - kipengee cha dada). Katika mazoezi ni mara chache kutumika. Hali inayohitajika maombi ni uwepo wa mzazi wa kawaida kwa vipengele vyote pamoja na ishara "+".
h1+ p (mtindo fulani;)

Madarasa ya uwongo na vipengele vya uwongo

Uainishaji wa hapo juu wa viteuzi vya CSS ulitegemea tu alama za hati. Ikiwa tunataka kuweka mabadiliko mwonekano vipengele kulingana na mabadiliko katika hali yake kwenye ukurasa (kwa mfano, kubadilisha rangi ya kifungo kwenye hover), basi tunaweza kutumia pseudo-classes na pseudo-elements selectors.

Kumbuka kuwa tofauti na html in Kesi ya CSS barua ni muhimu. Yaani, class.active na .Active si kitu kimoja! Wataomba kwa vipengele tofauti, ikiwa zipo kwenye hati.
Taja viteuzi vya kutengeneza mitindo ili usije kuchanganyikiwa navyo baadaye: .leftColumn - jina zuri, .kushoto - inategemea hali hiyo, lakini si kweli, .llll - aina fulani ya takataka, wewe mwenyewe unaweza kusema bila kuangalia msimbo ambapo darasa hili lilitoka wapi?
Acha nikukumbushe tena - ikiwa kuna kitu kimoja tu kwenye ukurasa, na yote ni ya kipekee, basi tunatumia id kwa hiyo, lakini ikiwa kuna uwezekano kwamba nyingine itaonekana, au kuna vitu kadhaa sawa kwenye ukurasa, kisha utumie madarasa kwa muundo.

Kwa muhtasari

Viteuzi katika CSS-Hii chombo chenye nguvu zaidi utambulisho wa vipengele fulani vya ukurasa au kikundi cha vipengele vilivyounganishwa na sifa maalum kwa matumizi zaidi ya mitindo ya kubuni kwao kutoka kwenye kizuizi cha tangazo kinachohusiana na kiteuzi hiki.

Baada ya mastering kanuni za jumla mwingiliano na kuunda wateule, utasahau juu ya shida na muundo wa hati za wavuti. Maarifa mazuri wateuzi wanaweza kupunguza kwa kiasi kikubwa muda wa mpangilio wa kurasa za html.

Ingawa mada inaonekana kuwa ya kutatanisha kwa mtazamo wa kwanza, inakuwa rahisi na inayoeleweka baada ya muda wa mazoezi, ikiungwa mkono na nadharia ya ubora.

Viteuzi vya CSS ni moja wapo ya sifa kuu Lugha ya CSS. Viteuzi hukuruhusu kufikia kikundi cha vipengee au kimoja tu.

Viteuzi katika CSS

Viteuzi vinahitajika ili kuambia kivinjari ni vipengele vipi vya kutumia mitindo iliyofafanuliwa braces curly.

P (Mitindo…)

KATIKA kwa kesi hii Kiteuzi ni p - tagi ya aya. Sheria hii itaongeza mitindo kwa aya zote kwenye ukurasa wa wavuti.

Ni aina gani za wateuzi wa CSS?

Kiteuzi cha lebo - rahisi zaidi. Imeonyeshwa kwa mfano. Ili kuiandika katika css, unahitaji kuandika jina la lebo bila mabano ya pembe. Mitindo itatumika kwa vipengele vyote vilivyo na lebo hiyo.
Jedwali () - mitindo ya meza zote
Li() - mitindo ya vitu vyote vya orodha
A() - mitindo ya viungo vyote

Darasa la mtindo- unaweza kuambatisha darasa la mtindo kwa kipengele chochote kwenye ukurasa wa wavuti. Hata kwa barua moja. Kisha katika faili ya css unaweza kufikia kipengele hiki kwa kuandika kwa ajili yake mitindo mwenyewe. Ili kufanya hivyo, unahitaji kuweka dot na kuandika jina la darasa la mtindo baada yake. Mifano:
.kuhusu() - sheria zitatumika kwa vipengele vyote vilivyo sifa ya darasa= "kuhusu"
.down() - sheria zitatumika kwa vipengele vyote ambavyo vina darasa = "chini" sifa
.float() - sheria zitatumika kwa vipengele vyote vilivyo na darasa la sifa = "float"

Kama unaweza kuona, jambo kuu ni kutoa hoja. Darasa la mtindo linaweza kufungwa kwa idadi isiyo na kikomo ya vipengele. Kipengele kinaweza kupewa madarasa kadhaa.

Kitambulisho- aina nyingine ya kiteuzi. Kitambulisho kimoja kinaweza kupewa kipengele kimoja tu. Haiwezi kuwa na vitambulishi viwili, na kitambulisho kinachohusishwa na kipengele hiki hakiwezi kusajiliwa popote pengine.

Imewekwa kama hii:

Aya

Hiyo ni, kama darasa, ni sifa pekee inayotumiwa kitambulisho neno lolote hutumika kama maana yake.

Ili kufikia kipengee kilicho na kitambulisho kupitia css, unahitaji kuandika thamani ya kitambulisho na kuweka heshi mbele yake.

#kwanza( Ukubwa wa herufi: 22px)

Tuligeukia aya na id = kwanza. Mtindo utatumika tu kwake. Kwa aya zilizobaki, saizi ya fonti haitabadilika.

Madarasa ya uwongo

Kuna aina moja ya kuvutia ya kiteuzi katika CSS: pseudo-classes. Hiyo ni, madarasa ambayo vipengele vina kwa chaguo-msingi na hazihitaji kuainishwa zaidi. Baadhi yao hufanya kazi tu kwa viungo, wakati zingine zinaweza kutumika kwa vitu vyote. Kwa hali yoyote, madarasa ya uwongo ya CSS huwezesha sana kazi ya msanidi wa wavuti.

Darasa la uwongo ni darasa la mtindo wa kipengee ambacho kwa kweli hatukufafanua wenyewe, kinapatikana peke yake. Kwa mfano, kuona nambari hii katika html:

Aya

Unaweza kusema kabisa kwamba aya hii ina darasa maalum, kwa sababu imeandikwa hapo. Lakini madarasa ya uwongo hayaitaji kuandikwa; vitu vinayo kwa msingi, na hii ndio faida yao katika kesi hii. Ifuatayo, wacha tuangalie maarufu zaidi kati yao.

Kwa viungo

Kwa sehemu za pembejeo na viungo

:focus - Mtindo unatumika kwa kipengele kinachopokea umakini wa ingizo.
Kwa kweli, kuna madarasa mengi mapya ya uwongo ya uga wa pembejeo, lakini yote ni mapya. CSS3, na katika makala hii ningependa kujadili tu rahisi zaidi. Hakika kutakuwa na makala kuhusu wateuzi wa CSS3 katika siku zijazo.

Kwa vipengele vyote

:hover - mtindo unatumika wakati wa kuelea juu ya kipengele
:mtoto wa kwanza - chagua kipengele cha mtoto wa kwanza
:mtoto wa mwisho - kipengele cha mtoto wa mwisho
:nth-child() - Nambari au fomula imeandikwa kwenye mabano ambayo huamua ni vipengele vipi vitachaguliwa.
:aina ya kwanza, :mwisho-wa-aina, :nth-of-type() - fanya kazi karibu sawa na madarasa ya uwongo ya hapo awali. Tofauti pekee ni kwamba aina ya kipengele inazingatiwa hapa. Tofauti inaweza kuonekana katika mfano ufuatao:
li:mtoto wa kwanza - kipengee cha kwanza cha orodha kitachaguliwa, lakini ikiwa tu kipengele cha li kinakuja kwanza kwenye kizuizi cha mzazi. Ikiwa kuna lebo nyingine kabla yake, hakuna kitakachochaguliwa.
li:first-of-type - kipengee cha kwanza cha orodha kutoka kwa yote yaliyo katika mzazi kitachaguliwa. Haijalishi ziko wapi kwenye nambari. Natumai tofauti iko wazi.
:nth-last-child - hufanya kazi sawa na :nth-child, lakini huhesabu kutoka kipengele cha mwisho, si cha kwanza.
:nth-last-of-aina - sawa na :nth-last-child, lakini kwa kuzingatia aina ya kipengele.

Hizi sio darasa zote za uwongo, lakini zile maarufu zaidi na muhimu. Kwa kweli, madarasa yote ya uwongo yamewekwa alama kwa njia sawa katika css, ikitenganishwa na koloni. Kwa kuongeza, unaweza kuchanganya wateule na kupata fursa za kuvutia:
a:visited:active - mitindo ya kiungo ambacho tayari kimetembelewa ambacho kimebofya.
div:first- child:hover - mitindo ya vitalu vyote vya kwanza katika wazazi wao ambavyo vimeelea juu.

Kama unaweza kuona, wateule kama hao hutoa fursa kubwa kwa upande wa mambo ya styling. Zitumie na unaweza kufikia vipengele vyovyote kwa urahisi.

Kuchanganya wateule

Mwingine kanuni muhimu, ambayo unahitaji kujua kuhusu. Wateuzi wa darasa la mtindo wanaweza kuandikwa bila kuwatenganisha kutoka kwa kila mmoja. Kwa mfano:
.darasa la1.darasa2 - litachagua vipengele ambavyo vina madarasa haya yote mawili.
.class1.class3.class8 - itachagua vipengele ambavyo madarasa yote matatu ya mitindo yameambatishwa.

Viteuzi vilivyoorodheshwa

Ikiwa tunatenganisha wateule kutoka kwa kila mmoja na nafasi, tunaweza kufikia kipengele tunachohitaji. Mifano:
Jedwali td - huchagua seli zote kwenye jedwali
Ul li a - huchagua viungo vyote vilivyo katika orodha ya vitu (na orodha ya vitu, kwa upande wake, uongo kwenye orodha wenyewe)
.class1 p - itachagua aya zote zilizo na darasa la sifa = "class1"
.class2 p span - itachagua maudhui yote ya lebo , uongo katika aya na darasa2.

Unaweza kuota na kuchanganya kwa njia hii mara nyingi unavyopenda. Mifano:
#kichwa .muda wa nembo:herufi ya kwanza()- huchagua herufi ya kwanza katika muda wa nembo, ambayo iko kwenye kichwa
.class1.class2:hover() - itafafanua mtindo wa kuelea kwa vipengele ambavyo vina aina zote mbili za mitindo.

Wateuzi wa watoto

Ikiwa unahitaji kuweka mambo ya mzazi mtindo ambayo ni MOJA KWA MOJA tanzu, basi unahitaji kuiandika kama hii:
Ul > li() - itachagua vitu vya orodha ambavyo vimewekwa moja kwa moja ndani yake, na sio kwenye vitambulisho vingine
P > a() - itachagua tu viungo hivyo katika aya ambazo ziko moja kwa moja ndani yao, na ambazo hazijawekwa kwenye vitambulisho vingine (ambavyo, kwa upande wake, tayari vimewekwa katika aya)
Mfano:

Ukiandika kiteuzi kama hiki P > a , mitindo hiyo itatumika kwenye kiunga kilicho kwenye mfano hapo juu? Hapana, kwa sababu bado imewekwa kwenye lebo nyingine, yaani, sio mtoto wa moja kwa moja.

Wateuzi wa karibu

Jambo la mwisho tutaliangalia leo. Ikiwa utaiandika kwa css kama hii:
.class1 + .class4() , kisha kiteuzi hiki kitachagua kipengee chenye sifa class = "class4" , na kipengele hiki lazima kionekane katika msimbo wa HTML mara baada ya kipengele chenye darasa la1. Tu katika kesi hii kila kitu kitafanya kazi. Wacha tuangalie mfano tena:

Je, kiteuzi kilicho hapo juu (.class1 + .class4()) kitafanya kazi? Hapana, kwa sababu vipengele haviko karibu na kila mmoja. Kati yao ni lebo ya img. Ikiwa utaiondoa, basi kila kitu kitafanya kazi.

Kwa hiyo, tumeangalia wateuzi wa msingi na rahisi zaidi. Hakika maarifa haya yatatosha kwako kutatua 95% ya shida. Katika makala inayofuata nitaelezea wateuzi wengine maalum zaidi wa CSS.

Viteuzi vya sifa

Hukuruhusu kuchagua vipengele mahususi bila kuvipa darasa la mtindo au kitambulisho.

Viteuzi vya sifa ni vile viteuzi ambapo sifa au sifa iliyo na thamani imeandikwa katika mabano ya mraba. Mifano michache ili kuiweka wazi:
* - huchagua vipengele vyote ambavyo vina sifa ya href yenye thamani yoyote.
ingizo - huchagua vipengele vyote vya ingizo ambavyo vina sifa ya kuzima (sehemu zote zilizozimwa).
ingizo - huchagua sehemu zote ambazo aina yake ni nenosiri , yaani, sehemu za kuingiza nenosiri.
img - huchagua picha ambayo ina sifa src = "/logo.png" seti.

Kama unaweza kuona, kuandika viteuzi vya sifa za CSS sio ngumu sana. Tofauti yao muhimu zaidi ni mabano ya mraba, ambayo ama sifa rahisi au sifa iliyo nayo thamani halisi. Lakini utendakazi wa wateule hawa hauishii hapo.

Viteuzi vya juu vya sifa za css

Viteuzi vyote vifuatavyo ni nyeti kwa ukubwa.
Tafuta mwanzoni mwa mstari
div - huchagua div zote ambazo zina darasa la mtindo kuanzia "block" . Kwa hiyo, kwa mfano, vitalu vifuatavyo vitachaguliwa: "block-head", "block-3", "blocknote" . Jambo kuu ni kwamba kuna neno la msingi mwanzoni mwa maana.

Kupata mwisho wa mstari
A – huchagua viungo vyote ambavyo anwani yake inaishia kwa .rar . Kwa hivyo, ikiwa unaweza kupakua kitu kwenye wavuti yako, basi unaweza kuongeza ikoni karibu na viungo vyote vya faili zilizohifadhiwa.

Kupata mfuatano mdogo kila mahali katika thamani
span - itachagua vitambulisho vyote vya span ambavyo vina "sanaa" katika jina la darasa lao popote kwa jina. Kwa hivyo, kwa mfano, spans na madarasa yafuatayo yatachaguliwa: chama, clart, sanaa-1.

Tafuta viambishi awali
p - itachagua aya zilizo na darasa la mtindo ambazo zina jina ambalo linalingana kabisa na "kwanza" au ambalo lina kiambishi awali - kinachoanza jina la darasa.

Kutafuta maneno ndani ya maana
pembejeo– itachagua vipengee vyote vya ingizo ambavyo thamani ya sifa ya kitambulisho ina maandishi ya neno . Inatofautiana na kutafuta kamba ndogo kila mahali kwa kuwa ni neno ambalo lazima lijumuishwe, sio kamba ndogo.

Chaguzi mbili za mwisho hazitumiwi sana na haziwezekani kuwa na manufaa kwako mara nyingi, lakini kwa maendeleo ya jumla bado unaweza kujua kuwahusu.

Viteuzi vya sifa ni muhimu kwa nini?

Kwa kutumia viteuzi kama hivyo, unaweza kuchagua vipengele vingi vya HTML bila kuwapa madarasa ya mtindo. Katika baadhi ya matukio, kwa kutumia njia hii unaweza kufupisha msimbo na kurahisisha kazi yako. Kwa mfano, hapo juu nilitoa mfano na ikoni ya kumbukumbu. Hapa wazo lingine likatokea. Kwa mfano, kwenye tovuti yako mara nyingi huunganisha kwenye rasilimali nyingine (Wikipedia, sema) na unataka kuonyesha ikoni maalum karibu na viungo vya Wikipedia, ambavyo viungo vingine havipaswi kuwa navyo.

Unaweza kuitekeleza kama hii:

A (kanuni za css)

Kwa kweli, kuna njia nyingi zaidi za kutumia viteuzi vya sifa. Wanaweza kwa kiasi fulani kurahisisha kazi inapohitajika. Tumia css na ujiandikishe kwa blogu ili kujifunza zaidi kuhusu ukuzaji wa wavuti.

Viteuzi vya Css3 na madarasa bandia

Kuhusu wateuzi wapya wa CSS3, ambao sikuandika juu ya nakala zilizopita.

Kazi iliyoboreshwa na fomu

Haya ni madarasa mapya ya uwongo. Kimsingi zote zinahusu uwezekano mpya wa fomu.
:imewezeshwa - darasa la uwongo litachagua kila kitu nyanja zinazotumika. Hiyo ni, wale ambao unaweza kuandika kitu au angalau kusoma.
:disabled ni darasa la uwongo lililo kinyume, huchagua sehemu zote zilizozimwa. Ipasavyo, kwa msaada wake unaweza kuongeza mitindo ya ziada kwenye uwanja kama huo.
:soma pekee - chagua zote pembejeo, ambazo ni za kusoma tu.
:soma-andika - huchagua sehemu zote zinazoweza kuhaririwa.

Kuongeza mitindo kwa kuzingatia uhalali

Pia kuna madarasa ya uwongo ya kuvutia sana ambayo unaweza kugawa mitindo kulingana na uhalali au kutokuwa sahihi kwa thamani iliyoingizwa. Hapo awali, hii inaweza tu kufanywa na kwa kutumia JavaScript.
:halali - huchagua sehemu zote ambazo thamani iliyoingizwa inakidhi mahitaji. Mahitaji yenyewe kawaida hubainishwa kwa kutumia sifa ya muundo. Inaweza pia kutegemea aina ya uwanja. Kwa mfano, shamba ambalo anwani imeandikwa Barua pepe, itachukuliwa kuwa batili ikiwa hakuna @ katika thamani iliyoingizwa.
:batili - ipasavyo, huchagua sehemu zote batili ambazo thamani hailingani na inavyotarajiwa. Kwa mfano, unaweza kufanya maandishi ya rangi katika sehemu kama nyekundu hii:

Ingizo: batili( Rangi: nyekundu; )

Sasa kama tunaandika maadili yasiyo sahihi katika mashamba, maandishi yanageuka nyekundu. Ipasavyo, unaweza pia kutumia picha za alama ya kuangalia na msalaba ili kuonyesha mtumiaji ikiwa alijaza kila kitu kwa usahihi.

Mitindo ya sehemu zinazohitajika

Ningependa pia kutambua kuwa darasa la uwongo linalolingana limeonekana kwa sehemu zinazohitajika.
:required - itachagua vipengele ambavyo vina sifa hii. Hiyo ni, mashamba yote yanahitajika kujazwa.
:hiari - darasa lingine, litachagua sehemu ambazo ni za hiari.

Darasa la uwongo: sio

:not ni aina ya kichaguzi kipingamizi ambacho hukuruhusu kuamua ni vitu vipi USITUMIE mitindo. Mifano michache.
A:not(:last-child)() - itachagua viungo vyote kwenye ukurasa isipokuwa ile ya mwisho.
.nav:not(li)() - itachagua vipengele vyote vilivyo na darasa nav, lakini hivi havipaswi kuwa vipengee vya orodha (li).
#makala p:sio(.special:mtoto wa kwanza) - itachagua aya zote kwenye umbo la makala isipokuwa aya ya kwanza yenye darasa maalum.

Kama unavyoona, hali imeandikwa kwa mabano kwa darasa la uwongo: ni nini hasa kinachohitaji kutengwa kutoka kwa uteuzi. Unaweza pia kuandika viteuzi mchanganyiko katika hali hiyo, ili uweze kuchagua na kutenga chochote unachotaka.

Hii ni pseudo-darasa ambayo wakati mwingine inahitajika, inahitajika si tu katika nadharia, lakini pia katika mazoezi. Ndio, unaweza pia kuendelea kutunga kiteuzi baada ya :not(). Kwa mfano:
Div:not(#header) .wrap - huchagua div zote zilizo na darasa la kukunja, isipokuwa div yenye id = "header"

Hizi zilikuwa viteuzi ambavyo vilianzishwa katika CSS3.

Kipaumbele cha wateuzi wa css

Kuamua ni mitindo ipi inayotangulia, tumia sheria rahisi:
Kitambulisho ndicho kiteuzi kinachopewa kipaumbele zaidi. Ikiwa kipengele kina darasa la mtindo na id , na zote mbili zimepewa sifa sawa na maadili tofauti, basi mitindo iliyoandikwa kwa id itatekelezwa.

Darasa ni kiteuzi cha kipaumbele cha juu kuliko kiteuzi cha lebo (p, jedwali, ul). Darasa la uwongo lina uzito sawa na darasa rahisi. p:mstari wa kwanza huchukua nafasi ya kwanza kuliko .firstline kwa sababu kiteuzi cha pili ni darasa tu, huku cha kwanza ni kiteuzi cha lebo + pseudo-class.

Mwingine kanuni muhimu— kadiri kiteuzi kinavyokuwa maalum zaidi, ndivyo mitindo inavyopewa kipaumbele zaidi. Kwa mfano, kati ya mwili na p, aya inashinda vita kwa sababu ni kiteuzi maalum zaidi kuliko mwili (kwa sababu ni ukurasa mzima, kwa hivyo sio maalum sana). Jedwali p , kwa upande wake, ni maalum zaidi kuliko p . Kwa ujumla, tu kuwa na ufahamu wa sheria hizi.

Mstari wa chini

Nakala hii haikushughulikia wateuzi wa sifa, lakini kwa ujumla tayari nimeandika juu yao hapo awali. Nakutakia mafanikio katika kujifunza ujenzi wa tovuti, ikijumuisha viteuzi vya CSS.

Ningependa pia kuongeza kuwa ikiwa unatumia jQuery, basi ina wateule wake, ingawa wanafanana sana na hawa, lakini kuna tofauti kidogo.

CSS (Laha za Mtindo wa Kuachia), au laha za mtindo wa kuachia, hutumiwa kuelezea kuonekana kwa hati iliyoandikwa kwa lugha ya markup. Kwa kawaida, mitindo ya CSS hutumiwa kuunda na kubadilisha mtindo wa vipengele vya ukurasa wa wavuti na violesura vya mtumiaji iliyoandikwa ndani Lugha za HTML na XHTML, lakini pia inaweza kutumika kwa aina yoyote ya hati ya XML, ikiwa ni pamoja na XML, SVG na XUL.

Karatasi za mtindo wa kuteleza huelezea sheria za uumbizaji wa vipengee kwa kutumia mali na maadili yanayokubalika mali hizi. Kwa kila kipengele, unaweza kutumia seti ndogo ya mali; mali nyingine hazitakuwa na athari yoyote juu yake.

Tamko la mtindo lina sehemu mbili: kipengele cha ukurasa wa wavuti - kiteuzi, na amri za umbizo - kizuizi cha tangazo. Kiteuzi huambia kivinjari ni kipengee gani cha kufomati, na kizuizi cha tamko (msimbo katika braces ya curly) huorodhesha amri za umbizo - mali na maadili yao.

Mchele. 1. Muundo wa tamko la mtindo wa CSS

Aina za karatasi za mtindo wa kuteleza na maelezo yao maalum

1. Aina za karatasi za mtindo

1.1. Karatasi ya mtindo wa nje

Karatasi ya mtindo wa nje inawakilisha faili ya maandishi na kiendelezi cha .css, ambacho kina seti ya mitindo ya CSS kwa vipengele. Faili imeundwa katika kihariri cha msimbo, kama ukurasa wa HTML. Faili inaweza kuwa na mitindo pekee, bila alama za HTML. Laha ya mtindo wa nje imeunganishwa kwenye ukurasa wa wavuti kwa kutumia lebo , iliyoko ndani ya sehemu hiyo . Mitindo hii inafanya kazi kwa kurasa zote za tovuti.

Unaweza kuambatisha laha nyingi za mitindo kwa kila ukurasa wa wavuti kwa kuongeza lebo nyingi kwa mfuatano , ikionyesha madhumuni ya laha hii ya mtindo katika sifa ya lebo ya media. rel="stylesheet" inabainisha aina ya kiungo (kiungo cha laha la mtindo).

Sifa ya aina="text/css" haitakiwi na kiwango cha HTML5, kwa hivyo inaweza kuachwa. Ikiwa sifa haipo, thamani chaguomsingi ni type="text/css" .

1.2. Mitindo ya ndani

Mitindo ya ndani iliyopachikwa katika sehemu Hati ya HTML na imefafanuliwa ndani ya lebo. Mitindo ya ndani huchukua nafasi ya kwanza kuliko ya nje, lakini ni duni kwa mitindo ya ndani (iliyobainishwa kupitia sifa ya mtindo).

...

1.3. Mitindo iliyojengwa

Tunapoandika mitindo ya ndani, tunaandika nambari ya CSS kwenye faili ya HTML, moja kwa moja ndani ya tepe ya kipengee kwa kutumia sifa ya mtindo:

Makini na maandishi haya.

Mitindo hiyo huathiri tu kipengele ambacho kimewekwa.

1.4. @kuagiza sheria

@kuagiza sheria Inakuruhusu kupakia laha za mtindo wa nje. Ili agizo la @import lifanye kazi, lazima lionekane kwenye laha ya mtindo (ya nje au ya ndani) kabla ya sheria zingine zote:

Sheria ya @import pia inatumika kujumuisha fonti za wavuti:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Aina za wateuzi

Wateuzi kuwakilisha muundo wa ukurasa wa wavuti. Wanasaidia kuunda sheria za kupangilia vipengele vya ukurasa wa wavuti. Wateuzi wanaweza kuwa vipengele, madarasa yao na vitambulisho, pamoja na madarasa ya uwongo na vipengele vya uwongo.

2.1. Kiteuzi cha Universal

Inalingana na kipengele chochote cha HTML. Kwa mfano, * (pembezoni: 0;) itaweka upya pambizo kwa vipengele vyote vya tovuti. Kiteuzi pia kinaweza kutumika pamoja na kipengele cha uwongo cha darasa au pseudo: *:after (mitindo ya CSS) , *:checked (mitindo ya CSS) .

2.2. Kiteuzi cha kipengele

Viteuzi vya kipengele hukuruhusu kuumbiza vipengele vyote wa aina hii kwenye kurasa zote za tovuti. Kwa mfano, h1 (font-family: Lobster, cursive;) itaweka mtindo wa jumla wa uumbizaji wa vichwa vyote vya h1.

2.3. Kiteuzi cha darasa

Viteuzi vya darasa hukuruhusu kuweka mtindo wa kipengee kimoja au zaidi ukitumia jina la darasa sawa lililowekwa maeneo mbalimbali kurasa au kwenye kurasa tofauti tovuti. Kwa mfano, ili kuunda kichwa na darasa la kichwa, unahitaji kuongeza sifa ya darasa na kichwa cha thamani kwenye lebo ya ufunguzi.

na weka mtindo kwa darasa maalum. Mitindo iliyoundwa kwa kutumia darasa inaweza kutumika kwa vipengele vingine, si lazima vya aina hiyo.

Maagizo ya matumizi kompyuta binafsi

.kichwa cha habari ( badilisha-maandishi: herufi kubwa; rangi: samawati nyepesi; )

2.4. Kiteuzi cha kitambulisho

Kiteuzi cha kitambulisho hukuruhusu kufomati moja kipengele maalum. Kitambulisho lazima kiwe cha kipekee na kinaweza kuonekana mara moja tu kwenye ukurasa mmoja.

#upau wa kando ( upana: 300px; kuelea: kushoto; )

2.5. Kiteuzi cha ukoo

Wateuzi wa uzao hutumia mitindo kwa vipengele ndani ya kipengele cha chombo. Kwa mfano, ul li (text-transform: herufi kubwa;) - itachagua vipengele vyote vya li ambavyo ni watoto wa vipengele vyote vya ul.

Ikiwa unataka kuunda vizazi vya kitu fulani, unahitaji kukipa kipengee hicho darasa la mtindo:

p.first a (rangi: kijani;) - mtindo huu utatumika kwa viungo vyote wazao wa aya na darasa la kwanza;

p .first a (rangi: kijani;) - ukiongeza nafasi, viungo vilivyomo ndani ya lebo yoyote ya .first class ambayo ni mtoto wa kipengele itawekwa mtindo.

Kwanza a (rangi: kijani;) - mtindo huu utatumika kwa kiungo chochote kilicho ndani ya kipengele kingine, kilichoteuliwa na class.first .

2.6. Kiteuzi cha watoto

Kipengele cha mtoto ni mtoto wa moja kwa moja wa kipengele chake kilicho na. Kipengele kimoja kinaweza kuwa na kadhaa vipengele vya mtoto, na kila kipengele kinaweza kuwa na mzazi mmoja tu. Kiteuzi cha watoto hukuruhusu kutumia mitindo tu ikiwa kipengee cha mtoto kinakuja mara moja baada ya kipengele cha mzazi na hakuna vipengele vingine kati yao, yaani, kipengele cha mtoto hakijawekwa ndani ya kitu kingine chochote.
Kwa mfano, p > kali itachagua vipengele vyote vikali ambavyo ni watoto wa kipengele cha p.

2.7. Kiteuzi dada

Udada hutokea kati ya vipengele vinavyoshiriki mzazi wa kawaida. Wateuzi wa ndugu hukuruhusu kuchagua vipengee kutoka kwa kikundi cha vipengee vya kiwango sawa.

h1 + p - itachagua aya zote za kwanza mara moja kufuatia lebo yoyote

bila kuathiri aya zilizobaki;

h1 ~ p - itachagua aya zote ambazo ni dada kwa kichwa chochote cha h1 na mara baada yake.

2.8. Kiteuzi cha sifa

Wateuzi wa sifa huchagua vipengee kulingana na jina la sifa au thamani ya sifa:

[sifa] - vipengele vyote vilivyo na sifa maalum - vipengele vyote ambavyo sifa ya alt imetajwa;

selector[attribute] - vipengele vya aina hii vyenye sifa maalum, img - picha tu ambazo sifa ya alt imetajwa;

selector[attribute="value"] - vipengele vya aina hii vyenye sifa maalum yenye thamani maalum, img - picha zote ambazo kichwa chake kina neno maua;

selector[attribute~="value"] - vipengele vyenye sehemu thamani iliyopewa, kwa mfano, ikiwa madarasa kadhaa yamebainishwa kwa kipengele kilichotenganishwa na nafasi, p - aya ambazo jina la darasa lina kipengele ;

selector[attribute|="value"] - vipengele ambavyo orodha ya maadili ya sifa huanza na neno maalum, p - aya ambazo jina la darasa ni kipengele au huanza na kipengele;

selector[attribute^="value"] - vipengele ambavyo thamani ya sifa huanza na thamani maalum, a - viungo vyote vinavyoanza na http://;

selector[attribute$="value"] - vipengele ambavyo thamani ya sifa inaisha thamani iliyobainishwa, img - picha zote katika muundo wa png;

selector[attribute*="value"] - vipengele ambavyo thamani ya sifa ina neno lililobainishwa popote, a - viungo vyote ambavyo jina lake lina book .

2.9. Kiteuzi cha darasa la uwongo

Madarasa ya uwongo ni madarasa ambayo hayajaambatishwa kwa lebo za HTML. Zinakuruhusu kutumia sheria za CSS kwa vipengee tukio linapotokea au linatii sheria mahususi. Madarasa ya uwongo yana sifa ya vitu vilivyo na sifa zifuatazo:

:hover - kipengele chochote ambacho mshale wa panya huwekwa juu yake;

:focus - kipengele cha maingiliano ambacho kilielekezwa kwa kutumia kibodi au kuamilishwa kwa kutumia kipanya;

:active - kipengele ambacho kilianzishwa na mtumiaji;

:halali - fomu za mashamba ambazo maudhui yake yameangaliwa katika kivinjari kwa kufuata aina maalum ya data;

:batili - sehemu za fomu ambazo maudhui yake hayalingani na aina maalum ya data;

:imewezeshwa - sehemu zote za fomu zinazotumika;

:walemavu - mashamba ya fomu iliyozuiwa, yaani, katika hali isiyofanya kazi;

:katika safu - sehemu za fomu ambazo thamani zake ziko katika safu maalum;

:nje ya anuwai - sehemu za fomu ambazo thamani zake haziko ndani ya safu maalum;

:lang() - vipengele vilivyo na maandishi katika lugha maalum;

:not(selector) - vipengele ambavyo havina kiteuzi maalum - darasa, kitambulisho, jina au aina ya uga wa fomu - :not() ;

:target ni kipengele chenye alama # ambacho kinarejelewa katika hati;

:imeangaliwa - vipengele vya fomu vilivyochaguliwa (vilivyochaguliwa na mtumiaji).

2.10. Kiteuzi cha darasa bandia cha muundo

Madarasa ya uwongo ya muundo huchagua vitu vya watoto kulingana na kigezo kilichoainishwa kwenye mabano:

:nth-mtoto (isiyo ya kawaida) - mambo ya mtoto isiyo ya kawaida;

:nth-mtoto (hata) - hata vipengele vya mtoto;

:nth-child(3n) - kila kipengele cha tatu kati ya watoto;

:nth-child(3n+2) - huchagua kila kipengele cha tatu, kuanzia na mtoto wa pili (+2) ;

:nth-child(n+2) - huchagua vipengele vyote kuanzia pili;

:nth-child(3) - huchagua kipengele cha mtoto wa tatu;

:nth-last-child() - katika orodha ya vipengele vya mtoto, huchagua kipengele na eneo lililobainishwa, sawa na:nth-child() , lakini kuanzia ya mwisho, katika mwelekeo tofauti;

:mtoto wa kwanza - hukuruhusu kuunda tu kipengele cha kwanza cha mtoto cha lebo;

:mtoto wa mwisho - hukuruhusu kuunda kipengee cha mwisho cha lebo;

:mtoto wa pekee - huchagua kipengele ambacho ni kipengele cha mtoto pekee;

:tupu - huchagua vipengele ambavyo havina watoto;

:root - huchagua kipengee ambacho ni mzizi kwenye hati - kipengele cha html.

2.11. Kiteuzi cha aina ya uwongo cha aina ya muundo

Elekeza kwa aina maalum lebo ya mtoto:

:nth-of-type() - huchagua vipengele sawa na :nth-child() , lakini huzingatia tu aina ya kipengele;

:ya kwanza ya aina - huchagua mtoto wa kwanza wa aina fulani;

:mwisho-wa-aina - huchagua kipengele cha mwisho cha aina hii;

:nth-last-of-type() - huchagua kipengele cha aina iliyotolewa katika orodha ya vipengele kulingana na eneo maalum, kuanzia mwisho;

:only-of-type - huchagua kipengele pekee cha aina maalum kati ya vipengele vyake vya mtoto kipengele cha mzazi.

2.12. Kiteuzi cha kipengee cha uwongo

Vipengele vya uwongo hutumiwa kuongeza yaliyomo, ambayo hutolewa kwa kutumia sifa ya yaliyomo:

:barua ya kwanza - huchagua barua ya kwanza ya kila aya, inatumika tu kwa vipengele vya kuzuia;

:mstari wa kwanza - huchagua mstari wa kwanza wa maandishi ya kipengele, inatumika tu kwa vipengele vya kuzuia;

:kabla - huingiza yaliyomo kabla ya kipengee;

:after - inaongeza yaliyomo baada ya kipengee.

3. Mchanganyiko wa kiteuzi

Ili kuchagua kwa usahihi vipengee vya umbizo, unaweza kutumia mchanganyiko wa viteuzi:

img:nth-of-type(even) - itachagua picha zote zilizohesabiwa ambazo maandishi yake mbadala yana neno css.

4. Kupanga wateuzi

Mtindo huo unaweza kutumika kwa vipengele vingi kwa wakati mmoja. Ili kufanya hivyo, unahitaji kuorodhesha wateule wanaohitajika upande wa kushoto wa tamko, wakitenganishwa na koma:

H1, h2, p, span ( rangi: nyanya; usuli: nyeupe; )

5. Urithi na kuteleza

Urithi na mteremko ni dhana mbili za msingi katika CSS ambazo zinahusiana kwa karibu. Urithi ni pale vitu vinaporithi mali kutoka kwa mzazi wao (kipengele kilicho navyo). Cascade inajidhihirisha kwa jinsi gani aina tofauti laha za mtindo hutumika kwa hati, na jinsi sheria zinazokinzana zinavyoshindana.

5.1. Urithi

Urithi ni utaratibu ambao mali fulani hupitishwa kutoka kwa babu hadi kwa vizazi vyake. Vipimo vya CSS huruhusu urithi wa sifa zinazohusiana na maudhui ya maandishi ya ukurasa, kama vile rangi, fonti, nafasi ya herufi, urefu wa mstari, mtindo wa orodha, upatanishi wa maandishi, ujongezaji maandishi, kubadilisha maandishi, mwonekano, nyeupe. -nafasi na nafasi kati ya maneno. Mara nyingi, hii ni rahisi kwa sababu sio lazima uweke ukubwa wa fonti na familia ya fonti kwa kila kipengele kwenye ukurasa wa wavuti.

Sifa zinazohusiana na umbizo la kuzuia hazirithiwi. Hizi ni mandharinyuma , mpaka , onyesho , kuelea na uwazi , urefu na upana , ukingo , min- max-urefu na -upana , muhtasari , kufurika , padding , nafasi , upambaji wa maandishi , vertical-align na z-index .

Urithi wa kulazimishwa

Kwa kutumia neno kuu inherit inaweza kulazimisha kipengele kurithi thamani yoyote ya mali ya kipengele kikuu chake. Hii inafanya kazi hata kwa mali ambazo hazirithiwi kwa chaguo-msingi.

Jinsi mitindo ya CSS imewekwa na kufanya kazi

1) Mitindo inaweza kurithiwa kutoka kwa kipengele cha mzazi (mali ya kurithi au kutumia thamani ya kurithi);

2) Mitindo iliyo kwenye karatasi ya mtindo chini ya mitindo ya kupuuza iliyo kwenye jedwali hapo juu;

3) Mitindo kutoka kwa kipengele kimoja inaweza kutumika vyanzo mbalimbali. Unaweza kuangalia ni mitindo ipi inatumika katika hali ya msanidi wa kivinjari. Ili kufanya hivyo, bofya kipengele bonyeza kulia panya na uchague "Angalia nambari" (au kitu sawa). Safu wima ya kulia itaorodhesha sifa zote ambazo zimewekwa kwenye kipengele hiki au kurithiwa kutoka kwa kipengele kikuu, pamoja na faili za mtindo ambamo zimebainishwa, na nambari ya serial mistari ya kanuni.

Mchele. 2. Hali ya Msanidi programu Kivinjari cha Google Chrome

4) Wakati wa kufafanua mtindo, unaweza kutumia mchanganyiko wowote wa wateule - kiteuzi cha kipengee, kipengee cha darasa la uwongo, darasa au kitambulisho cha kipengee.

div (mpaka: 1px imara #eee;) #kunja (upana: 500px;).kisanduku (elea: kushoto;).wazi (wazi: zote mbili;)

5.2. Cascade

Kuporomoka ni utaratibu unaodhibiti matokeo ya mwisho katika hali ambapo sheria tofauti za CSS zinatumika kwa kipengele kimoja. Kuna vigezo vitatu vinavyobainisha mpangilio wa sifa zinazotumiwa—kanuni! muhimu, umaalum, na mpangilio ambao laha za mitindo zinajumuishwa.

Kanuni!muhimu

Uzito wa sheria unaweza kubainishwa kwa kutumia!neno kuu muhimu, ambalo huongezwa mara tu baada ya thamani ya mali, kwa mfano, urefu (font-weight: bold!muhimu;) . Sheria lazima iwekwe mwishoni mwa tamko kabla ya bracket ya kufunga, bila nafasi. Tangazo kama hilo litachukua nafasi ya kwanza kuliko sheria zingine zote. Sheria hii inakuwezesha kufuta thamani ya mali na kuweka mpya kwa kipengele kutoka kwa kikundi cha vipengele katika kesi ambapo hakuna upatikanaji wa moja kwa moja kwenye faili ya mtindo.

Umaalumu

Kwa kila sheria, kivinjari huhesabu maalum ya kiteuzi, na ikiwa kipengele kina matamko ya mali yanayokinzana, sheria ambayo ina maalum zaidi inazingatiwa. Thamani maalum ina sehemu nne: 0, 0, 0, 0. Umaalumu wa kichaguzi hufafanuliwa kama ifuatavyo:

kwa kitambulisho, 0, 1, 0, 0 imeongezwa;
kwa darasa 0, 0, 1, 0 imeongezwa;
kwa kila kipengele na pseudo-kipengele, 0, 0, 0, 1 huongezwa;
kwa mtindo wa ndani ulioongezwa moja kwa moja kwenye kipengele - 1, 0, 0, 0;
Kiteuzi cha wote hakina maalum.

H1 (rangi: lightblue;) /*maalum 0, 0, 0, 1*/ em (rangi: fedha;) /*maalum 0, 0, 0, 1*/ h1 em (rangi: dhahabu;) /*maalum: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (rangi: bluu;) /*maalum: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .upau wa kando (rangi: kijivu;) /*maalum 0, 0, 1, 0 */ #upau wa kando (rangi: machungwa;) /*maalum 0, 1, 0, 0*/ li#upau kando (rangi: aqua;) /*maalum: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Matokeo yake, sheria hizo ambazo ni maalum zaidi zitatumika kwa kipengele. Kwa mfano, ikiwa kipengele kina sifa mbili zilizo na maadili 0, 0, 0, 2 na 0, 1, 0, 1, basi sheria ya pili itashinda.

Agizo la meza zilizounganishwa

Unaweza kuunda kadhaa meza za nje mitindo na uunganishe kwenye ukurasa mmoja wa wavuti. Ikiwa zinatokea kwenye meza tofauti maana tofauti mali ya kipengele kimoja, basi kwa sababu hiyo sheria katika karatasi ya mtindo iliyoorodheshwa hapa chini itatumika kwa kipengele.

Kiteuzi katika CSS - hii ni pointer juu ya kipengele au kikundi cha vipengele ambavyo sheria za mtindo zitatumika. Zipo aina zifuatazo wateuzi:

1. Wateuzi kwa vitambulisho: h1

2. Kiteuzi kwa kitambulisho: #kuu

3. Wateuzi kwa darasa: .imefichwa

4. Kiteuzi cha tabaka nyingi

Zimeandikwa pamoja bila nafasi. Wateuzi ambao wanakidhi masharti kadhaa kwa wakati mmoja (mantiki "AND"). Mitindo itatumika kwa vipengele vyote ambavyo vimefichwa na darasa.vimefungwa kwa wakati mmoja.

Imefichwa.imefungwa

5. Wateuzi wa muktadha

Imetenganishwa na nafasi. Viteuzi hivi hutumiwa kutumia mitindo kwa kipengele ikiwa tu ni kiota kwa kipengele unachotaka.

P strong ul .selected .header .menu a

6. Wateuzi wa karibu

Huchagua kipengele kinachofuata. Yameandikwa kwa kutumia ishara +. Inasoma kama: tumia mali kwa selector2 ambayo inapaswa kuwa mara baada ya kiteuzi1 .

Mitindo inatumika kwa kipengee kinacholingana na kichagua2 ikiwa tu kitatanguliwa na kipengele kinacholingana na kichagua1.

....kijani + .imechaguliwa()

Katika mfano, .kijani + .iliyochaguliwa itatumia mitindo kwa kipengele cha pili, kwa sababu mbele yake kuna kipengele chenye darasa .kijani . Kiteuzi cha .kijani + li pia kitatumia mitindo kwenye kipengele cha pili, lakini kiteuzi .kilichochaguliwa + .kijani hakitafanya kazi.

7. Wateuzi wanaohusiana

Vivutio vipengele vinavyofuata. Sawa na ile iliyopita, lakini kwa tofauti hiyo vipengele vyote vifuatavyo vimechaguliwa, si tu kipengele cha kwanza.

kipengee

Imechaguliwa pia

Haijachaguliwa...ul~p()

KATIKA katika mfano huu vipengele vyote vya p zifuatazo ul vitachaguliwa. Ambapo unapotumia kichaguzi cha ul + p, kipengele cha kwanza pekee ndicho kitakachochaguliwa.

8. Wateuzi wa watoto

Zimeandikwa kwa kutumia > ishara na hutumika tu kwa vipengele vya kiwango cha kwanza cha kuota. Vipengele vilivyowekwa ndani ya vipengele vingine haviathiriwi.

Ul > li ( }

Katika kesi ya wateuzi wa mazingira, huathiri wazao wote (kwa mfano, ikiwa utaweka ul li), ambayo sio rahisi kila wakati. Wateuzi wa watoto hukuruhusu kuweka mitindo kwa vipengee vya kiwango cha kwanza cha kuota.

ul > li maana yake ni sawa na ul li , lakini ni li tu wa kiwango cha kwanza cha kuatamia ndio huchaguliwa, ambao huwekwa moja kwa moja katika ul. Kwa li iliyowekwa ndani ya vipengee vingine vya watoto, sheria hazitatumika tena.

9. Wateuzi wa sifa

Mara nyingi hutumiwa wakati wa kufanya kazi na fomu. Viteuzi vya sifa huandikwa kwa kutumia kipengele cha mabano ya mraba[attribute] .

Mifano ya viteuzi vya sifa:

Ingizo la kuingiza div a a a

Katika mfano hapo juu, ~ hukuruhusu kuchagua sifa fulani kutoka kwa orodha iliyotenganishwa kwa koma ya sifa, kama vile:

10. Global selector

Kiteuzi * kitachagua Wote vipengele. Inaweza pia kutumika kuangazia vipengele vya mtoto:

* ( ukingo: 0; pedi: 0; ).maudhui * ( muhtasari: hakuna; )

11. Madarasa ya uwongo

Mifano ya madarasa ya uwongo:

A:link a:alitembelea a:active a:hover input:checked .clearfix:after () div:not(#container) p::mstari wa kwanza p::herufi ya kwanza

Kukanusha pseudo-class:not inaweza kuwa muhimu sana. Kwa mfano, unapohitaji kuchagua div zote isipokuwa ile iliyo na chombo cha kitambulisho.