CSS: еншілес селекторлар. DOM әдістері: ата-ана, еншілес және көрші элементтер. Қандай элемент тақырып тегінің негізгі бөлігі болып табылады
Сәлем құрметті оқырмандар! CSS селекторларының тақырыбын жалғастыра отырып, мен сіздердің назарларыңызға ұсынғым келеді еншілес және контекстік селекторлардың сипаттамасы, сондай-ақ олардың салыстырмалы талдау, өйткені олар қолданбалы логикада өте ұқсас, бірақ олардың кейбір айырмашылықтары бар.
Мен өз басылымдарымда егжей-тегжейлі тоқталдым әртүрлі түрлері CSS селекторлары: ; және де . Айтпақшы, соңғы мақалада олар қай жерде түсінді әртүрлі түрлеріатрибут селекторы, мен кірістірілген құралдың көмегімен онлайн режимінде HTML және CSS кодтарына өзгертулер енгізу арқылы теориялық есептеулерімді қалай дереу тексеруге болатынын егжей-тегжейлі сипаттадым. Google Chrome(). Бұл өңдеу құралдарында барлық танымал браузерлердің, соның ішінде Firefox () үшін Firebug плагинінің соңғы модификациялары бар.
Сондай-ақ, кез келген сайттың кез келген бетін өңдеу арқылы осы жазбаның теориялық материалын оқуға болады! Мұны істеу үшін, егер сіз Google Chrome пайдалансаңыз немесе F12 пернесін басыңыз Mozilla Firefox(). Ал енді п тегінің мазмұнымен таныстырамын, оны мысалға ала отырып зерттейміз еншілес және контекстік CSS селекторлары:
Бұл тармақ кіреді em және күшті пішімдеу тегтері, ол мәтінді ерекшелейді батылЖәне курсивпен.
Жоғарыда сипатталған өңдеу құралын қолдана отырып, мен осы абзацты өңдеу терезесінің сол жағындағы тиісті мәтінді теру арқылы тікелей осы мақалаға енгіздім, нәтижесінде осы абзацтың мәтіні беттің ең жоғарғы жағында пайда болды:
Бұл HTML құрылымы, . Бұл абзац бүгінгі жарияланымда эксперименттік болады, оның мысалын қолдана отырып, CSS ережесінде қандай селекторлар - еншілес немесе контекст қолданылатынына байланысты оның мәтінінің дизайны қалай өзгеретінін көрсетемін.
Еншілес - бұл тікелей негізгі элементтің ішінде орналасқан элемент.. Тақырыпқа тікелей кіріспес бұрын, мен тегтердің иерархиясын көрсететін суретті беремін HTML құжатыМәтіні жоғарыда келтірілген және біз бүгін талдайтын абзац мысалында:
Бұл дизайн элементтер ағашы деп те аталады. Бұл сурет тегтер арасындағы иерархиялық қатынасты білдіретін контейнерлердің ұясын анық көрсетеді. p абзац тегі қатынастың еншілес бөлігі болып табылады. Сонымен бірге күшті тег div еншісіне жатпайды, өйткені ол p контейнерінде орналасқан.
Бала CSS селекторы
Элемент ағашындағы еншілес селектор әрқашан негізгі элементтің ішінде болады, бұл жағдайда CSS селекторын жазу синтаксисі келесідей болады:
Мәнер 2- селекторға қолданылады, бірақ ол 1-ші селектордың еншілес нұсқасы болса ғана. Жоғарыдағы скриншотты элементтер тармағымен бірге толығырақ қарастырайық. Мысалы, синтаксистен кейін келесі ережені орнатуға болады:
P> em (түсі: жасыл;)
Бұл ереже абзацтың соңғы сөзіне "курсив" ретінде әсер етеді, себебі ол ашу және жабу эм тегтерінің арасында орналасқан. Em тегі p тілінің еншілес белгісі болып табылады, себебі ол оның ішінде тікелей орналастырылған, сондықтан мазмұн мәтіні, атап айтқанда, «курсив» сөзі жасыл түске боялады.
Дегенмен, басқа em тегі p тегінің тікелей еншілес бөлігі емес, себебі ол күшті тегтің бөлігі болып табылады, сондықтан абзацтың «em және күшті пішімдеу тегтері» бөлігі боялмайды.
Мәтінмәндік CSS селекторы
Оны анықтайтын кез келді контекст дегеніміз не CSS селекторы . Сайттың белгілі бір бетін орналастырған кезде тегтер көбінесе бірінің ішіне бірінің ішіне орналастырылады. Мұндай элементтерге арналған стильдердің дұрыс жұмыс істеуі үшін кейбір контексте әрекет ететін селекторлар пайдаланылады, демек, аты.
Егер CSS ережесін қолдану үшін еншілес селектор міндетті түрде негізгі элементтің (бірінші кірістірілген деңгей) ішінде орналасуы керек болса, онда контекст селекторы үшін бұл мүлдем маңызды емес және кез келген кірістіру деңгейін қолдануға болады, бәрібір элемент. қасиеттер ата-анадан беріледі. Синтаксис осылайша:
Көріп отырғаныңыздай, контекстік селектор бос орынмен бөлінген қарапайым селекторлардан тұрады. Мәтінмәндік селекторлар үшін екі немесе одан да көп кірістірілген тегтерді пайдалануға рұқсат етіледі. Енді жоғарыда келтірілген сыналған абзац үшін CSS ережесін құрастырайық:
Пем (түсі: жасыл;)
Көріп отырғаныңыздай, тікелей em пішімдеу тегінде қамтылған абзац мазмұны бөлігінің мәтіні ғана емес, яғни «курсив» сөзі жасыл түске боялған, сонымен қатар басқа em мәтіндік бөлімі де жасыл түске боялған. тег, ол да күшті тегтің бөлігі болып табылады. Бұл еншілес селектордан айырмашылығы, кірістірілген деңгей маңызды емес мәтінмән селекторы бар ереже жұмыс істейтіндіктен орын алды. Бұл еншілес және контекстік селекторлар арасындағы негізгі айырмашылық.
Мәтінмән мен еншілес селекторлардың біздің абзацпен әрекеттесуінің тағы бір мысалын қарастырайық. Балаға және контекстік селекторларға арналған келесі CSS ережелерін жазайық:
Div em (түс: қызыл;) p > em (түс: жасыл;)
Осыдан кейін біздің параграф келесі пішімге ие болады:
Көріп отырғаныңыздай, em және күшті тегтерге салынған мәтін бөлігі қызыл түске боялған, себебі ол үшін мәтінмәндік селектор ережесі дұрыс, яғни em тегі күшті және div контейнерлерінде және кірістіру деңгейі сияқты қазірдің өзінде атап өтті, маңызды емес.
Сұрақ туындайды: неге em мазмұны болып табылатын «курсив» сөзі жасыл түске боялған? Өйткені, контексті таңдау ережесі оған да қатысты. Бірақ еншілес таңдаушы ережесі абзац мәтінінің осы бөлігіне де қолданылады, себебі ол еншілес селектор үшін элемент тікелей p тегінде болуы керек деген шартқа қайшы келмейді.
Мәселе мынада, CSS төменде CSS сипаттары үшін басымдық заңына ие. Яғни, бұл жағдайда еншілес селектор ережесі құжаттағы div контекстік селекторы үшін көрсетілген CSS мәнерлерінен төменірек болады. Сондықтан «курсив» сөзі жасыл. Егер сіз оларды ауыстырсаңыз, онда «p> em (түс: жасыл;)» ережесі жұмысын тоқтатады және мәтіннің «курсив» бөлімі қызыл болады.
CSS еншілес селекторлары басқа (ата-ана) элементтердің еншілестері болған кезде ғана элементтерге стильдерді қолдану үшін пайдаланылатын селекторлар. Еншілес селекторлар сияқты, еншілес селекторлар қарапайым селекторлардан (сыныптар, идентификаторлар және т.б.) тұратын құрама селекторлар болып табылады.
Тағы да, егер сіз еншілес элементтердің не екенін ұмытып қалсаңыз, бұрыннан білетін мысалды қарастыру арқылы еске түсірейік.
<тег1> <тег2>... <тег3><тег4>...
Элемент басқа элементтің еншілес элементі деп аталады, егер ол оның ішінде бірінші ұя салу деңгейінде болса. Біздің мысалда<тег2>Және<тег3>қыздары<тег1>, бірақ<тег4>-бұл қызы<тег3> .
Еншілес селекторлар ">" арқылы бөлінген екі немесе одан да көп қарапайым селекторлардан тұрады, мұнда алдымен ата-ана, содан кейін оның еншісі, содан кейін сол еншілестің еншісі және т.б. Яғни, ұрпақ селекторларындағы сияқты, құжат ағашы арқылы өтетін жол көрсетіледі. Стильдер таңдаушылары тізімде соңғы болатын элементтерге ғана қолданылады. Жалпы синтаксис:
селектор1 > селектор2 (
«>» белгісінің екі жағындағы бос орындар қалауыңызша енгізілуі немесе енгізілмеуі мүмкін.
CSS еншілес селекторларын пайдалану мысалы
1-параграф.
2-тармақ.
Браузердегі нәтиже
1-параграф.
2-тармақ.
Бұл мысалда сіз екі тармаққа назар аударуыңыз керек. Мұнда үш элемент бар, бірақ олардың тек екеуінде жиектер, толтырулар және жиектер бар. Неліктен? Және екінші нүкте. Тек бірінші абзацта көк мәтін бар.
Internet Explorer 6.0 еншілес селекторларды түсінбейді, сондықтан сайтыңызды осы ескі браузерді ескере отырып жасасаңыз, оны есте сақтаңыз.
HTML кестелеріндегі еншілес селекторлар
Сайтты жасауда көптеген жаңадан бастағандар (кейде жаңадан бастаушылар емес) HTML кестелерінде еншілес селекторларды пайдалану кезінде белгілі бір мәселелерге тап болады. Сізге не туралы айтып жатқанымыз туралы түсінік беру үшін осындай қарапайым үстелді қарастырайық.
| 1.1 ұяшығы | 1.2 ұяшық |
| 2.1 ұяшығы | 2.2 ұяшығы |
Ал енді сұрақ. Тегтен ұяшықтарға өту үшін еншілес селекторларды пайдалану қажет болса, не істер едіңіз? Егер сіз осылай жазуды шешсеңіз, бұл дұрыс емес:
кесте > tr > td( қасиет: құндылық; қасиет: құндылық; ... )
Неліктен дұрыс емес екенін болжай аласыз ба? Жоқ па? Шындығында, сіз тағы бір элементті ұмытып қалдыңыз - ол анық көрсетілмесе де, әрбір HTML кестесінде әлі де көрінбейді. Оның қажетті ашу және жабу тегтері жоқ, сондықтан ол жиі назардан тыс қалады. Айтпақшы, иә, HTML оқулығыбіз оны өткерген жоқпыз, өйткені шын мәнінде оның нақты көрсетілімі сирек қажет. Менің ойымша, сіз дұрыс жазбаның қандай болатынын болжағансыз, бірақ мен сізге бәрібір көрсетемін.
кесте > tbody > tr > td( қасиет: құндылық; қасиет: құндылық; ... )
Айтпақшы, кестелерде қосымша ашу тегтері бар элементтер ғана емес, сонымен қатар мұндай элементтер де бар. Іс жүзінде «ұмыту проблемалары» кестелерде жиі кездеседі, сондықтан мен сіздің назарыңызды осыған аудардым.
Үй жұмысы.
- Беттегі қаріпті Arial өлшеміне 0,9em және кейбір фонға орнатыңыз.
- Бетке бірнеше тақырыптар мен абзацтарды жазыңыз, тақырып мәтінінің өлшемін және түсін қалауыңызша өзгертіңіз.
- Беттің абзацтарындағы сілтемелерді астын сызусыз көк түске айналдырыңыз. Бірақ сонымен бірге, егер сілтемелер кез келген тегпен қосымша жиектелсе, мысалы, курсив үшін, онда олар астын сызу және қызыл түспен көрсетілу керек. Әрбір кадрлық тегпен сілтеме стильдерін бөлек белгілеудің қажеті жоқ екеніне тағы да назар аударамын, оны әмбебап жасаңыз. Қалай? Ойлау.
- Беттің оң жағында шағын мәзір жасаңыз және оны түзетіңіз, ол үшін сізге сипат және онымен бірге жүретін тағы бірнеше сипаттар қажет, сіз оны сол жерде анықтайсыз. Сонымен қатар, мәзір браузер терезесінде орнында ғана емес, сонымен қатар айналдыру кезінде бет мазмұнына өтпеуі керек.
Ойлау соңғы абзацсабақ сіз үшін ең қиын болады, бірақ позицияны дамытуға бірден толығымен енуге тырыспаңыз. Тек үй тапсырмасын орында. Айтпақшы, бұл тармақ Internet Explorer 6.0-де жұмыс істемейді, өйткені қарт бекітілген позицияны түсінбейді.
Влад Мержевич
Еншілес элемент - бұл тікелей негізгі элементтің ішінде болатын элемент. Құжат элементтері арасындағы байланыстарды жақсырақ түсіну үшін кішкене кодты бөліп көрейік (12.1-мысал).
12.1-мысал. Құжаттағы элементтерді кірістіру
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Бұл ең аз емес, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
IN бұл мысалкодта бірінің ішінде орналасқан бірнеше контейнерлер пайдаланылады. Мұны элемент ағашында анық көруге болады, бұл құжат тегтері арасындағы қатынастар құрылымының атауы (12.1-сурет).
Күріш. 12.1. Мысал үшін элементтер ағашы
Суретте. 12.1 ыңғайлы пішінде элементтерді орналастыру және олардың иерархиясы ұсынылған. Мұнда тегтің баласы ретінде
Дегенмен, тег тегтің баласы емес Селекторларға қайта оралайық. Еншілес селектор тікелей элементтер тармағындағы негізгі элементтің ішінде орналасқан. Мұндай селекторларды пайдалану синтаксисі келесідей. 1 селектор > селектор 2 ( стиль ережелерінің сипаттамасы ) Мәнер 2- селекторға қолданылады, бірақ ол 1- селектордың еншілес нұсқасы болса ғана. 12-1-мысалға қайта сілтеме жасай отырып, P > EM ( түсі: қызыл ) стилі құжаттың бірінші абзацына орнатылады, себебі тег контейнердің ішінде болады Және екінші абзац үшін ешқандай нәтиже бермейді. Және бәрі тегтің арқасында екінші абзацта контейнерде орналасқан , сондықтан ұя салу шарты бұзылады. Өз логикасында еншілес селекторлар контекстік селекторларға ұқсас. Олардың арасындағы айырмашылық мынада. Еншілес селектор тікелей еншілес болған кезде ғана стильденеді, басқаша айтқанда, тікелей тектік элемент ішінде. Мәтінмән селекторы үшін кірістендірудің кез келген деңгейіне рұқсат етіледі. Қауіптің не екенін түсіну үшін келесі кодты талдап көрейік (12.2-мысал). 12.2-мысал. Мәтінмәндік және еншілес селекторлар HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet Долор магна aliguam erat volutpat. Бұл мысалдың нәтижесі суретте көрсетілген. 12.2. Күріш. 12.2. Мәтін түсі еншілес селектормен орнатылады Бір тег үшін мысалда екі ереже бір уақытта жұмыс істейді: контекстік селектор (тег ішінде орналасқан ). Сонымен қатар, ережелер баламалы, өйткені олар үшін барлық шарттар орындалады және бір-біріне қайшы келмейді. Мұндай жағдайларда төмендегі кодта орналасқан стиль қолданылады, сондықтан курсив мәтін қызыл түспен көрсетіледі. Ережелер кері өзгертіліп, төменде DIV I қойылса, мәтін түсі қызылдан жасылға өзгереді. Көп жағдайда еншілес селекторларды қосу мәтінмән селекторларымен ауыстыру арқылы өткізілмеуі мүмкін екенін ескеріңіз. Дегенмен, еншілес селекторларды пайдалану сізге элемент мәнерлерін көбірек басқаруға мүмкіндік береді, нәтижесінде қалаған нәтиже, сонымен қатар қарапайым және сипаттаушы код алынады. Бұл селекторларды бар элементтер үшін пайдалану өте ыңғайлы иерархиялық құрылым- бұл, мысалы, кестелер мен әртүрлі тізімдерді қамтиды. 12-3-мысал мәнерлер арқылы тізімнің көрінісін өзгерту жолын көрсетеді. Бір тізімді екіншісіне кірістіру арқылы біз мәзірдің бір түрін аламыз. Тақырыптар көлденеңінен орналастырылған, ал сілтемелер жиынтығы тақырыптардың астына тігінен орналастырылған (12-3-сурет). Күріш. 12.3. Мәзір тізімі Мәтінді көлденең орналастыру үшін қалқымалы мәнер сипаты LI селекторына қосылады. Көлденең және тік тізімдердің мәнерін бөлу үшін еншілес селекторлар пайдаланылады (12.3-мысал). 12.3-мысал. еншілес селекторларды пайдалану HTML5 CSS 2.1 IE Cr Op Sa Fx
Бұл мысалда еншілес таңдаушылар әртүрлі тапсырмаларды орындайтын жоғарғы деңгейлі тізім элементтерінің және кірістірілген тізімдердің мәнерін бөлуді талап етеді, сондықтан олардың мәнері бір-біріне сәйкес келмеуі керек. 1. Қою курсив мәтін кодта қандай түсті болады Жарықтандыру стандарттары негізделген бейнелеу шығармаларының классификациясының негізібелгілі бір сандық негіздер бойынша. Келесі стильді қолданғанда? P (түсі: жасыл; ) 2. Қандай элемент тегтің негізгі элементі болып табылады тармақ және онда майлыэлемент және мұнда бейімэлемент. Мұнда майлыЖәне асты сызылған және қиғашэлементтері.
Тексеруге арналған сұрақтар
B (түсі: көк; )
I (түсі: қызғылт сары; )
B > I (түсі: зәйтүн; )
P > I (түсі: сары; )