កុំព្យូទ័រ, ការសរសេរកម្មវិធី
CSS, pseudo, ការព៍ pseudo: ពេលដាក់កូនគោលដៅ
តាមរយៈការរួមបញ្ចូលគ្នារវាង HTML និង CSS, អ្នកអាចត្រួតពិនិត្យពិតធាតុទាំងអស់របស់ទំព័របណ្ដាញ។ ជាមួយនឹងការផ្លាស់ប្តូររចនាប័ទ្មដែលអ្នកអាចប្លុកយ៉ាងងាយស្រួលមើលទៅឬបន្ទាត់ណាមួយ។ ជាញឹកញាប់ coder ត្រូវការដើម្បីអនុវត្តភារកិច្ចស្មុគ្រស្មាញច្រើនជាងមួយ - ការផ្លាស់ប្តូររូបរាងនៃធាតុដោយខ្លួនវាគឺជាការមិនបាន, ដែលជាផ្នែកមួយដាច់ដោយឡែកមួយឬរដ្ឋជាក់លាក់មួយ។ ក្នុងករណីនេះដើម្បីផ្តល់ជំនួយជា CSS ការព៍ pseudo នេះ។
pseudo-តិបត្តិការនៅលើគោលការណ៍ដូចគ្នានេះនៅក្នុងថ្នាក់រៀនជាទៀងទាត់នេះបានសម្គាល់នោះទេប៉ុន្តែរាងកាយពួកគេមិនត្រូវបានធ្វើបទបង្ហាញនៅទីនេះ។ ពួកគេអាចត្រូវបានជ្រើសនៅលើមូលដ្ឋាននៃធាតុមិនត្រូវបានរួមបញ្ចូលនៅក្នុងពឯកសារដែលនឹងមិនត្រូវបានជ្រើសជ្រើសធម្មតា។ ខាងក្រោមនេះគឺជាឧទាហរណ៍ធម្មតា: អ្នកមានប៊ូតុងក្រហមហើយអ្នកចង់ទៅនៅពេលដែលអ្នកដាក់វាបានក្លាយជាខៀវ។ តាមទ្រឹស្តីវាអាចត្រូវបានអនុវត្តនៅក្នុង JavaScript ទេប៉ុន្តែហេតុអ្វីបានជាវាមានការលំបាកដូច្នេះ? ច្រើនងាយស្រួលបន្ថែមទៀតដើម្បីប្រើ : ដាក់ CSS ។ ដោយមានជំនួយរបស់វាអ្នកអាចផ្តល់ឱ្យអង្គភាពណាមួយប៉ារ៉ាម៉ែត្រដែលនឹងត្រូវបានកេះពេលដែលទស្សន៍ទ្រនិចតែកណ្តុរ។
បញ្ជីនៃការព៍ pseudo ថ្នាក់ CSS បានត្រូវបានធ្វើបច្ចុប្បន្នភាពជាទៀងទាត់។ ប្រហែលជា, ខណៈពេលដែលអ្នកបានអានសម្ភារៈនេះរូបរាងថ្មីជាច្រើន។ ដើម្បីចាប់ផ្ដើមសូមពិចារណាអំពីពួកអ្នកដែលបង្ហាញខ្លួននៅក្នុងការបញ្ជាក់ CSS3 នេះ។
: ទី n នៃប្រភេទ
ឧបមាថាអ្នកមានបញ្ជីដែលអ្នកចង់ប្រើណ៍ជំនួសពោលគឺជាបន្ទាត់ដំបូងគឺជាឧទាហរណ៍សរសេរជាអក្សរក្រហមនិងលើកទីពីរ - .. ខៀវ, ក្រហមជាថ្មីម្តងទៀតទីបីទីបួនជាថ្មីម្តងទៀតនៅក្នុងខៀវ។ ពីមុនអ្នកមានដើម្បីបង្កើតថ្នាក់ថ្មី។ ប្លង់នៃអតីតកាលបានបន្ថែមទៅធាតុនីមួយនៅលើបញ្ជីថ្នាក់មួយហើយបន្ទាប់មកបានផ្លាស់ប្តូររូបរាងរបស់ខ្លួននៅក្នុងសន្លឹករចនាប័ទ្ម។ វាមិនមែនជាមានផាសុខភាពនិងការបំពុលប្លង់ផងដែរ។
ឥឡូវនេះអ្វីគ្រប់យ៉ាងគឺមានភាពងាយស្រួល។ ប្រើ CSS ព៍ pseudo-class: ទី n នៃប្រភេទ។ នេះនឹងផ្តល់ឱ្យនូវឱកាសដើម្បីទទួលបានប្រសិទ្ធិភាពដែលមើលឃើញដែលអ្នកចង់បានដោយគ្មានការផ្លាស់ប្តូរអ្វីនៅក្នុងការសម្គាល់មួយ។ គោលការណ៍នេះគឺសាមញ្ញ: អ្នកបញ្ចូលជ្រើសមួយក្នុងតង្កៀបបន្ទាប់ពីឈ្មោះសរសេររូបមន្តឬពាក្យគន្លឹះដែលនឹងរកឃើញធាតុដែលបានទាមទារនោះ។ ឧទាហរណ៍ ,: ទី n នៃប្រភេទ (សូម្បីតែ) ទាំងអស់សូម្បីតែនឹងធាតុនិងការ: ទី n នៃប្រភេទ (សេស) - សេស។ មានមួយចំនួនធំនៃរូបមន្តដែលត្រូវបានប្រើដើម្បីត្រួតពិនិត្យយ៉ាងច្បាស់ណាស់។ តង្កៀបបញ្ជាក់លេខដែលអាចធ្វើបាន - ក្នុងករណីនេះការរចនាប័ទ្មត្រូវបានអនុវត្តទៅធាតុដែលមានសន្ទស្សន៍ស្មើនឹងលេខនេះ។
: ទី N-កុមារ
នេះជាការព៍ pseudo ថ្នាក់ជា CSS លើគោលការណ៍នៃសកម្មភាពនេះគឺស្រដៀងគ្នាទៅនឹងមុនមួយ, ប៉ុន្តែវាមិនដូចធ្វើការទាំងស្រុងជាមួយកុមារនៃធាតុដែលបានជ្រើស។ ឧទាហរណ៍ប្រសិនបើអ្នកចង់ប្រើវាដើម្បីប្ដូរតាមបំណងនូវរូបរាងនៃ គឺឪពុកម្តាយ
សម្រាប់ការត្រួតពិនិត្យច្បាស់លាស់នៃរូបមន្តនេះអាចត្រូវបានប្រើ។ ពួកគេគឺជាការលំបាកណាស់សម្រាប់ការចាប់ផ្តើមនោះទេប៉ុន្តែវាជាតម្លៃមួយតិចតួចកាន់តែជ្រៅទៅក្នុងវាក្យសម្ព័ន្ធនៃអ្វីគ្រប់យ៉ាងបានក្លាយទៅជាភាពងាយស្រួលរបៀបនេះ។ រូបមន្តមានដូចខាងក្រោម: មួយខ +, ដែលជាកន្លែងដែលមួយ - គឺជាកត្តាមួយហើយខ - អុហ្វសិត។ ឧទាហរណ៍ប្រសិនបើក្នុងវង់ក្រចកបង្ហាញថា N, ចំនួន pseudo-ជ្រើសធាតុកូនទាំងអស់ (ដោយសារតែវាមិនត្រូវបានបញ្ជាក់លក្ខខណ្ឌបន្ថែមនៅក្នុងសំណុំបែបបទនៃការមួយនិងខ) ។ ប្រសិនបើអ្នកបញ្ជាក់ n បូក 2, ធាតុទាំងអស់លើកលែងតែជាលើកដំបូង (ដោយសារតែអុហ្វសិតគឺស្មើនឹងពីរនាក់) នឹងត្រូវបានជ្រើស។ ល្អបំផុតនៃការទាំងអស់ពេលនេះទៅសិក្សានៅអនុវត្ត។ ពិសោធន៍ជាមួយនឹងសមាសភាគកុមារនិងរូបមន្តផ្សេងគ្នា។
: កុមារមុន
អ្វីគ្រប់យ៉ាងគឺសាមញ្ញ។ ព៍ pseudo ថ្នាក់កូន CSS ដែលត្រូវបានប្រើដើម្បីជ្រើសធាតុជាក់លាក់មួយ។ វាជ្រើសកូនចុងក្រោយនៃសមាសភាគមេ។ ត្រូវបានប្រើជាញឹកញាប់ឧទាហរណ៍ដើម្បីជ្រើសជួរដេកចុងក្រោយនៃតារាងឬយកការចូលបន្ទាត់ពីប្លុកចុងក្រោយដើម្បីជៀសវាងការផ្ទេររបស់វាទៅបន្ទាត់បន្ទាប់។
: ទី N-កូនចុងក្រោយ
ដោយគោលការណ៍នៃការប្រតិបត្ដិការនេះគឺស្រដៀងគ្នាទៅនឹងទី n-កូនបានរៀបរាប់ពីមុននោះទេតែដើរតួនាទីក្នុងទិសដៅផ្ទុយ, ឧ។ ពេលដែលការប្រើធាតុអ៊ីផ្លាស់ទីខាងលើនឹង។ នេះគឺជាការមានប្រយោជន៍ប្រសិនបើអ្នកត្រូវការស្វែងរកធាតុពីរបីចុងក្រោយនេះ។
អ្នកប្រហែលជាគិតថាទាំងនេះជាការព៍ pseudo ថ្នាក់និងការព៍ pseudo ធាតុ-CSS គ្មានប្រយោជន៍, ចាប់តាំងពីអ្នកអាចទទួលបានអ្វីដែលបានធ្វើបានយ៉ាងល្អដោយថ្នាក់ធម្មតា។ នេះមិនមែនដូច្នេះ។ : ទី n កូន ,: nth- ចុងក្រោយកូន និងពិសរបស់ពួកគេគឺមានភាពងាយស្រួលខ្លាំងណាស់នៅពេលដែលធ្វើការលើគម្រោងដែលមានទំហំធំ - ឧទាហរណ៍, នៅក្នុងករណីដែលជាកន្លែងដែលប្លុកនេះមានមួយចំនួនធំនៃកុមារ។ រៀបចំដោយដៃថ្នាក់វែងនិងលំបាក។
ការត្រួតពិនិត្យ pseudo-រដ្ឋ
តើមានអ្វីប្រសិនបើអ្នកត្រូវការផ្លាស់ប្តូររូបរាងនៃធាតុមួយនៅក្នុងរដ្ឋជាក់លាក់មួយ? ករណីនេះបានផ្ដល់នូវការចុចកណ្ដុរ pseudo ដែលជា CSS ចង្អុលនិងទង្វើផ្សេងទៀត។ ចូរយើងពិនិត្យមើលពួកវាក្នុងលម្អិត។
: តំណភ្ជាប់
ជា CSS ការព៍ pseudo នេះសេចក្តីយោងមិនមែនទាំងអស់ប៉ុន្តែមានតែអ្នកដែលមិនបានទៅទស្សនានៅឡើយទេ។ នៅក្នុងការវាអ្នកអាចបញ្ជាក់រចនាប័ទ្មសម្រាប់ធាតុ , ដែលអ្នកប្រើមិនបានអនុម័តនៅឡើយទេ។
: បានចូលទស្សនា
ហ្វីលមួយនៃនិមិត្តមុនដែលគ្រប់គ្រងតែតំណទៅទស្សនារួចទៅហើយ។ រួមបញ្ចូលគ្នារវាងថ្នាក់ទាំងពីរនេះ pseudo ដែល, អ្នកអាចប្ដូរតាមបំណងនូវរូបរាងនៃស្លាក ការពិតប្រាកដដូចដែលអ្នកត្រូវការ។ ចំណាំថារដ្ឋត្រូវបានគណនាសម្រាប់កម្មវិធីរុករកជាក់លាក់និងបានរំសាយចេញបន្ទាប់ពីប្រវត្តិសាស្រ្តការព្យាបាល។
ព៍ pseudo-ថ្នាក់: CSS គោលដៅ
មួយនៃការព៍ pseudo-គួរឱ្យចាប់អារម្មណ៍ច្រើនបំផុតថ្នាក់ដែលបានប្រសិនបើបានប្រើដើម្បីវិសាលភាពមួយចំនួនជំនួសការប្រើប្រាស់ JavaScript នេះ។ វាអនុញ្ញាតឱ្យអ្នកត្រួតពិនិត្យថាការកំណត់អត្តសញ្ញាណដែលបានរួមបញ្ចូលនៅក្នុងអាសយដ្ឋានជួរដេកនៃទំព័រនេះ។ បាទ, ជាលើកដំបូងវាជាការលំបាកក្នុងការយល់។ សូមព្យាយាមដើម្បីញែកឧទាហរណ៍។
សូមឱ្យយើងបាននិយាយថាយើងមាននៅលើទំព័រទី 3 ប្លុក div ដោយលេខសម្គាល់ជាក់លាក់: id1, id2, ID3 ។ យើងមានតំណភ្ជាប់ពីបីទៅតម្លៃដែលត្រូវគ្នា href: # id1, # id2, # ID3 ។ នៅពេលដែលអ្នកចុចលើតំណភ្ជាប់ដំបូងនៅក្នុងអាសយដ្ឋានជួរដេកនៃទំព័រនេះបន្ទាប់ពីតំណទៅលេខសម្គាល់ដូចគ្នានេះនឹងមានទំព័រខ្លួនវាផ្ទាល់។
CSS សម្រាប់ទាំងអស់គ្នាដែលបានបញ្ជាក់ប្លុក div បង្ហាញលក្ខណៈសម្បត្តិ: គ្មាន, ដែលត្រូវបានពួកគេមិនត្រូវបានបង្ហាញតាមលំនាំដើម។ យើងប្រើគោលដៅ: div និងផ្ដល់ឱ្យវាបង្ហាញអចលនទ្រព្យមួយ: ប្លុក។ ឥឡូវនេះនៅពេលដែលអ្នកចុចលើតំណភ្ជាប់ជាមួយ href នេះមួយចំនួន, ប្លុកដែលមានលេខសម្គាល់ដែលត្រូវគ្នានឹងត្រូវបានចាត់ឱ្យទៅបង្ហាញ: ប្លុក, ហើយដូច្នេះពួកគេនឹងចាប់ផ្តើមលេចឡើងនៅលើទំព័រនេះ! នៅពេលដែលអ្នកចុចលើតំណដើម្បី href = http: // តំបន់ / អត្ថបទ / 319683 /% E2% 80% 9D # id1% E2% 80% 9D នឹងទប់ស្កាត់ជាមួយ id1 និងដូច្នេះនៅលើ ..
នៅតែមិនយល់ពីអ្វីទេ? សូមព្យាយាមដើម្បីដកពិសោធន៍។ បង្កើតប្លង់ទំព័រមួយនិងរចនាប័ទ្មដែលបានរៀបរាប់ខាងលើ។ ប៉ុន្មាននាទីក្រោយមកអ្នកមានតួលេខមួយអ្វីគ្រប់យ៉ាងខ្លាំងចេញ។
pseudo ដែលអាចត្រូវបានអនុវត្តទៅធាតុណាមួយ
ភាគច្រើននៃការព៍ pseudo តំណភ្ជាប់ដែលបានរៀបរាប់ខាងលើបានទាមទារសម្រាប់ការងារនេះ។ ទោះជាយ៉ាងណាមិនមែនធាតុទាំងអស់ត្រូវ ។ តំណាងជាច្រើនអាចត្រូវបានអនុវត្តទៅផ្នែកណាមួយនៃទំព័រទាំងស្រុង។
- : សកម្មត្រូវបានប្រើដើម្បីធាតុរចនាប័ទ្មនៅលើដែលអ្នកប្រើចុចប៊ូតុងកណ្ដុរខាងឆ្វេង;
- : ពេលដាក់ - CSS សម្រាប់ធាតុដែលអ្នកប្រើសំកាំងលើ;
- : ការផ្តោតអារម្មណ៍ - សម្រាប់ផ្នែកទាំងនោះនៃទំព័រដែលមានឥឡូវនេះនៅក្នុងការផ្តោតអារម្មណ៍។ នេះ pseudo ដែលត្រូវបានប្រើជាញឹកញាប់ថ្នាក់ដើម្បីធ្វើការជាមួយទម្រង់។ ឧទាហរណ៍ប្រសិនបើអ្នកចង់ជ្រើសប្រអប់ឈ្មោះអ្នកប្រើនៅពេលដែលអ្នកទស្សនាកំណត់ទស្សន៍ទ្រនិចលើវានិងបានចាប់ផ្តើមតួអក្សរដែលបានចុច។
សូមចាំថា: សកម្មត្រឹមត្រូវបានតែនៅពេលមានការបន្ទាន់នេះ។ ភ្លាមបន្ទាប់ពីការបញ្ចប់នៃប៊ូតុងកណ្ដុរខាងឆ្វេងត្រូវបានកំណត់ដោយមានជំនួយពីរចនាប័ទ្មដែលនឹងរលាយបាត់ហើយធាតុនឹងត្រូវបានបង្ហាញដូចដែលវាត្រូវបានបង្ហាញតាមលំនាំដើម។ ក្នុងករណីជាច្រើន, នេះព៍ pseudo ថ្នាក់ត្រូវបានប្រើដើម្បីធ្វើការជាមួយប៊ូតុង។ អ្នកអាចកំណត់ឱ្យពួកគេមួយចំនួនធំនៃរដ្ឋ។ ឧទាហរណ៍ប៊ូតុងលំនាំដើមគឺខៀវដាក់ - បៃតង, ចុច - ក្រហម, ល ...
ជាការពិតណាស់មានតែថ្នាក់ pseudo ដែលត្រូវបានគាំទ្រយ៉ាងពេញលេញដោយកម្មវិធីរុករកទំនើប។ ឧទាហរណ៍នៅក្នុង IE6 និង 7 នឹងមិនអាចប្រើការផ្តោតអារម្មណ៍និងការដាក់និងសកម្មសម្រាប់តែឯកសារយោងក្នុង IE6 ។ សង្ឃឹមថាអ្នកនឹងមិនមានដើម្បីធ្វើការជាមួយកម្មវិធីរុករកទាំងនេះ, ប៉ុន្តែប្រសិនបើអ្នកនៅតែត្រូវក្រោកប្រើយោបល់លក្ខខណ្ឌ។
ការព៍ pseudo បន្ថែម
ជម្រើសដែលបានរាយបញ្ជីខាងលើមិនបញ្ឈប់ការនៅទីនោះ។ ធាតុដែលបានរួមបញ្ចូលតែមួយគត់ដែលអាចត្រូវបានសង្គ្រោះអរគុណចំពោះសន្លឹក CSS សម័យទំនើប (: បើក) ឬគ្រាន់តែកាត់ចេញ (: ជនពិការ), ប្តូរតែប្រអប់ធីកសម្គាល់និងវិទ្យុ (: ធីក) ។ រៀបរាប់ដោយសង្ខេបជម្រើសកាន់តែច្រើនមួយចំនួនដែលអ្នកអាចប្រើសម្រាប់ការត្រួតពិនិត្យហ្មត់ចត់បន្ថែមទៀតរូបរាងនៃមាតិកា។
- តែកូន - flushes អាចធ្វើបានដើម្បីអនុវត្តរចនាប័ទ្មទៅធាតុដែលជាធាតុកូនតែមួយគត់;
- : ឡង់ - ដើម្បីធ្វើការជាមួយធាតុដែលបានផ្តល់ឱ្យដោយប្រើគុណលក្ខណៈភាសាឡង់;
- : ជា root - ដើម្បីជ្រើសធាតុដែលត្រូវបានប្រើជា root ។ ដូច្នោះហើយដូចស្លាក HTML មួយគឺ ;
- : មិន - ជាឧបករណ៍ដែលមានអនុភាពខ្លាំងណាស់។ វាអនុញ្ញាតឱ្យអ្នករឹតបន្តឹងការប្រើប្រាស់មួយចំនួននៃការជ្រើសរើសរចនាប័ទ្មនេះ។ ខាងក្រោមនេះគឺជាឧទាហរណ៍មួយ: ខៀវ-color: មិន (អាយុ ) ។ ជ្រើសដើម្បីអនុវត្តរចនាប័ទ្មមួយទៅធាតុទាំងអស់ជាមួយពណ៍ខៀវថ្នាក់បើសិនជាពួកគេមិនមាន ។
បញ្ជីពេញលេញនៃការព៍ pseudo ថ្នាក់មិនអាចត្រូវបាន stretched នៅលើទំព័រមួយ។ រចនាបណ្ដាញភាគច្រើនប្រើនៅក្នុងការអនុវត្ត, តែពួកគេមួយចំនួនចូលចិត្តដើម្បីគ្រប់គ្រងស្ថានភាពជាមួយ JavaScript នេះ។ បាទ, វាជាការងាយស្រួលនោះទេប៉ុន្តែមានមួយចំនួនដែលជាកន្លែងដែលមានឱកាសជាច្រើនទៀតលទ្ធផលនឹងត្រូវមានប្រសិទ្ធភាពភាពងាយស្រួលសម្រេចបាន, ដោយប្រើការព៍ pseudo សមរម្យ។
Similar articles
Trending Now