Гэр / Нийгмийн сүлжээ / css хүүхэд элементүүдийг иш татдаг. DOM-ийг удирдах арга техник: эцэг эх, хүүхэд, хөршийн элементүүд. Шалгах асуултууд

css хүүхэд элементүүдийг иш татдаг. DOM-ийг удирдах арга техник: эцэг эх, хүүхэд, хөршийн элементүүд. Шалгах асуултууд

Сайн байна уу эрхэм уншигчид! CSS сонгогчдын сэдвийг үргэлжлүүлж, би та бүхний анхаарлыг татахыг хүсч байна хүүхэд болон контекст сонгогчдын тайлбар, түүнчлэн тэдгээрийн харьцуулсан шинжилгээ, учир нь хэрэглээний логикийн дагуу тэдгээр нь хоорондоо маш төстэй боловч зарим ялгаа байдаг.

Би хэвлэлүүддээ янз бүрийн зүйлийг нарийвчлан авч үзсэн CSS-ийн төрлүүдсонгогчид: ; түүнчлэн . Дашрамд хэлэхэд, сүүлчийн нийтлэлд тэд хаана ойлгосон янз бүрийн төрөлшинж чанар сонгогч, би суурилуулсан хэрэгслийг ашиглан HTML болон CSS кодыг онлайнаар өөрчлөх замаар онолын тооцоогоо хэрхэн нэн даруй шалгаж болохыг нарийвчлан тайлбарласан. Гүүгл Кром(). Эдгээр засварлах хэрэгслүүд нь Firefox-д зориулсан Firebug залгаас () зэрэг бүх алдартай хөтчүүдийн хамгийн сүүлийн үеийн өөрчлөлттэй.

Та мөн энэ нийтлэлийн онолын материалыг дурын сайтын аль ч хуудсыг засварлах замаар судлах боломжтой! Үүнийг хийхийн тулд та Google Chrome ашиглаж байгаа бол F12 товчийг дарна уу Mozilla Firefox(). Одоо би жишээн дээр бид судлах болно p тагийн агуулгыг танилцуулах болно хүүхэд болон контекст CSS сонгогчид:

Энэ догол мөрөнд орно em болон хүчтэй форматлах шошгууд, текстийг онцолсон зоригтойболон налуу үсгээр.

Дээр тайлбарласан засварлах хэрэгслийг ашиглан би энэ догол мөрийг засварлах цонхны зүүн талд тохирох текстийг бичиж, энэ нийтлэлд шууд оруулсан бөгөөд үүний үр дүнд энэ догол мөрийн текст хуудасны хамгийн дээд хэсэгт гарч ирэв.


Энэхүү HTML бүтэц , . Энэ догол мөр нь өнөөдрийн хэвлэлд туршилтын шинж чанартай байх бөгөөд жишээн дээр би CSS дүрэмд аль сонгогч - хүүхэд эсвэл контекст - ашиглаж байгаагаас хамааран текстийн дизайн хэрхэн өөрчлөгдөж байгааг харуулах болно.

Хүүхэд бол эх элементийн дотор шууд байрладаг элемент юм.. Сэдэв рүү шууд орохын өмнө би шошгоны шатлалыг тусгасан зургийг өгөх болно HTML баримт бичигДогол мөрийн жишээн дээр дээр дурдсан текстийг бид өнөөдөр шинжлэх болно.

Энэ загварыг мөн элементийн мод гэж нэрлэдэг. Энэ зураг нь савны үүрийг тодорхой харуулсан бөгөөд энэ нь шошго хоорондын шаталсан харилцааг илтгэнэ. p догол мөрийн таг нь харилцааны хүүхэд юм. Үүний зэрэгцээ, хүчтэй шошго нь p саванд байрладаг тул div-ийн хүүхэд биш юм.

Хүүхдийн CSS сонгогч

Элементийн мод дахь хүүхэд сонгогч нь үргэлж үндсэн элемент дотор байдаг бөгөөд энэ тохиолдолд CSS сонгогч бичих синтакс дараах байдалтай байна:

Загвар нь Selector 2-д хэрэглэгдэх боловч энэ нь Selector 1-ийн хүүхэд байвал л хэрэг болно. Дээрх дэлгэцийн агшинг ашиглан элементийн модыг ашиглан сайтар харцгаая. Жишээлбэл, синтаксийг дагаж та дараах дүрмийг тохируулж болно.

P> em (өнгө: ногоон;)

Энэ дүрэм нь догол мөрийн сүүлчийн үгэнд "Налуу" гэж нөлөөлнө, учир нь энэ нь нээх, хаах эм тагуудын хооронд хавсаргасан үг юм. Эм таг нь p-ийн хүүхэд тул дотор нь шууд байрлуулсан тул агуулгын текст, тухайлбал "налуу" гэсэн үг ногоон өнгөтэй болно.


Гэхдээ нөгөө em таг нь p тагийн шууд хүүхэд биш, учир нь энэ нь хүчтэй тагийн нэг хэсэг учраас догол мөрний “em ба хүчтэй форматлах шошго” хэсгийг өнгөөр ​​ялгахгүй.

Контекст CSS сонгогч

Үүнийг ойлгох цаг нь болсон CSS контекст сонгогч гэж юу вэ. Сайтын тодорхой хуудсыг байрлуулахдаа шошго нь ихэвчлэн нэг нэгнийх нь дотор байрладаг. Ийм элементүүдийн хэв маягийг зөв ажиллуулахын тулд зарим контекстэд ажилладаг сонгогчдыг ашигладаг тул нэр нь ийм байдаг.

Хэрэв CSS дүрмийг хэрэгжүүлэхийн тулд хүүхэд сонгогч нь үндсэн элемент (эхний үүрлэх түвшин) дотор шууд байрлах ёстой бол контекст сонгогчийн хувьд энэ нь огт чухал биш бөгөөд ямар ч үүрлэх түвшинг ямар ч байсан элементэд ашиглаж болно. өмч хөрөнгийг эцэг эхээс шилжүүлнэ. Синтакс нь дараах байдалтай байна.

Таны харж байгаагаар контекст сонгогч нь хоосон зайгаар тусгаарлагдсан энгийн сонгогчдоос бүрдэнэ. Контекст сонгогчдын хувьд хоёр буюу түүнээс дээш үүрлэсэн шошго ашиглахыг зөвшөөрдөг. Одоо миний дээр дурдсан тестийн догол мөрний CSS дүрмийг зохиоё:

Пэм (өнгө: ногоон;)


Таны харж байгаагаар эм форматлах шошгонд шууд хавсаргасан догол мөрийн агуулгын хэсгийн текст, өөрөөр хэлбэл "налуу" гэсэн үг нь ногоон өнгөтэй байна, гэхдээ бас өөр em тагийн текст. , энэ нь бас хүчтэй шошгоны нэг хэсэг юм. Энэ нь контекст сонгогчтой дүрэм үйлчилж байгаа тул хүүхэд сонгогчоос ялгаатай нь үүрлэх түвшин чухал биш учраас ийм болсон. Энэ бол хүүхэд болон контекст сонгогчдын үндсэн ялгаа юм.

Контекст болон хүүхэд сонгогчид бидний догол мөртэй харилцах өөр нэг жишээг харцгаая. Хүүхэд болон контекст сонгогчдод зориулсан дараах CSS дүрмийг бичье.

Div em (өнгө: улаан;) p > em (өнгө: ногоон;)

Үүний дараа бидний догол мөр дараах форматыг авна.


Таны харж байгаагаар em болон хүчтэй шошгонд хавсаргасан текстийн хэсэг нь улаан өнгөтэй байна, учир нь контекст сонгогчийн дүрэм нь үнэн бөгөөд өөрөөр хэлбэл em tag нь хүчтэй ба div контейнерт, мөн үүрлэх түвшин нь адил байна. аль хэдийн тэмдэглэсэн, хамаагүй .

Асуулт гарч ирнэ: яагаад em-ийн агуулга болох "налуу" гэдэг үг ногоон өнгөтэй болсон бэ? Эцсийн эцэст контекст сонгогчийн дүрэм нь түүнд бас хамаатай. Гэхдээ хүүхэд сонгогчийн дүрэм нь догол мөрийн текстийн энэ хэсэгт мөн хамаарна, учир нь энэ нь хүүхэд сонгогчийн хувьд элемент нь шууд p таг дотор байх ёстой гэсэн нөхцөлтэй зөрчилдөхгүй.

Үнэн хэрэгтээ CSS нь доорх CSS шинж чанаруудын давуу эрх олгох хуультай байдаг. Өөрөөр хэлбэл, энэ тохиолдолд хүүхэд сонгогчийн дүрэм нь div контейнерийн контекст сонгогчид заасан CSS загвараас баримт бичигт доогуур байна. Тиймээс "налуу" гэдэг нь ногоон өнгөтэй байна. Хэрэв та тэдгээрийг солих юм бол "p> em (өнгө: ногоон;)" дүрэм ажиллахаа больж, текстийн "налуу" хэсэг улаан өнгөтэй болно.

Энэ сонгогчийн гол зорилго нь түүний нэрнээс үүдэлтэй бөгөөд хүүхэд элементийг заах явдал юм. Үндсэн элементийг эх элементтэй холбодог энгийн ">" тэмдгийг ашиглан харуулна. Энгийн сонгогчийг эргэлтэнд ашигладаг гэдгийг тэмдэглэх нь зүйтэй. Жишээ болгон дараах кодчилолыг авч үзье.

Элемент > ul ( padding-top: 20px; )

Энэ кодчилол нь элемент дотор оруулсан жагсаалт нь дээд талаас 20 пикселийн дотоод дүүргэлттэй байна гэсэн үг юм. Энэ оруулгад ">" тэмдэг байгаа нь дүрэм зөвхөн үүрлэх эхний түвшний жагсаалтад хамаарна гэдгийг харуулж байна.

Хүүхэд сонгогч хэрхэн ажилладаг талаар нарийвчилсан дүн шинжилгээ

Хүүхэд элемент сонгогч нь хүүхэд сонгогчтой төстэй шинж чанартай байдаг. Гэсэн хэдий ч, харуулсан нэг онцлог шинж чанар байдаг үндсэн ялгаагүйлгээний өгөгдөл. Энэ нь удамшлын сонгогчийн нөлөөлөл бүх элементүүдэд хүрч, хүүхэд сонгогч нь ангиллын эхний түвшний байрлалуудын хэв маягийг захирдагт оршино.

Дараах жишээ нь хүүхэд сонгогч операторын ажлыг илүү сайн ойлгоход тусална.

Div > p (өнгө: #ff0000; /* улаан */ )

< div> Өгөгдсөн шугамөгөгдмөл хар текст болно.< span>Энэ мөр нь p нь div-д зориулсан хүүхэд тэмдэг учраас улаанаар будагдсан. < p>Дахин бид хар үсэг харагдана.< span>Энд мөн хар тэмдэгтүүдийг харж болно, учир нь p тэмдэг нь энэ зайны эх тэмдэг юм.

Энэ жишээ нь үүрлэх зэрэглэлийн дагуу хүүхэд сонгогч операторын ажиллагааг баталж байна.

Хүүхэд сонгогч операторыг ашиглах хязгаарлалт

Үүнийг тэмдэглэх нь зүйтэй энэ ажиллагаадомогтоос бусад бүх хөтөч дэмждэг Internet Explorer 6. Энэ хөтчийг цөөхөн хүн ашигладаг гэж би бодож байна, гэхдээ хэрэв өвөрмөц байдаг бол тэдэнд гарах арга зам байгаа бөгөөд үүнийг тусдаа өгүүллээр тайлбарлах болно.

Яагаад хэрэглэдэг вэ

Программистууд үүрлэсэн элементүүдэд өөрийн өвөрмөц хэв маягийг оноох шаардлагатай үед хүүхдийн элемент сонгогчдод ханддаг. Мөн энэ сонгогчийг ашигласнаар CSS-ийн хэмжээг бууруулж, баримт бичгийн уншигдах чадварыг сайжруулна. Практикаас харахад энэ үйлдлийг унждаг цэс үүсгэх үед ихэвчлэн ашигладаг.

Түүнчлэн, хүүхдийн элемент сонгогч нь эцэг эх нь аль хэдийн мэдэгдэж байсан элементүүдэд өвөрмөц хэв маягийг хуваарилахад ашиглагддаг. Өөрөөр хэлбэл:

Үндсэн > толгой( /* загвар нь зөвхөн үндсэн толгой хэсэгт хамаарна */ }

Энэ жишээ нь нийтлэлийн гарчгийг тодруулахдаа толгойн шошго ашигласан тохиолдолд хүчинтэй. Манай тохиолдолд бид дизайныг зөвхөн үндсэн толгой хэсэгт зориулж тохируулсан бөгөөд хоёрдогч хэсэгт хүрч болохгүй. Энэ техник нь шаардлагагүй танигч ашиглахаас зайлсхийдэг бөгөөд энэ нь эргээд CSS файлын жинг хөнгөвчлөх, уншихад хялбар болгодог.

Дүгнэх

Тиймээс хүүхдийн элементийн операторыг зөвхөн унждаг цэсийг зохион бүтээхэд төдийгүй хайлтын роботуудын ажилд зориулж интернетийн нөөцөө бага зэрэг оновчтой болгоход ашиглаж болно.

CSS хүүхэд сонгогчид нь зөвхөн бусад (эцэг эх) элементүүдийн хүүхэд байх үед элементүүдэд хэв маяг хэрэглэхэд ашигладаг сонгогчид юм. Хүүхэд сонгогчдын нэгэн адил хүүхэд сонгогчид нь энгийн сонгогч (анги, id гэх мэт) -ээс бүрдсэн нийлмэл сонгогчид юм.

Дахин хэлэхэд, хэрэв та хүүхдийн элементүүд гэж юу болохыг мартсан бол аль хэдийн мэддэг жишээн дээр анхаарлаа хандуулцгаая.

<тег1> <тег2>... <тег3><тег4>...

Элемент дотор нь эхний үүрлэх түвшинд байгаа бол түүнийг өөр элементийн хүүхэд гэж нэрлэдэг. Бидний жишээн дээр<тег2>болон<тег3>охид юм<тег1>, a<тег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( өмч: үнэ цэнэ; өмч: үнэ цэнэ; ... )

Дашрамд хэлэхэд, хүснэгтүүд нь нэмэлт нээх шошготой элементүүдээс гадна ийм элементүүд байдаг. Практикт "мартах асуудал" ихэвчлэн ширээн дээр гардаг тул би та бүхний анхаарлыг үүн дээр төвлөрүүлсэн.

Гэрийн даалгавар.

  1. Хуудасны фонтыг 0.9em хэмжээтэй, зарим дэвсгэртэй Arial болгож тохируулна уу.
  2. Хуудас дээр хэд хэдэн гарчиг, догол мөр бичиж, гарчгийн текстийн хэмжээ, өнгийг өөрийн үзэмжээр өөрчил.
  3. Хуудасны догол мөр дэх холбоосыг доогуур зураасгүйгээр шууд цэнхэр өнгөтэй болго. Гэхдээ үүнтэй зэрэгцэн, хэрэв холбоосууд нь ямар нэгэн шошготой, жишээлбэл, налуу бичээстэй байвал тэдгээрийг аль хэдийн доогуур зураас, улаан өнгөөр ​​харуулах ёстой. Хүрээний шошго бүртэй холбоосын хэв маягийг тусад нь зааж өгөх шаардлагагүй, үүнийг бүх нийтээр хийх шаардлагагүй гэдгийг би дахин нэг удаа анхаарна уу. Хэрхэн? Бодоод үз дээ.
  4. Хуудасны баруун талд жижиг цэс үүсгээд засаарай, үүний тулд танд үл хөдлөх хөрөнгө болон түүнийг дагалдах хэд хэдэн өмч хэрэгтэй, та үүнийг тэндээс олох болно. Үүний зэрэгцээ цэсийг хөтчийн цонхонд хэвээр үлдээхээс гадна гүйлгэх үед хуудасны агуулга руу мөлхөхгүй байхыг зөвшөөрнө үү.

Хичээлийн сүүлчийн цэг нь таны хувьд хамгийн хэцүү байх болно гэж би бодож байна, гэхдээ байрлалыг хөгжүүлэхэд шууд өөрийгөө бүрэн оруулахыг бүү оролдоорой. Зүгээр л гэрийн даалгавраа хий. Дашрамд хэлэхэд, хөгшин хүн тогтмол байрлалыг ойлгодоггүй тул Internet Explorer 6.0 дээр энэ зүйл ажиллахгүй.

Влад Мержевич

Хүүхдийн элемент нь эх элементийн дотор шууд байдаг элемент юм. Баримт бичгийн элементүүдийн хоорондын хамаарлыг илүү сайн ойлгохын тулд бага зэрэг кодыг задалъя (Жишээ 12.1).

Жишээ 12.1. Баримт бичигт элементүүдийг оруулах

HTML5 CSS 2.1 IE Cr Op Sa Fx

Lorem ipsum

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.

Энэ жишээнд кодонд нэг нэгнийгээ дотор байрлуулсан хэд хэдэн савыг ашигласан болно. Үүнийг элементийн модноос илүү тодорхой харж болно, энэ нь баримт бичгийн шошго хоорондын харилцааны бүтцийн нэр юм (Зураг 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. Текстийн өнгийг хүүхэд сонгогчоор тохируулсан

Нэг шошго Жишээн дээр хоёр дүрэм нэгэн зэрэг ажилладаг: контекст сонгогч (tag дотор байрладаг

) болон хүүхэд сонгогч (tag -ийн хүүхэд юм

). Үүний зэрэгцээ дүрмүүд нь ижил төстэй, учир нь тэдгээрийн бүх нөхцөл хангагдсан бөгөөд хоорондоо зөрчилддөггүй. Ийм тохиолдолд доорх кодонд байрлах хэв маягийг ашигладаг тул налуу текстийг улаанаар харуулдаг. Дүрмүүдийг эргүүлж, доор DIV I-г оруулмагц текстийн өнгө улаанаас ногоон болж өөрчлөгдөнө.

Ихэнх тохиолдолд хүүхэд сонгогчийг контекст сонгогчоор солих замаар орхиж болно гэдгийг анхаарна уу. Гэсэн хэдий ч, хүүхэд сонгогчийг ашиглах нь элементийн хэв маягийг илүү хянах боломжийг олгодог бөгөөд ингэснээр хүссэн үр дүнд хүрэхийн зэрэгцээ энгийн бөгөөд тодорхой кодтой болно.

Эдгээр сонгогчдыг шаталсан бүтэцтэй элементүүдэд ашиглах нь хамгийн тохиромжтой - үүнд жишээлбэл, хүснэгтүүд болон янз бүрийн жагсаалтууд орно. Жишээ 12-3 нь загвар ашиглан жагсаалтын харагдах байдлыг хэрхэн өөрчлөхийг харуулж байна. Нэг жагсаалтыг нөгөө жагсаалтад оруулснаар бид нэг төрлийн цэстэй болно. Гарчиг нь хэвтээ байрлалтай, харин холбоосын багц нь гарчгийн доор босоо байрлалтай байна (Зураг 12.3).

Цагаан будаа. 12.3. Цэсийн жагсаалт

Текстийг хэвтээ байдлаар байрлуулахын тулд LI сонгогч дээр хөвөх загварын шинж чанарыг нэмдэг. Хэвтээ ба босоо жагсаалтын хэв маягийг ялгахын тулд хүүхэд сонгогчийг ашигладаг (жишээ 12.3).

Жишээ 12.3. Хүүхэд сонгогч ашиглах

HTML5 CSS 2.1 IE Cr Op Sa Fx

Хүүхэд сонгогчид

Энэ жишээнд хүүхэд сонгогчид дээд түвшний жагсаалтын зүйлүүд болон өөр өөр үүрэг гүйцэтгэдэг үүрлэсэн жагсаалтуудын хэв маягийг салгах шаардлагатай тул тэдгээрийн хэв маяг нь давхцахгүй байх ёстой.

Шалгах асуултууд

1. Ямар өнгө тод байх вэ? курсив тексткодоор

Гэрэлтүүлгийн стандартыг үндэслэнэ дүрслэх бүтээлийн ангиллын үндэстодорхой тоон үндэслэлээр.

Дараах хэв маягийг ашиглах үед?

P (өнгө: ногоон; )
B (өнгө: цэнхэр; )
Би (өнгө: улбар шар; )
B > I (өнгө: чидун; )
P > I (өнгө: шар; )

  1. Ногоон.
  2. Цэнхэр.
  3. Жүрж.
  4. Олив.
  5. Шар.

2. Аль элемент нь шошгоны эх хэсэг юм ? </b></p> <ol><li><HEAD></li> <li><BODY></li> <li><HTML></li> <li><META></li> <li><!DOCTYPE></li> </ol><p><b>3. Аль элементийг шошголох<!DOCTYPE>эцэг эхийн үүрэг гүйцэтгэх үү?</b></p> <ol><li><HTML></li> <li><TITLE></li> <li><BODY></li> <li><HEAD></li> <li>Нэг шошгоны төлөө биш.</li> </ol><h2>Хариултууд</h2> <p>1. Олив.</p> <p>3. Нэг шошго биш.</p> <p>Нарийн төвөгтэй, хүнд вэб програмууд өнөө үед түгээмэл болсон. Өргөн функц бүхий jQuery зэрэг хөтчүүд хоорондын, хэрэглэхэд хялбар номын сангууд нь DOM-ийг шууд удирдахад ихээхэн тус болно. Тиймээс олон хөгжүүлэгчид ийм сангуудыг төрөлх DOM API-тай ажиллахаас илүү олон удаа ашигладаг нь гайхах зүйл биш бөгөөд энэ нь маш их асуудалтай байсан. Хөтөчүүдийн ялгаа нь асуудал хэвээр байгаа ч jQuery алдаршиж байсан 5-6 жилийн өмнөхөөс DOM илүү сайн болсон.</p> <p>Энэ нийтлэлд би DOM-ийн HTML-г удирдах чадварыг харуулах бөгөөд эцэг эх, хүүхэд, хөршийн харилцаанд анхаарлаа хандуулах болно. Би эдгээр функцуудад зориулсан хөтчийн дэмжлэгийн задаргаагаар дуусгах болно, гэхдээ jQuery төрлийн номын сан нь үндсэн функцийг хэрэгжүүлэхэд алдаа, зөрчилдөөнөөс болж сайн сонголт хэвээр байдгийг санаарай.</p> <h2>Хүүхдийн зангилааг тоолох</h2> <p>Үзүүлэхийн тулд би дараахь зүйлийг ашиглах болно <a href="https://sushiandbox.ru/mn/master-pc/osnovnye-tegi-i-atributy-yazyka-html-osnovnye-tegi-html-osnovnye.html">HTML тэмдэглэгээ</a>, нийтлэлийн явцад бид үүнийг хэд хэдэн удаа өөрчлөх болно:</p><p> <body> <ul id="myList"> <li>Жишээ нэг</li> <li>жишээ хоёр</li> <li>жишээ гурав</li> <li>жишээ дөрөв</li> <li>жишээ тав</li> <li>Зургадугаар жишээ</li> </ul> </body> </p><p>Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6</p><p>Таны харж байгаагаар, ашигласан техник нь өөр боловч үр дүн нь ижил байна. Эхний тохиолдолд би хүүхдийн өмчийг ашигладаг. Энэ нь зөвхөн унших шинж чанартай бөгөөд цуглуулгыг буцаана <a href="https://sushiandbox.ru/mn/browsing-the-internet/ravnenie-po-centru-v-html-vyravnivanie-elementov-v-html-vyravnivanie-teksta-po.html">HTML элементүүд</a>, хүссэн элемент дотор байрлах; Тэдний тоог тоолохын тулд би энэ цуглуулгын урт шинж чанарыг ашигладаг.</p> <p>Хоёрдахь жишээнд би childElementCount аргыг ашиглаж байгаа бөгөөд энэ нь илүү цэгцтэй, илүү арчилгаатай арга гэж үзэж байна (энэ талаар дараа дэлгэрэнгүй ярих юм бол энэ нь юу хийж байгааг ойлгоход танд асуудал гарахгүй гэж би бодож байна).</p> <p>Би childNodes.length (хүүхэд.length-ийн оронд) ашиглахыг оролдож болох ч үр дүнг харна уу:</p><p>Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13</p><p>Энэ нь 13-ыг буцаана, учир нь childNodes нь зайг оруулаад бүх зангилааны цуглуулга бөгөөд хэрэв та хүүхэд зангилаа болон хүүхдийн элементийн зангилааны ялгааг анхаарч үзвэл үүнийг санаарай.</p> <h2>Хүүхдийн зангилаа байгаа эсэхийг шалгах</h2> <p>Элементэд хүүхэд зангилаа байгаа эсэхийг шалгахын тулд би hasChildNodes() аргыг ашиглаж болно. Энэ арга нь тэдгээрийн байгаа эсвэл байхгүй байгааг илтгэх логик утгыг буцаана:</p><p>Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // үнэн</p><p>Миний жагсаалтад хүүхэд зангилаа байдгийг би мэдэж байгаа, гэхдээ HTML-г байхгүй болгож өөрчлөх боломжтой; Одоо тэмдэглэгээ нь иймэрхүү харагдаж байна:</p><p> <body> </body> </p><p>hasChildNodes()-г дахин ажиллуулсны үр дүн энд байна:</p><p>Console.log(myList.hasChildNodes()); // үнэн</p><p>Энэ арга нь үнэн хэвээр байна. Жагсаалт нь ямар ч элемент агуулаагүй ч гэсэн хоосон зайг агуулж байгаа бөгөөд энэ нь хүчинтэй зангилааны төрөл юм. Энэ арга нь зөвхөн элементийн зангилаа биш бүх зангилааг авч үздэг. hasChildNodes() нь худал буцаахын тулд бид тэмдэглэгээг дахин өөрчлөх шаардлагатай:</p><p> <body> </body> </p><p>Одоо хүлээгдэж буй үр дүнг консол дээр харуулав:</p><p>Console.log(myList.hasChildNodes()); // худал</p><p>Мэдээжийн хэрэг, хэрэв би орон зайтай тулгарах магадлалтайг мэдсэн бол эхлээд хүүхдийн зангилаа байгаа эсэхийг шалгаад, тэдгээрийн дотор элементийн зангилаа байгаа эсэхийг тодорхойлохын тулд nodeType шинж чанарыг ашиглана.</p> <h2>Хүүхдийн элементүүдийг нэмэх, хасах</h2> <p>DOM-д элемент нэмэх, устгахад ашиглаж болох техникүүд байдаг. Эдгээрээс хамгийн алдартай нь createElement() болон appendChild() аргуудын хослол дээр суурилдаг.</p><p>VarmyEl = document.createElement("div"); document.body.appendChild(myEl);</p><p>Энэ тохиолдолд би бүтээж байна <div>createElement() аргыг ашиглаад дараа нь үүнийг их биед нэмнэ. Маш энгийн бөгөөд та энэ аргыг өмнө нь хэрэглэж байсан байх.</p> <p>Харин тусгайлан оруулахын оронд <a href="https://sushiandbox.ru/mn/master-pc/peretaskivanie-elementov-drag-and-drop-sozdaem-prostoi-html5-drag-drop-interfeis.html">үүсгэсэн элемент</a>, би мөн appendChild()-г ашиглаж, одоо байгаа элементийг зөөж болно. Бидэнд дараах тэмдэглэгээ байна гэж бодъё.</p><p> <div id="c"> <ul id="myList"> <li>Жишээ нэг</li> <li>жишээ хоёр</li> <li>жишээ гурав</li> <li>жишээ дөрөв</li> <li>жишээ тав</li> <li>Зургадугаар жишээ</li> </ul> <p>жишээ текст</p> </div> </p><p>Би жагсаалтын байршлыг дараах кодоор өөрчилж болно.</p><p>Var myList = document.getElementById("myList"), контейнер = document.getElementById("c"); container.appendChild(myList);</p><p>Эцсийн DOM дараах байдлаар харагдах болно.</p><p> <div id="c"> <p>жишээ текст</p> <ul id="myList"> <li>Жишээ нэг</li> <li>жишээ хоёр</li> <li>жишээ гурав</li> <li>жишээ дөрөв</li> <li>жишээ тав</li> <li>Зургадугаар жишээ</li> </ul> </div> </p><p>Жагсаалтыг бүхэлд нь байрлалаас нь хасч (догол мөрний дээд талд), дараа нь хаалтын хэсгийн өмнө оруулсан болохыг анхаарна уу. appendChild() аргыг ихэвчлэн createElement() ашиглан үүсгэсэн элементүүдийг нэмэхэд ашигладаг бол одоо байгаа элементүүдийг зөөхөд ашиглаж болно.</p> <p>Мөн би removeChild() ашиглан DOM-ээс хүүхэд элементийг бүрэн устгаж чадна. Өмнөх жишээнээс бидний жагсаалтыг хэрхэн хассаныг энд харуулав.</p><p>Var myList = document.getElementById("myList"), контейнер = document.getElementById("c"); container.removeChild(myList);</p><p>Элемент одоо устгагдсан. RemoveChild() арга нь устгасан элементийг буцаадаг бөгөөд би үүнийг дараа хэрэгтэй тохиолдолд хадгалах боломжтой.</p><p>Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);</p><p>Тодорхойлолтод харьцангуй саяхан нэмэгдсэн ChildNode.remove() арга бас бий:</p><p>Var myList = document.getElementById("myList"); myList.remove();</p><p>Энэ арга нь алсын объектыг буцаадаггүй бөгөөд IE (зөвхөн Edge) дээр ажиллахгүй. Хоёр арга нь текстийн зангилааг элементийн зангилаатай адил устгадаг.</p> <h2>Хүүхдийн элементүүдийг солих</h2> <p>Би байгаа хүүхдийг байгаа эсэхээс үл хамааран шинээр сольж болно <a href="https://sushiandbox.ru/mn/skype/html5-novye-vozmozhnosti-chto-novogo-v-html5-novye-strukturnye-elementy.html">шинэ элемент</a>эсвэл би үүнийг эхнээс нь бий болгосон. Энд тэмдэглэгээ байна:</p><p> <p id="par">жишээ текст</p> </p><p>Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "жишээ"; myDiv.appendChild(document.createTextNode("Шинэ элементийн текст")); document.body.replaceChild(myDiv, myPar);</p><p> <div class="example">Шинэ элементийн текст</div> </p><p>Таны харж байгаагаар replaceChild() арга нь шинэ элемент болон түүний орлуулсан хуучин элемент гэсэн хоёр аргумент авдаг.</p> <p>Би одоо байгаа элементийг зөөхийн тулд энэ аргыг ашиглаж болно. Дараах HTML-г харна уу.</p><p> <p id="par1">жишээ текст 1</p> <p id="par2">жишээ текст 2</p> <p id="par3">жишээ текст 3</p> </p><p>Гурав дахь догол мөрийг эхний догол мөртэй дараах кодоор сольж болно.</p><p>Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);</p><p>Одоо үүсгэсэн DOM дараах байдалтай байна.</p><p> <p id="par2">жишээ текст 2</p> <p id="par1">жишээ текст 1</p> </p><h2>Хүүхдийн тусгай элементүүдийг сонгох</h2> <p>Хэд хэдэн байдаг <a href="https://sushiandbox.ru/mn/master-pc/prostaya-programma-dlya-kodirovaniya-papok-na-fleshke-kak-postavit-parol-na.html">янз бүрийн арга замууд</a>тодорхой элементийг сонгох. Өмнө үзүүлсэнчлэн, би хүүхдийн цуглуулга эсвэл childNodes өмчийг ашиглан эхэлж болно. Гэхдээ бусад сонголтуудыг авч үзье:</p> <p>firstElementChild болон lastElementChild шинж чанарууд нь нэрнээс нь яг юу хүлээж байгааг гүйцэтгэнэ: эхний болон сүүлчийн хүүхэд элементүүдийг сонгоно. Тэмдэглэгээ рүүгээ буцъя:</p><p> <body> <ul id="myList"> <li>Жишээ нэг</li> <li>жишээ хоёр</li> <li>жишээ гурав</li> <li>жишээ дөрөв</li> <li>жишээ тав</li> <li>Зургадугаар жишээ</li> </ul> </body> </p><p>Би эдгээр шинж чанаруудтай эхний болон сүүлчийн элементүүдийг сонгож болно:</p><p>Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Жишээ нэг" console.log(myList.lastElementChild.innerHTML); // "Жишээ зургаа"</p><p>Хэрэв би эхний эсвэл сүүлчийнхээс өөр хүүхэд элементүүдийг сонгохыг хүсвэл өмнөхElementSibling болон nextElementSibling шинж чанаруудыг ашиглаж болно. Энэ нь firstElementChild болон lastElementChild шинж чанаруудыг нэгтгэснээр хийгддэг:</p><p>Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Жишээ хоёр" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Тав дахь жишээ"</p><p>FirstChild , lastChild , previousSibling болон nextSibling гэсэн ижил төстэй шинж чанарууд бас байдаг боловч тэдгээр нь зөвхөн элементүүдийг бус бүх зангилааны төрлийг харгалзан үздэг. Ерөнхийдөө зөвхөн элементийн зангилаа гэж үздэг шинж чанарууд нь бүх зангилаануудыг сонгохоос илүү ашигтай байдаг.</p> <h2>DOM-д контент оруулж байна</h2> <p>Би аль хэдийн DOM-д элемент оруулах аргуудыг үзсэн. Үүнтэй төстэй сэдэв рүү шилжиж, контент оруулах шинэ боломжуудыг харцгаая.</p> <p>Нэгдүгээрт, энгийн insertBefore() арга байдаг бөгөөд энэ нь replaceChild()-тэй маш төстэй бөгөөд хоёр аргументыг авч, шинэ болон одоо байгаа элементүүд дээр ажилладаг. Энд тэмдэглэгээ байна:</p><p> <div id="c"> <ul id="myList"> <li>Жишээ нэг</li> <li>жишээ хоёр</li> <li>жишээ гурав</li> <li>жишээ дөрөв</li> <li>жишээ тав</li> <li>Зургадугаар жишээ</li> </ul> <p id="par">Жишээ догол мөр</p> </div> </p><p>Догол мөрийг анхаарч үзээрэй, би үүнийг эхлээд хасаад дараа нь жагсаалтын өмнө оруулах болно, бүгдийг нэг дор оруулав:</p><p>Var myList = document.getElementById("myList"), контейнер = document.getElementBy("c"), myPar = document.getElementById("пар"); container.insertBefore(myPar, myList);</p><p>Хүлээн авсан дотор <a href="https://sushiandbox.ru/mn/master-pc/html-kod-krasnaya-stroka-kogda-vsem-abzacam-kak-mne-dlya-kazhdogo-abzaca.html">HTML догол мөр</a>жагсаалтын өмнө ирэх бөгөөд элементийг зөөх өөр нэг арга юм.</p><p> <div id="c"> <p id="par">Жишээ догол мөр</p> <ul id="myList"> <li>Жишээ нэг</li> <li>жишээ хоёр</li> <li>жишээ гурав</li> <li>жишээ дөрөв</li> <li>жишээ тав</li> <li>Зургадугаар жишээ</li> </ul> </div> </p><p>replaceChild()-ийн нэгэн адил insertBefore() нь хоёр аргумент авдаг: нэмэх элемент болон бидний оруулахыг хүссэн элемент.</p> <p>Энэ арга нь энгийн. Одоо оруулах илүү хүчирхэг аргыг туршиж үзье: insertAdjacentHTML() аргыг.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <span style="display:none" class="updated">2016-05-11</span> <div class="clear"></div> </div> </article> <div class="post-navigation"> <div class="post-previous"> <a href="https://sushiandbox.ru/mn/lessons-on-windows/kak-uvelichit-bystro-bitkoiny-na-metro-hvatit-kak-zarabatyvat-bitkoiny.html" rel="prev"><span>Өмнөх</span>Метронд хангалттай: хөрөнгө оруулалтгүйгээр Bitcoins хэрхэн олох вэ</a> <!-- /next_post --></div> <div class="post-next"> <a href="https://sushiandbox.ru/mn/earnings/kak-zarabotat-pervyi-bitkoin-bez-vlozhenii-kak-zarabotat-bitkoiny-bez.html" rel="next"><span>Дараачийн</span>Хөрөнгө оруулалтгүйгээр биткойн хэрхэн олох вэ</a> <!-- /next_post --></div> </div> <section id="related_posts"> <div class="block-head"> <h3>Үүнтэй төстэй нийтлэлүүд</h3> <div class="stripe-line"></div> </div> <div class="post-listing"> <div class="related-item"> <div class="post-thumbnail"> <a href="https://sushiandbox.ru/mn/10-rules/zarabotat-s-pomoshchyu-vkontakte-kak-zarabotat-dengi-v.html"> <img width="310" height="165" src="/uploads/5aec3a886c579800d2d3c3a29c73a327.jpg" class="attachment-tie-medium wp-post-image" alt="Холбоо барих замаар хэрхэн мөнгө олох вэ" / loading=lazy loading=lazy> <span class="fa overlay-icon"></span> </a> </div> <h3><a href="https://sushiandbox.ru/mn/10-rules/zarabotat-s-pomoshchyu-vkontakte-kak-zarabotat-dengi-v.html" rel="bookmark">Холбоо барих замаар хэрхэн мөнгө олох вэ</a></h3> <p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i> 2022-06-18 03:02:26</span></p> </div> <div class="related-item"> <div class="post-thumbnail"> <a href="https://sushiandbox.ru/mn/10-rules/ne-rabotayut-naushniki-xiaomi-ne-propadaet-znachok-naushnikov-posle-ih-otklyucheniya.html"> <img width="310" height="165" src="/uploads/dedd7371033870832179f1024d9de189.jpg" class="attachment-tie-medium wp-post-image" alt="Тэднийг унтраасны дараа чихэвчний дүрс алга болохгүй" / loading=lazy loading=lazy> <span class="fa overlay-icon"></span> </a> </div> <h3><a href="https://sushiandbox.ru/mn/10-rules/ne-rabotayut-naushniki-xiaomi-ne-propadaet-znachok-naushnikov-posle-ih-otklyucheniya.html" rel="bookmark">Тэднийг унтраасны дараа чихэвчний дүрс алга болохгүй</a></h3> <p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i> 2022-05-22 04:39:35</span></p> </div> <div class="related-item"> <div class="post-thumbnail"> <a href="https://sushiandbox.ru/mn/internet/obzor-mi-band-pulse-1s-i-sravnenie-s-originalnym-mi-band-vklyuchenie-fitnes.html"> <img width="310" height="165" src="/uploads/75188fae795b99a3b48a1c369fc82b6f.jpg" class="attachment-tie-medium wp-post-image" alt="Xiaomi Mi Band фитнессийн бугуйвчийг асааж, Mi Fit Mi band 1-ийг гүйхэд тохируулж байна" / loading=lazy loading=lazy> <span class="fa overlay-icon"></span> </a> </div> <h3><a href="https://sushiandbox.ru/mn/internet/obzor-mi-band-pulse-1s-i-sravnenie-s-originalnym-mi-band-vklyuchenie-fitnes.html" rel="bookmark">Xiaomi Mi Band фитнессийн бугуйвчийг асааж, Mi Fit Mi band 1-ийг гүйхэд тохируулж байна</a></h3> <p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i> 2022-05-22 04:39:35</span></p> </div> </div> </section> <script type="text/javascript"> document.getElementById('hc_full_comments').innerHTML = ''; </script> </div> <aside id="sidebar"> <div class="theiaStickySidebar"> </div> </aside> <div class="clear"></div> </div> <div class="e3lan e3lan-bottom"> </div> <footer id="theme-footer"> <div id="footer-widget-area" class="wide-left-3c"> </div> <div class="clear"></div> </footer> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignright"> </div> <div class="social-icons"> <a class="ttip-none" title="Google Plus" href="" target="_blank"><i class="fa fa-google-plus"></i></a><a class="ttip-none" title="Twitter" href="https://www.twitter.com/share?url=https%3A%2F%2Fsushiandbox.ru%2Fmn%2Fsocial-network%2Fcss-obrashchenie-k-dochernim-elementam-tehniki-raboty-s-dom-roditelskie-dochernie-i.html" target="_blank"><i class="fa fa-twitter"></i></a> <a class="ttip-none" title="vk.com" href="https://vk.com/share.php?url=https://sushiandbox.ru/social-network/css-obrashchenie-k-dochernim-elementam-tehniki-raboty-s-dom-roditelskie-dochernie-i.html" target="_blank"><i class="fa fa-vk"></i></a> </div> <div class="alignleft">© Зохиогчийн эрх 2022, Компьютер эзэмших - Интернет. Skype. Нийгмийн сүлжээ. Windows хичээлүүд</div> <div class="clear"></div> </div> </div> </div> </div> </div> <div id="topcontrol" class="fa fa-angle-up" title="Дээш гүйлгэж"></div> <div id="fb-root"></div> <div id="reading-position-indicator"></div> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/CodeCanyon-Arqamv2.0.4-RetinaResponsiveWordPressSocialCounterPlugin-5085289/assets/js/scripts.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/ark-hidecommentlinks.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/pcl_tooltip.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/pcl_tooltip_init.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tie = { "mobile_menu_active": "true", "mobile_menu_top": "", "lightbox_all": "true", "lightbox_gallery": "true", "woocommerce_lightbox": "", "lightbox_skin": "dark", "lightbox_thumb": "vertical", "lightbox_arrows": "", "sticky_sidebar": "1", "is_singular": "1", "SmothScroll": "true", "reading_indicator": "true", "lang_no_results": "\u041d\u0435\u0442 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b", "lang_results_found": "\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043d\u0430\u0439\u0434\u0435\u043d\u043e" }; /* ]]> */ </script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/tie-scripts.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/ilightbox.packed.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/search.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/jquery.cycle.all.js'></script> </body> </html>