5 Selectores
Enhavo
5.1 Skemo trafaj
En CSS, mastro egalante regulojn determini kion stilo regulojn aplikas al elementoj en la dokumenton arbo . Tiuj padronoj, nomitaj selectores, povas intervali de simpla elemento nomoj al riĉa contextual ŝablonoj. Se ĉiuj kondiĉoj en la skemo estas vera por certa elemento, la seleccionador egalas la elemento.La kazo-sentemo de dokumento lingvo elemento nomoj en selectores dependas la dokumenton lingvo. Ekzemple, en HTML, elemento nomoj kazo-sensenta, sed en XML ili uskladon.
La sekva tabulo resumas CSS 2.1 seleccionador sintakson:
| Skemo | signifanta | Priskribita en sekcio |
|---|---|---|
| * | Matĉoj ajna elemento. | Universala elektilo |
| E | Matĉoj ajna E elemento (te, elemento de tipo E). | tipo selectores |
| EF | Egalas ajnan F elemento kiu estas posteulo de E elemento. | posteulo selectores |
| E> F | Egalas ajnan F elemento kiu estas infano de elemento E. | infano selectores |
| E: unua infano | Matĉoj elemento E kiam E estas la unua filo de lia patro. | La: unua infano pseŭdo-klaso |
| E: ligilo Kaj: vizititaj | Alumetoj elemento E se E estas la fonto ankron de hiperligilo kies celo estas ankoraŭ ne vizititaj (: ligo) aŭ jam vizitis (: vizitis). | La ligilon pseŭdo-klasoj |
| Kaj: aktivaj Kaj: ŝvebi Kaj: fokuso | Matĉoj E dum certa uzanto agoj. | La dinamika pseŭdo-klasoj |
| Kaj: lang (c) | Matĉoj elemento de tipo E, se ĝi estas en (homan) lingvon c (la dokumento lingvo precizigas kiel lingvo estas determinita). | La: lang () pseŭdo-klaso |
| E + F | Matĉoj ajna F elemento tuj antaŭita de gefrato elemento E. | apuda selectores |
| E [foo] | Matĉoj ajna E elemento kun la "umo" atributon (ĉiu la valoro). | atribui selectores |
| E [foo = "averto"] | Matĉoj ajna E elemento kies "umo" atributo valoro estas ĝuste egala al "averto". | atribui selectores |
| E [foo ~ = "averto"] | Matĉoj ajna E elemento kies "umo" atributo valoro estas listo de spaco-apartigita valorojn, unu el kiu estas ĝuste egala al "averto". | atribui selectores |
| E [lang | = "eo"] | Matĉoj ajna E elemento kies "lang" atributo havas streketo-disigita listo de valoroj komencas (de maldekstre) kun "eo". | atribui selectores |
| DIV.warning | Lingvo specifaj. (En HTML, same kiel DIV [klason ~ = "averto"].) | klaso selectores |
| E # myid | Matĉoj ajna E elemento kun ID egala al "myid". | ID selectores |
5.2 elektilo sintakso
A simpla selector estas aŭ tipo seleccionador aŭ universala seleccionador sekvita tuj per nulo aŭ pli atributo selectores , ID selectores , aŭ pseŭda-klasoj , en ajna ordo. La simpla selector matĉojn se ĉiuj ties komponantoj matĉo.
Notu: la terminologio uzita tie en CSS 2.1 estas malsama de kio estas uzita en CSS3. Ekzemple, "simpla selector" rilatas al pli malgranda parto de selector en CSS3 ol en CSS 2.1. Vidu la CSS3 Selectores- modulo [CSS3SEL] .
Al selector estas ĉeno de unu aŭ pli simplaj selectores apartigitaj per combinators. Combinators estas: blanka spaco, ">", kaj "+". Blanka spaco povas aperi inter kombinilo kaj la simpla selectores ĉirkaŭ ĝi. La elementoj de la dokumento arbo kiuj kongruas selector estas nomitaj temoj de la seleccionador. Al selector konsistanta el ununura simpla selector egalas ajnan elementon kontentiganta lia postuloj. Prepending simpla elektilo kaj kombinilo al ĉeno trudas aldonaj trafaj limigoj, tiel la temoj de selector estas ĉiam subaro de la eroj egalanta la lasta simpla elektilo.
Unu pseŭdo-ero povas esti aldonita al la lasta simpla selector en ĉeno, en kiu kazo la stilo informo aplikas al subparte de ĉiu subjekto.
5.2.1 Agrupación
Kiam pluraj elektiloj dividus saman deklaroj, ili povas esti grupigitaj en komo-disigita listo.
En ĉi tiu ekzemplo, ni condensan tri regulojn kun identaj deklarojn en unu. tiel,
CSS proponas aliajn "stenografio" mekanismoj ankaŭ, inkluzive multnombraj deklaroj kaj stenografio propraĵoj . h1 {font-family: sans-serif} h2 {font-family: sans-serif} h3 {font-family: sans-serif}estas ekvivalenta al:
h1, h2, h3 {font-family: sans-serif}
5.3 Universala elektilo
La universala seleccionador , skribita "*", egalas la nomon de iu elemento tipo. Ĝi egalas ajnan ununuran elementon en la dokumenton arbo.Se la universala selector ne estas la sola komponanto de simpla seleccionador , la "*" povas esti nefarita. Ekzemple:
-
*[lang=fr]kaj[lang=fr]estas ekvivalentaj. -
*.warningkaj.warningestas ekvivalentaj. -
*#myidkaj#myidestas ekvivalentaj.
5.4 Tipo selectores
A tipo seleccionador egalas la nomo de dokumento lingvo ero tipo. Tipo seleccionador matĉojn ĉiu petskribo de la elemento en la paĝo dokumenton arbo.
Jena regulo egalas ĉiuj H1 elementojn en la dokumenton arbo:
h1 {font-family: sans-serif}
5.5 Posteulo selectores
Kelkfoje, aŭtoroj mankos selectores parigi elemento kiu estas la posteulo de alia elemento en la dokumento arbo (ekz: "Trafu tiujn EM elementoj kiuj estas enhavitaj per H1 elemento"). Posteulo selectores esprimi tian rilaton en mastro. Posteulo seleccionador konsistas el du aŭ pli selectores apartigitaj per blanka spaco . Posteulo seleccionador de la formo "AB " matĉojn kiam ero B estas ajna posteulo de iu praulo elemento A .
Ekzemple, konsideri la sekvajn regulojn:
h1 {koloro: ruĝa} ilin {koloro: ruĝa}Kvankam la intenco de tiuj reguloj estas aldoni emfazo al teksto ŝanĝante lia koloro, la efiko perdiĝos en kazo kiel:
<H1> Tiu subtitolo estas <EM> tre </ EM> grava </ H1>
Ni trakti tiun kazon per kompletigante la antaŭaj reguloj per regulo
kiu elmontras la teksto koloro al blua kiam ajn EM okazas ie ene de H1: h1 {koloro: ruĝa} ilin {koloro: ruĝa} h1 ilin {koloro: blua}La tria regulo kongruas la EM en la sekva fragmento:
<H1> Tiu <SPAN class = "myclass"> subtitolo estas <EM> tre </ EM> grava </ SPAN> </ H1>
La jenaj seleccionador:
div * p
egalas P elemento kiu estas nepo aŭ posta posteulo de DIV elemento. Notu la blanka spaco ambauxflanke de la "*" ne estas parto de la universala elektilo;
la blanka spaco estas kombinilo indikante ke la DIV devas esti la
praulo de iu elemento, kaj ke tiu elemento devas esti praulo de la P.
La seleccionador en la sekvanta regulo, kiu kombinas posteulo kaj atribui selectores , alumetoj ajna elemento kiu (1) estas la "href" atributo agordi kaj (2) estas ene de P kiu estas sin ene DIV:
div p * [href]
5.6 Infano selectores
Al infano seleccionador matĉojn kiam ero estas la infano de iu elemento. Infano seleccionador konsistas el du aŭ pli selectores apartigitaj per ">".
Jena regulo aroj la stilo de ĉiu P elementoj kiuj estas idoj de KORPO:
korpo> P {grupigo alteco: 1.3}
La sekvanta ekzemplo kombinas posteulo selectores kaj infano selectores:
Por informo sur elektanta la unua infano de elemento, bonvolu vidi la sekcion sur la : unua infano pseŭdo-klaso sube. div ol> span p
Ĝi egalas P elemento kiu estas posteulo de LI; la LI elemento devas esti la infano de OL elemento; la OL elemento devas esti posteulo de DIV. Rimarku ke la nedeviga blanka spaco ĉirkaŭ la ">" kombinilo estis ellasita. 5.7 Apudaj gefrato selectores
Apudaj Sibling selectores havas la jenan sintakson: E1 + E2, kie E2 estas la temo de la seleccionador. La seleccionador matĉojn se E1 kaj E2 dividos la saman patro en la dokumento arbo kaj E1 tuj antaŭas Kaj2, ignorante ne-elemento nodoj (kiel teksto nodoj kaj komentoj).
Tiel, la jena regulo asertas ke kiam P elemento tuj sekvas MATH elementon, ĝi ne devus esti dentado:
math + p {teksto-indent: 0}
La sekva ekzemplo reduktas la vertikalajn spaco disigante la H1 kaj H2 ke tuj sekvas: h1 + h2 {rando-top: -5mm}
Jena regulo estas simila al la unu en la antaŭa ekzemplo, krom ke ĝi aldonas klaso selector. Tiel, speciala formatado nur okazas kiam H1 havas class = "malfermilo":
h1.opener + h2 {rando-top: -5mm}
5.8 Atributo selectores
CSS 2.1 permesas aŭtoroj specifi regulojn kiuj kongruas elementoj kiuj havas certajn atributojn difinitaj en la fonta dokumento.5.8.1 Kongruaj atributojn kaj atribui valorojn
Atributo selectores povas kongrui en kvar manieroj:-
[att] - Kongruas kiam la elemento metas la "att" atributo ajn la valoro de la atributo.
-
[att=val] - Matĉo kiam la elemento "att" atributo valoro estas ĝuste "val".
-
[att~=val] - Reprezentas elementon kun la
attatributo kies valoro estas blanka spaco-disigita listo de vortoj, unu el kiuj estas ĝuste "val". Se "val" enhavas blankan spacon, ĝi neniam reprezentas nenion (ĉar la vortoj estas disigitaj per spacoj). Se "val" estas la malplena linio, ĝi neniam reprezentas nenion. -
[att|=val] - Reprezentas elementon kun la
attatributo, lia valoro aŭ esti ĝuste "val" aŭ komencante kun "val" tuj sekvata de "-" (U + 002D). Tio estas unuavice destinita por permesi lingvo subcode matĉojn (ekz, lahreflangatributo suraelemento en HTML) kiel priskribite en BCP 47 ( [BCP47] ) aŭ lia posteulo. Cxarlang(aŭxml:lang) lingvo subcode trafaj, bonvolu vidi la:langpseŭdo-klaso .
Ekzemple, la sekvanta atributo seleccionador matĉojn ĉiuj H1 elementoj kiuj specifas la "titolo" atributo ajn ĝia valoro:
h1 [titolo] {koloro: blua; }
En jena ekzemplo, la seleccionador matĉojn ĉiuj SPAN elementoj kies "klaso" atributo havas ĝuste la valoro "ekzemplo":
Multoblaj atributo selectores povas uzi por raporti al pluraj atributoj de elemento, aŭ eĉ plurajn fojojn al la sama atributo. interspaco [class = ekzemplo] {koloro: blua; }
Tie, la seleccionador matĉojn ĉiuj SPAN elementoj kies "saluton"
atributo havas ĝuste la valoro "Cleveland" kaj kies "adiaŭ" atributo
havas ĝuste la valoro "Kolumbo":
interspaco [saluton = "Cleveland"] [adiaŭ = "Kolumbo"] {koloro: blua; }
La jenaj selectores ilustri la diferencojn inter "=" kaj "~ =". La unua seleccionador kongruas, ekzemple, la valoro "kopirajto copyleft copyeditor" por la "rel" atributo. La dua seleccionador nur kongruas kiam la "href" atributo havas la valoron "http://www.w3.org/".
a [rel ~ = "kopirajto"] a [href = "http://www.w3.org/"]
Jena regulo kaŝas ĉiuj elementoj por kiu la valoro de la "lang" atributo estas "fr" (te la lingvo estas la franca).
* [Lang = fr] {display: none}
Jena regulo kongruas por valoroj de la "lang" atributo kiuj komencas kun "eo", inkluzive de "eo", "eo-US" kaj "en-cockney":
* [Lang | = "eo"] {koloro: ruĝa}
Simile, la sekvanta aural stilo folio reguloj permesas skripton por legi laŭte en malsamaj voĉoj por ĉiu rolo:
DIALOGO [karaktero = romeo] {Voĉo-familio: "Laurence Olivier", charles, masklo} DIALOGO [karaktero = Julieta] {Voĉo-familio: "Vivien Leigh", victoria, ino}
5.8.2 Defaŭlta atributo valoroj en DTDs
Trafa okazas sur atributo valoroj en la dokumento arbo. Defaŭlta atributo valoroj povas esti difinita en DTD aŭ aliloke, sed ne ĉiam esti selektita de atributo selectores. Stilo littukojn devus esti desegnita por ke ili laboros eĉ se la defaŭlta valoroj ne estas inkluditaj en la dokumento arbo.Pli detale, UA povas, sed ne estas nepra por, legis "eksteraj subaro" de la DTD sed necesas serĉi defaŭlta atributo valoroj en la dokumento la "interna subaro." (Vidu [XML10] por difinoj de tiuj subaroj.) Depende de la UA, defaŭlta atributo valoro difinita en la ekstera subaro de la DTD povas aŭ eble ne aperas en la dokumento arbo.
A UA kiu rekonas XML nomspaco [XMLNAMESPACES] povas, sed ne estas nepra por uzu lian konon de tiu nomspaco trakti defaŭlta atributo valoroj kvazaŭ ili trovigxis en la dokumento. (Ekzemple, oni XHTML UA ne estas nepra por uzi lia korpigita scio de la XHTML DTD.)
Notu ke, tipe, implementaciones elektas ignori eksteraj subaroj.
Ekzemple, konsideri elementon EKZEMPLO kun atributo "notacio" kiu havas defaŭlta valoro de "dekuma". La DTD fragmento povus esti
<! ATTLIST EKZEMPLO notacio (decimala, octal) "dekuma">
Se la stilo folio enhavas la regulojn EKZEMPLO [notacio = dekuma] {/ * ... defaŭlta proprieto agordojn ... * /} EKZEMPLO [notacio = octal] {/ * ... aliajn agordojn ... * /}la unua regulo eble ne kongruas elementoj kies "notacio" atributo estas metita defaŭlte, te, ne fiksita eksplicite. Kapti ĉiuj kazoj, la atributo elektilo por la defaŭlta valoro devas esti gutita:
EKZEMPLO {/ * ... defaŭlta proprieto agordojn ... * /} EKZEMPLO [notacio = octal] {/ * ... aliajn agordojn ... * /}Tie, ĉar la elektilo
EXAMPLE[notation=octal] estas pli specifa
ol la tipo seleccionador sole, la stilo deklaroj en la dua regulo
anstataŭigos tiuj en la unua por elementoj kiuj havas "notacio" atributo
valoro de "okuma".
Zorgo devas esti prenita ke ĉiu posedaĵo deklaroj kiuj apliki nur al la
defaŭlta kazo estas duarangigita en la ne-defaŭlta kazoj 'stilo
regulojn. 5.8.3 Klaso selectores
Laborante kun HTML, aŭtoroj povas uzi la periodon (. ) Notacio kiel alternativo al la ~= notacio kiam reprezentanta la class atributo. Tiel, por HTML, div.value kaj div[class~=value] havas la saman signifon. La atributo valoro devas tuj sekvi la "periodo" ( . ).
UAS povas apliki selectores uzante la punkto (.) Notacio en XML
dokumentoj se la UA havas nomspacon specifan scion kiu permesas lin al
determini kio atributo estas la "klaso" atributo por la respektivaj
nomspaco. Unu tia ekzemplo de nomspaco specifa scio estas la prozo en la specifo por aparta nomspaco (ekz, SVG 1.1 [SVG11] priskribas la SVG "klaso" atributo kaj kiel UA devus interpreti ĝin, kaj simile MathML 3.0 [MATH30] priskribas la MathML "klaso" atributo .)
Ekzemple, ni povas atribui stilo informon al ĉiuj elementoj kun klaso ~ = "paŝtista" jene:
Parigi subaro de "klaso" valoroj, ĉiu valoro devas esti antaŭita de ".". * .pastoral {Koloro: verda} / * ĉiuj elementoj kun klaso ~ = paŝtista * /
aŭ simple .pastoral {koloro: verda} / * ĉiuj elementoj kun klaso ~ = paŝtista * /
La jenaj kuratoroj stilon nur por H1 elementoj kun klaso ~ = "paŝtista": H1.pastoral {koloro: verda} / * H1 elementoj kun klaso ~ = paŝtista * /
Donita tiuj reguloj, la unua H1 ekzemple sube ne havus verda teksto, dum la dua volis; <H1> Ne verdaj </ H1> <H1 class = "paŝtista"> Tre verda </ H1>
Ekzemple, jena regulo egalas ajnan P elemento kies "klaso" atributo
estis atribuita listo de spaco-apartigita valorojn kiuj inkludas
"paŝtista" kaj "mara":
p.marine.pastoral {koloro: verda}
Tiu regulo matĉojn kiam class = "paŝtista blua aqua maraj" sed ne kongruas por class = "paŝtista blua".
Noto.
CSS donas tiom da potenco al la "klaso" atributo, ke aŭtoroj povus
penseble desegni ilian propran "dokumentan lingvon" bazita sur elementoj
kun preskaŭ neniu asociita prezento (kiel DIV kaj SPAN en HTML) kaj
atribuante stilo informo tra la "klaso "atributo. Aŭtoroj
devus eviti tiun praktikon ekde la strukturajn elementojn de dokumento
lingvo ofte rekonis kaj akceptis signifoj kaj aŭtoro difinitaj klasoj
eble ne.
Notu: Se ero havas multoblajn klaso atributoj, iliaj valoroj devas esti kroĉitaj kun spacoj inter la valoroj antaŭ serĉanta la klaso. De
ĉi tiu epoko la laborgrupo ne konscia de ajna maniero en kiu ĉi tiu
situacio povas esti atingita, tamen, tiel ĉi konduto estas eksplicite
ne-normiga en tiu specifo.
5.9 ID selectores
Dokumento lingvoj povas enhavi atributoj kiuj estas deklaritaj esti de tipo ID. Kion faras atributoj de tipo ID speciala estas ke neniu du tiaj atributoj povas havi la saman valoron; ajn la dokumento lingvo, ID atributo povas uzi por unike identigi lia elemento. En HTML ĉiuj ID atributoj estas nomataj "identigilo"; XML aplikaĵoj povus nomi ID atributoj malsame, sed la sama limigo aplikiĝas.La ID atributo de dokumento lingvo permesas aŭtoroj atribui ensalutilo por unu elemento ekzemple en la dokumento arbo. CSS ID selectores kongruas elementon ekzemple surbaze lia identificador. Al CSS ID seleccionador enhavas "#" tuj sekvata de la ID valoro, kiu devas esti ensalutilo.
Notu ke CSS ne specifas kiel UA scias la ID atributo de elemento. La UA povas, ekzemple, legi dokumenton de DTD, havas la informon malfacile-kodita aŭ demandi la uzanton.
La jenaj ID seleccionador egalas la H1 elemento kies ID atributo havas la valoron "chapter1":
h1 # chapter1 {teksto-align: center}
En jena ekzemplo, la stilo regulo egalas la elemento kiu havas la ID valoro "z98y". La regulo estos tiel kongrui por la P elemento:
ID selectores havas altan specifecon ol atributo selectores. Ekzemple, en HTML, la seleccionador # p123 estas pli specifa ol [id = p123] en terminoj de la akvofalo . <HEAD> <TITLE> Matĉo P </ title> <STYLE type = "text / css"> * # Z98y {letero-Interspacigo: 0.3em} </ STYLE> </ HEAD> <BODY> <P id = z98y> Larĝa teksto </ P> </ BODY>En la sekva ekzemplo, tamen, la stilo regulo nur kongruas kun H1 elemento kiu havas ID valoro de "z98y". La regulo ne kongruas la P elemento en ĉi tiu ekzemplo:
<HEAD> <TITLE> Matĉo H1 nur </ title> <STYLE type = "text / css"> H1 # z98y {letero-Interspacigo: 0.5em} </ STYLE> </ HEAD> <BODY> <P id = z98y> Larĝa teksto </ P> </ BODY>
Noto. En XML 1.0 [XML10] , la informo pri kiu atributo enhavas elementon de IDs estas enhavita en DTD. Kiam sintaksa analizo XML, Sau ne ĉiam legas la DTD, kaj tiel eble ne scias kion la ID de ero estas. Se stilon folio diseñador scias aŭ ĝi suspektas ke ĉi tiu estos la kazo, ĝi devus uzi normalan atributo selectores anstataŭe:
Se ero havas multoblajn ID atributoj, ĉiuj ili devas esti traktitaj
kiel IDs por ke elemento por la celoj de la ID seleccionador. Tia situacio povus esti atingita uzante miksaĵojn de xml: id [XMLID] , DOM3 Core [DOM-LEVEL-3-CORE] , XML DTDs [XML10] kaj nomspaco-specifaj scioj. [name=p371] anstataŭ #p371 . Tamen, la akvofalo ordo de normala atributo selectores estas malsama ID selectores. Ĝi povas esti necesa aldoni "! Grava" prioritato al la deklaroj: [name=p371] {color: red ! important} [name=p371] {color: red ! important} . 5.10 Pseŭdo-elementoj kaj pseŭdo-klasoj
En CSS 2.1, stilo kutime alkroĉita al elemento bazita sur ĝia pozicio en la dokumenton arbo . Tiu simpla modelo estas sufiĉa por multaj kazoj, sed iuj komunaj eldonado scenaroj ne ebla pro la strukturo de la dokumentoj arbo . Ekzemple, en HTML 4 (vidu [HTML4] ), neniu elemento rilatas al la unua linio de alineo, kaj tial neniu simpla CSS selector povas rilati al ĝi.CSS enkondukas la konceptojn de pseŭdo-elementoj kaj pseŭdo-klasoj permesi formatado bazita sur informoj kiu kuŝas ekster la dokumento arbo.
- Pseŭdo-elementoj krei abstraktaĵoj pri la dokumento arbo preter tiuj specifita de la dokumento lingvo. Ekzemple, dokumento lingvoj ne proponas mekanismojn por aliri la unua litero aŭ unua linio de elemento enhavo. CSS pseŭdo-elementoj permesas stilo folio diseñadores por rilati al tiu alie nealireblaj informo. Pseŭdo-elementoj ankaŭ povas disponigi stilo folio diseñadores manieron asigni stilo al enhavo kiu ne ekzistas en la fonto dokumentoj (ekz, la cxeesto kaj: post pseŭdo-elementoj donas aliron al generita enhavo).
- Pseŭdo-klasoj klasifiki elementojn sur karakteroj krom siaj nomo, atributoj aŭ enhavon; principe karakterizaĵojn kiuj ne povas dedukti de la dokumento arbo. Pseŭdo-klasoj povas esti dinamika, en la senco ke elemento povas akiri aŭ perdi pseŭdo-klaso dum uzanto interagas kun la dokumento. La esceptoj estas ': unua infano , kiun oni povas dedukti de la dokumento arbo, kaj ': lang () ' , kiu povas esti konkludita el la dokumento arbo en iuj kazoj.
Pseŭdo-klasoj estas permesita ie en selectores dum pseŭdo-elementoj povas nur esti aldonita post la lasta simpla selector de la seleccionador.
Pseŭdo-elemento kaj pseŭdo-klaso nomoj kazo-sensenta.
Kelkaj pseŭdo-klasoj estas reciproke ekskluzivaj, dum aliaj povas esti aplikita samtempe al la sama elemento. En kazo de konfliktantaj reguloj, la normala kaskadan ordon determinas la rezulton.
5.11 Pseŭdo-klasoj
5.11.1 : unua infano pseŭdo-klaso
La : unua infano pseŭdo bonegajn matĉojn elemento kiu estas la unua infano elemento de iu alia elemento.
En jena ekzemplo, la seleccionador egalas ajnan P elemento kiu estas la unua infano de DIV elemento. La regulo elstrekas deŝovon por la unua paragrafo de DIV:
div> p: unua infano {teksto-indent: 0}
Ĉi selector egalus la P ene la DIV de la sekva fragmento: <P> La lasta P antaŭe la noto. <Div class = "noto"> <P> La unua P ene la noto. </ DIV>sed ne egalas la dua P en la sekva fragmento:
<P> La lasta P antaŭe la noto. <Div class = "noto"> <H2> Noto </ H2> <P> La unua P ene la noto. </ DIV>
Jena regulo aroj la tiparo pezo por 'grasaj' por ajna EM elemento kiu estas iu posteulo de P elemento kiu estas unua infano:
Notu ke kiam anonima skatoloj ne estas parto de la dokumento arbo, ili ne rakontas kiam kalkulanta la unua infano. p: unua infano ilin {font-pezo: aŭdaca}
Ekzemple, la EM en:
La sekvaj du selectores estas ekvivalentaj: <P> abc <EM> defaŭlta </ EM>
Estas la unua filo de la P. *> Al: unua infano / * A estas unua infano de ajna elemento * / al: unua infano / * Sama * /
5.11.2 La ligilo pseŭdo-klasoj : : ligilo kaj : vizititaj
Uzanto agentoj komune montri mankajn je ligojn alimaniere de antaŭe vizitis ones. CSS provizas la pseudo-klasoj: ligilo 'kaj': vizititaj 'por distingi ilin:- La: ligilo pseŭdo-klaso validas por ligilojn kiuj ankoraŭ ne vizitis.
- La: vizitis pseŭdo-klaso validas iam la ligilo estis vizitita de la uzanto.
La du ŝtatoj estas reciproke ekskluzivaj.
La dokumenton lingvo determinas kiuj eroj estas hiperligilo fonto ankroj. Ekzemple, en HTML4, la ligilo pseŭdo-klasoj apliki al A elementoj kun "href" atributo. Tiel, la sekvaj du CSS 2.1 deklaroj havas similan efekton:
a: link {koloro: ruĝa} : Link {koloro: ruĝa}
Se la sekva ligilo:
<A Class="external" href="http://out.side/"> ekstera ligilo </A>
estis vizitita, tiu regulo: a.external: vizitis {koloro: blua}
kaŭzos ĝin esti blua.
Noti.
Ĝi eblas por stilo folio aŭtoroj trouzi la: ligilo kaj: vizitis
pseŭdo-klasoj por determini kion ejoj uzanto vizitis sen la uzanto
konsentas.
UAS povas do trakti ĉiuj ligoj kiel mankajn je ligiloj, aŭ apliki
aliajn mezurojn por konservi la uzanto privateco dum farante vizitis kaj
mankajn je ligojn alimaniere. Vidu [P3P] por pli da informoj pri uzado privacidad. 5.11.3 La dinamika pseŭdo-klasoj: : ŝvebi , : aktiva , kaj : fokuso
Interaktiva uzanto agentoj foje ŝanĝi la desegnadon en respondo al uzanto agoj. CSS disponigas tri pseŭdo-klasoj por komunaj kazoj:- La: ŝvebado pseŭdo-klaso validas dum la uzanto designa ero (kun iuj indikanta aparato), sed ne aktivigas ĝin. Ekzemple, vida uzanto agento povus apliki ĉi pseŭdo-klaso kiam la kursoro (muskursoron) ŝvebas super skatolo generita per la elemento. Uzanto agentoj ne apogi interagaj amaskomunikiloj ne devas apogi ĉi pseŭdo-klaso. Iuj laŭigante uzanto agentoj apogante interagaj amaskomunikiloj ne povi elporti ĉi pseŭdo-klaso (ekz, plumo aparato).
- La: aktiva pseŭdo-klaso validas dum ero estas aktivigita de la uzanto. Ekzemple, inter la fojoj la uzanto premas la musbutonon kaj liberigas.
- La: fokuso pseŭdo-klaso validas dum ero havas la fokuson (akceptas klavaro okazaĵoj aŭ aliaj formoj de teksto enigo).
CSS ne difinas kio elementoj estu en la supre ŝtatoj, aŭ kiel la ŝtatoj eniris kaj eliris. Scripting povas ŝanĝi ĉu elementoj reagas al uzanto eventoj aŭ ne, kaj malsamaj aparatoj kaj UAS povas havi malsamajn manierojn indikante, aŭ aktivigi elementoj.
CSS 2.1 ne difinas se la gepatro de elemento kiu estas ': aktiva' aŭ ': ŝvebado' estas ankaŭ en tiu stato.
Uzanto agentoj estas ne postulita al reflow a nunan dokumenton pro pseŭdo-klaso transiroj. Ekzemple, stilo folio povas specifi ke la 'tiparo-grandeco' de: aktiva ligilo devus esti pli granda ol tiu de senaga ligo, sed ekde tiu povas kaŭzi literoj ŝanĝi pozicion kiam la leganto elektas la ligon, la UA povas ignori la responda stilo regulo.
a: link {koloro: ruĝa} / * mankajn je ligiloj * / al: vizitis {koloro: blua} / * vizititaj ligiloj * / al: ŝvebado {koloro: flava} / * uzanto ŝvebas * / al: aktiva {koloro: kalko} / * aktivaj ligiloj * /Notu ke la A: ŝvebado devas meti post la A: link kaj A: vizitis reguloj, ĉar alie la kaskadan reguloj kaŝos la 'koloro' proprieto de la A: ŝvebado regulo. Simile, ĉar A: aktiva estas metita post A: ŝvebado, la aktiva koloro (kalko) aplikos kiam la uzanto ambaŭ aktiva kaj ŝvebas super la A elemento.
Ekzemplo de kombinado dinamika pseŭdo-klasoj:
Por informo pri la prezento de fokuso konturoj, bonvolu konsulti la sekcion sur dinamika fokuso konturoj . al: fokuso {background: flava} al: fokuso: ŝvebado {background: blanka}La lasta seleccionador matĉojn A elementoj kiuj estas en pseŭdo-klason: fokuso kaj en pseŭdo-klason: ŝvebado.
Noto. En CSS1, la ': aktiva' pseŭdo-klaso estis reciproke ekskluziva kun ': ligilo' kaj ': vizititaj'. Ke jam ne estas la kazo. Ero
povas esti samtempe ': vizititaj' kaj ': aktiva' (aŭ ': ligilo' kaj ':
aktiva') kaj la normala kaskadan reguloj determinas kion stilo deklaroj
apliki.
Noto. Ankaŭ notu, ke en CSS1, la ': aktiva' pseŭdo-klaso nur aplikita al ligoj.
5.11.4 La lingvo pseŭdo-klason: : lang
Se la dokumento lingvo precizigas kiel la homa lingvo de elemento estas determinita, ĝi eblas skribi elektiloj en CSS kiuj kongruas elementon bazita sur ĝia lingvo. Ekzemple, en HTML [HTML4] , la lingvo estas determinita per kombinaĵo de la "lang" atributo, la META elemento, kaj eble por informo de la protokolo (kiel HTTP kaplinioj). XML uzas atributo nomata xml: lang kaj farigxos alia dokumento lingvo-specifaj metodoj por determini la lingvon.La pseŭdo-klaso: lang (C) 'egalas se la elemento estas en lingvo C. Ĉu ekzistas matĉo baziĝas sole sur la ensalutilo C esti aŭ egala al, aŭ streketo apartigitajn subĉeno de la elemento lingvo valoro, en la sama maniero kvazaŭ plenumita per la '| =' operatoro. La trafaj de C kontraŭ la elementon lingvo valoro realigas kazo-insensitively por karakteroj ene la ASCII gamo. La identificador C ne devas esti valida lingvo nomo.
C nepre ne estu malplena.
Noto: ĝi rekomendas ke dokumentoj kaj protokoloj indiki lingvon uzante kodoj de BCP 47 [BCP47] aŭ lia posteulo, kaj per "xml: lang" ecoj en la kazo de XML-bazitaj dokumentoj [XML10] . Vidu "Oftaj Demandoj: Du-leteron aŭ tri-litera lingvo kodoj."
La jenaj reguloj metis la citilojn por HTML dokumento kiu estas aŭ en kanada franca aŭ la germana:
html: lang (fr-ca) {citaĵoj: « ''» "} html: lang (de) {citaĵoj: ' »' '«' '\ 2039' '\ 203A'} : Lang (fr)> Q {citaĵoj: « ''» '} : Lang (de)> Q {citaĵoj: ' »' '«' '\ 2039' '\ 203A'}La dua paro da reguloj vere agordi la 'citilojn' proprieto sur Q elementoj laŭ la lingvo de lia patro. Ĉi tiu estas farita pro la elekto de kurzo markoj estas tipe bazita sur la lingvo de la elemento ĉirkaŭ la citaĵo, ne la citaĵo mem: kiel ĉi peco de franca "à l'improviste" en la mezo de angla teksto uzas la anglan citiloj .
Rimarku la diferencon inter [lang | = xx] kaj: lang (xx).
En ĉi HTML ekzemple, nur la KORPO matĉojn [lang | = fr] (ĉar ĝi havas
LANG atributo) sed ambaŭ la korpo kaj la P matĉo: lang (fr) (ĉar ambaŭ
estas en la franca).
<Korpo lang = fr> <P> Je suis Français. </ P> </ Body>
5.12 Pseŭdo-elementoj
Pseŭdo-elementoj kondutas ĝuste kiel reala elementoj en CSS kun la esceptoj priskribita sube kaj aliloke.
Notu ke la suba sekcio ne difinas la ĝusta interpreto de ': unua-linio' kaj ': unua litero' en ĉiuj kazoj. Estonteco nivelo de CSS povas difini ilin pli precize.
5.12.1 La : unua-linio pseŭdo-elemento
La: unua-linio pseŭdo-ero validas specialaj stiloj al la enhavo de la unua formatita linion de alineo. Ekzemple: p: unua-linio {teksto-konverto: majusklajn}
La supre regulo signifas "ŝanĝi la literoj de la unua linio de ĉiu alineo al majuskla". Tamen, la seleccionador "P: unua-linio" ne konvenas iun realan HTML elemento. Ĝi kongruas pseŭdo-elemento kiu laŭigante uzanto agentoj donos enmeti komence de ĉiu alineo. Notu ke la longo de la unua linio dependas de numero de faktoroj, Inkluzivanta la larĝeco de la paĝo, la tiparo, ktp Tiel, ordinara HTML alineo kiel:
<P> Jen iom longa HTML paragrafo kiu rompos en pluraj linioj. La unua linio estos identigitaj per fikcia etikedo sekvenco. La aliaj linioj estos traktita kiel ordinara linioj en la paragrafo. </ P>la linioj de kiuj okazas esti rompitaj jene:
ĈI ESTAS iom LONG HTML alineo kiu estos rompita en pluraj linioj. La unua linio estos identigitaj per fikcia etikedo sekvenco. La aliaj linioj estos traktata kiel ordinaraj linioj en la alineo.eble "reskribita" de uzanto agentoj inkludi la fikcia etikedo sekvenco por: unua-linio. Tiu fikcia etikedo sekvenco helpas montri kiel propraĵoj estas hereditaj.
<P> <P: unua-linio> Jen iom longa HTML alineo kiu </ P: unua-linio> estos rompita en pluraj linioj. La unua linio estos identigitaj per fikcia etikedo sekvenco. La aliaj linioj estos traktita kiel ordinara linioj en la paragrafo. </ P>Se pseŭdo-elemento rompas veran elementon, la dezirata efiko povas ofte esti priskribita de fikcia etikedo sekvenco kiu fermas kaj tiam re-malfermas la elemento. Tiel, se ni markas la antaŭa alineo kun SPAN elementon:
<P> <SPAN class = "testo"> Jen iom longa HTML paragrafo kiu rompos en pluraj linioj. </ SPAN> La unua linio estos identigitaj per fikcia etikedo sekvenco. La aliaj linioj estos traktita kiel ordinara linioj en la paragrafo. </ P>la uzanto agento povis simuli komenco kaj fino etikedoj por SPAN kiam enmeto la fikcia etikedo sekvenco por: unua-linio.
<P> <P: unua-linio> <SPAN class = "testo"> Jen iom longa HTML paragrafo kiu </ SPAN> </ P: unua-linio> <SPAN class = "testo"> estu rompita en pluraj linioj. </ SPAN> La unua linio estos identigitaj per fikcia etikedo sekvenco. La aliaj linioj estos traktita kiel ordinara linioj en la paragrafo. </ P>La : unua-linio pseŭdo-elemento povas nur esti alkroĉita al bloko ujo elemento.
La "unua formatita linio" de elemento povas okazi ene de bloko-nivelo posteulo en la sama fluo (te bloko-nivelo posteulo kiu ne posicionado kaj ne kaleŝego). Ekz, la unua linio de la DIV en
<DIV><P>This line...</P></DIV> estas la unua linio de la P (supozante ke ambaŭ P kaj DIV estas bloko-nivelo). La unua linio de tablo-ĉelo aŭ inline-bloko ne povas esti la unua formatita linio de prapatro elemento. Tiel, en
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> la unua formatita linio de la DIV ne la linion "Saluton".
Notu ke la unua linio de la P en tiu fragmento:
A UA devus agi kvazaŭ la fikcia komenco etikedoj de la unua linio
pseŭdo-elementoj estis nestis nur ene la plej interna enmetanta
bloko-nivelo elemento. (Ekde CSS1 kaj CSS2 silentis sur ĉi tiu kazo, la aŭtoroj ne fidi tiun konduton.) Jen ekzemplo. La fikcia etikedo sekvenco por <p><br>First... ne enhavas ajnan literoj (supozante la defaŭlta stilo por BR en HTML 4). La vorto "unua" estas ne sur la unua formatita linio. <DIV> <P> Unue paragrafo </ P> <P> Dua paragrafo </ P> </ DIV>estas
<DIV> <P> <DIV: unua-linio> <P: unua-linio> Unua paragrafo </ P: unua-linio> </ DIV: unua-linio> </ P> <P> <P: unua-linio> Dua paragrafo </ P: unua-linio> </ P> </ DIV>La : unua-linio pseŭdo-elemento estas simila al inline-nivelo elemento, sed kun iuj limigoj. Jenaj propraĵoj apliki al: unua-linio pseŭdo-elementon: tiparo propraĵoj, koloro propraĵo, fono propraĵoj, 'vorto-Interspacigo', 'letero-Interspacigo', 'teksto-dekoracio', 'teksto-konverto', kaj 'linio -height ' . UAS povas apliki aliajn proprietojn tiel.
5.12.2 La : unua-letero pseŭdo-elemento
La: unua-letero pseŭdo-elemento devas elekti la unuan literon de la unua linio de bloko, se ĝi ne estas antaŭita de ajna alia enhavo (kiel ekzemple bildoj aŭ inline tabloj) sur ĝia linio. La: unua-letero pseŭdo-ero povas esti uzata por "komenca kaskedoj" kaj "guto kaskedoj" , kiu estas komuna tipografia efektoj. Tiun tipon de komenca litero estas simila al inline-nivelo elemento se lia 'float' propraĵo estas 'nenio', alie ĝi estas simila al flosis elemento.Tio estas la posedaĵoj kiuj aplikas al: unua-letero pseŭdo-elementoj: tiparo propraĵoj, 'teksto-dekoracio', 'teksto-konverto', 'letero-Interspacigo', 'vorto-Interspacigo' (kiam konvena), 'linio-alteco ', ' float ', ' vertikala-align ' (nur se' float 'estas' neniu '), marĝeno propraĵoj, Plenigado propraĵoj, limo propraĵoj, koloro propraĵo, fono propraĵoj. UAS povas apliki aliajn proprietojn tiel. Permesi UAS por Redonu tipografie ĝusta guto ĉapo aŭ komenca ĉapo, la UA povas elekti linion-alto, larĝo kaj alteco bazita sur la formo de la letero, kontraste al normalaj elementoj. CSS3 estas atendita havi specifajn proprietojn kiuj aplikas al la unua letero.
Tiu ekzemplo montras eblan bildigo de komenca ĉapo.
Notu ke la 'linio-alteco' kiu heredis de la unuaj literoj
pseŭdo-elemento estas 1.1, sed la UA en tiu ekzemplo komputis la alteco
de la unua litero malsame, por ke ĝi ne kaŭzas neniun nenecesan spacon
inter la unua du linioj.
Ankaŭ notu ke la fikciaj komenco etikedo de la unua litero estas
interne la SPAN, kaj tiel la tiparo pezo de la unua litero estas
normala, ne aŭdaca kiel la SPAN:
p {grupigo alteco: 1.1} p: unua-letero {font-size: 3em; font-pezo: normala} interspaco {font-pezo: aŭdaca} ... <P> <span> Het hemelsche </ span> Gerecht heeft zich dek lange lesten <br> Erbarremt super mia eo mijn benaeuwde vesten <br> Eo arme burgery, eo op mijn volcx gebed <br> Eo dagelix geschrey de bange stad ontzet.
La jenaj CSS 2.1 faros guto ĉapo komenca letero interspaco ĉirkaŭ du liniojn:
La fikcia etikedo sekvenco estas:
Por atingi tradicia guto kaskedoj formatado, uzanto agentoj povas aproksimi tiparo grandecoj, ekzemple vicigi baselines. Ankaŭ, la signo skizo povas esti prenita en konto kiam formatado.<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN"> <HTML> <HEAD> <TITLE> Drop ĉapo komenca litero </ title> <STYLE type = "text / css"> P {font-size: 12pt; linio-alteco: 1.2} P: unua-letero {font-size: 200%; font-style: kursivan; font-pezo: aŭdaca; flosi: maldekstra} SPAN {teksto-konverto: majusklajn} </ STYLE> </ HEAD> <BODY> <P> <SPAN> La unua </ SPAN> malmultajn vortojn el artikolo en La Ekonomikisto. </ P> </ BODY> </ HTML>Tiu ekzemplo povus esti formatita kiel sekvas:
La fikcia etikedo sekvenco estas:
<P> <SPAN> <P: unua-letero> T </ P: unua-letero> li unue </ SPAN> kelkaj vortoj de artikolo en la Ekonomikisto. </ P>Notu ke la: unua-letero pseŭdo-elemento etikedoj abut la enhavo (te, la komenca karaktero), dum la: unua-linio pseŭdo-era komenco etikedo estas enigita rekte post la komenco etikedo de la bloko elemento.
Punctuation (te, karakteroj difinita en Unikodo [UNICODE] en la "malferma" (Ps), "fermi" (Pe), "komenca" (Pi). "Fina" (Pf) kaj "aliaj" (Po) interpunkcio klasoj) , kiu antaŭas aŭ sekvas la unuan leteron devus esti inkludita, kiel en:
La ': unua litero' ankaŭ validas se la unua litero estas fakte cifero, ekzemple, la "6" en "67 milionoj da dolaroj estas amaso da mono."
La: unua-letero pseŭdo-elemento koncernas bloki ujo elementoj.
La: unua-letero pseŭdo-ero povas esti uzata kun ĉiuj tiaj elementoj kiuj enhavas tekston, aŭ kiuj havas posteulon en la sama fluo kiu enhavas tekston. A UA devus agi kvazaŭ la fikcia komenco etikedo de la unua letero pseŭdo-elemento estas ĝuste antaŭ la unua teksto de la elemento, eĉ se tiu unua teksto en posteulo.
Jen ekzemplo. La fikcia etikedo sekvenco por ĉi HTML fragmento:
La unua litero de tablo-ĉelo aŭ inline-bloko ne povas esti la unua litero de prapatro elemento. Tiel, en <Div> <P> La unua teksto.estas:
<Div> <P> <div: unua-letero> <p: unua-letero> T </ ...> </ ...> li unuan tekston.
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>la unua litero de la DIV ne estas la litero "H". Fakte, la DIV ne havas unuan literon.La unua litero devas okazi sur la unua formatita linio. Ekzemple, en tiu fragmento:
<p><br>First...la unua linio ne enhavas ajnan literoj kaj ': unua litero' ne kongruas ion (supozante la defaŭlta stilo por BR en HTML 4). En aparta, ĝi ne konvenas la "F" de "Unue."Se ero estas listeron ( 'display: listo-ero'), la ': unua litero' koncernas la unuan leteron en la ĉefa skatolo post la markilo. UAS povas ignori ': unua litero' sur listeroj kun 'listo-stilo-pozicio: interne'. Se elemento havas 'cxeesto' aŭ ': post' enhavo, la ': unua-letero koncernas la unuan literon de la elemento inkluzive tiun enhavon.
Ekz, post la regulo 'p: antaŭ {enhavo: "Noto:"}', la seleccionador 'p: unua litero' egalas la "N" de "Notu".
Iuj lingvoj povas havi specifajn regulojn pri kiel trakti iujn letero kombinaĵoj. Nederlande,
ekzemple, se la letero kombino "ij" aperas komence de vorto, ambaŭ
literoj devus esti konsiderita en la: unua-letero pseŭdo-elemento.Se la literoj kiuj formus la unua letero estas ne en la sama elemento, kiel ekzemple "T" en
<p>'<em>T...la UA povas krei unua letero pseŭdo-elemento de unu el la elementoj, ambaŭ elementoj, aŭ simple ne krei pseŭdo-elemento.Simile, se la unua litero (j) de la bloko estas ne je la komenco de la linio (ekzemple pro bidireccional reordenamiento), tiam la UA devas ne krei la pseŭdo-ero (j).
La sekvanta ekzemplo ilustras kiel parte kovranta pseŭdo-elementoj povas interagi. La unua litero de ĉiu P elemento estos verda kun tiparo grandeco de '24pt'. La resto de la unua formatita linio estos 'blua' dum la resto de la alineo estos 'ruĝa'.
p {koloro: ruĝa; font-size: 12pt}
p: unua-letero {koloro: verda; font-size: 200%}
p: unua-linio {koloro: blua}
<P> Kelkaj tekstoj kiuj finas en du linioj </ P>
Supozante ke linerompo okazos antaŭ la vorto "finiĝas", la fikcia etikedo sekvenco por tiu fragmento povus esti:<P> <P: unua-linio> <P: unua-letero> S </ P: unua-letero> ome tekston kiu </ P: unua-linio> finas en du linioj </ P>Notu ke la: unua-letero elemento ene la: unua-linio elemento. Propraĵoj surtabligis: unua-linio estas hereditaj de: unua-leteron, sed estas duarangigita se la sama propraĵo celas: unue-leteron.
5.12.3 La cxeesto kaj : post pseŭdo-elementoj
La 'cxeesto' kaj ': post' pseŭdo-elementoj povas esti uzata por enŝovi generita enhavo antaŭ aŭ post ero enhavo. Ili estas klarigitaj en la sekcio sur generita teksto.h1 cxeesto {enhavo: counter (chapno, supra-roman) "."}
p.special cxeesto {enhavo: "Speciala!"}
p.special: unua-letero {koloro: # ffd800}
Tiu redonos la "S" de "Speciala!" en oro.