ກ່ອນ CSS - ຕົ້ນສະບັບ, ສະດວກສະບາຍ, ການປະຕິບັດ

Pseudo-ອົງປະກອບແລະ pseudo ຫ້ອງຮຽນ CSS: ກ່ອນທີ່ຈະ, ຫຼັງຈາກ, hover, ການເຄື່ອນໄຫວ, ແລະອື່ນໆ - ໂອກາດທີ່ປະສິດທິພາບໃນການປັບປຸງຄຸນນະພາບແລະງ່າຍຕໍ່ການປະຕິບັດເວັບໄຊຂອງ, ບໍ່ລວມເຖິງລະຫັດ JavaScript, handler ໃນຈະແຈ້ງ, ບໍ່ຮຽກຮ້ອງໃຫ້ມີສະລັບສັບຊ້ອນການອອກແບບຕິກິຣິຍາ, ກິດຈະກໍາຂອງອົງປະກອບ, ສົນທະນາແລະການປະຕິບັດຂອງຈໍານວນຜູ້ເຂົ້າໄດ້.

ສະດວກ Pseudo, multifunctional, ມີທີ່ສໍາຄັນແລະຫຼາຍຄຸນສົມບັດທາງເລືອກສໍາລັບການ pans ລິຂະສິດງ່າຍດາຍແລະສະລັບສັບຊ້ອນ: ວິທີການຕົ້ນສະບັບແຕ້ມເອົາໃຈໃສ່, seamlessly ຄວາມກະຈ່າງແຈ້ງການປະຕິບັດທີ່ຕ້ອງການເພື່ອໃຫ້ຄໍາແນະນໍາໃນສະຖານທີ່ສິດທິໃນການ.

ຄວາມສົດໃສດ້ານທີ່ຍິ່ງໃຫຍ່ເປີດໃນເວລາທີ່ລະບຸ url () ໃນເນື້ອຫາຂອງແມວ. ແທ້ຈິງແລ້ວ, ຕົວເລືອກນີ້ເປີດຂຶ້ນ horizo ns ໃຫມ່, ທັງຢູ່ໃນຂໍ້ກໍານົດຂອງດາວໂຫລດຫຍັງກັບຫນ້າເວັບນີ້, ແລະກິດຈະກໍາທີ່ເປັນໄປໄດ້ຂອງສິ່ງທຸກທີ່

A ຄຸນນະສົມບັດທີ່ແຕກຕ່າງກັນຂອງ pseudo

Pseudo (:: ກ່ອນ CSS, :: ຫຼັງຈາກ) ທີ່ແຕກຕ່າງກັນຈາກອົງປະກອບ, selectors ແລະ pseudo ຫ້ອງຮຽນທີ່ບໍ່ໄດ້ດັ້ງເດີມຢູ່ໃນຕົ້ນໄມ້ຕາມເອກກະສານ. ບາງທີ, ໃນການປະຕິບັດມັນບໍ່ແມ່ນສໍາຄັນໂດຍສະເພາະ, ແຕ່ຖ້າຫາກວ່າພວກເຮົາພິຈາລະນາຄໍາຖາມຂອງການວາງເນື້ອໃນຢູ່ໃນເວັບໄຊດັ່ງກ່າວ, ທີ່ທ່ານໄວ້ໃຈໄດ້ເນື້ອໃນຄຸນສົມບັດຂອງບາງສິ່ງບາງຢ່າງທີ່ມີຄວາມຫມາຍສໍາລັບເຄື່ອງຈັກໃນການຊອກຫາບໍ່ໄດ້ເຮັດໃຫ້ຄວາມຮູ້ສຶກ.

Pseudo :: ກ່ອນ CSS ອະນຸຍາດໃຫ້ທ່ານເພື່ອເພີ່ມເນື້ອໃນຂອງການອົງປະກອບ, ແລະ :: ຫຼັງຈາກ - ຫຼັງຈາກ. ເນື້ອໃນອາດຈະແຕກຕ່າງກັນຈາກຄວາມງ່າຍດາຍກັບຮູບແບບສະລັບສັບຊ້ອນໃນຂໍ້ກໍານົດຂອງຄຸນສົມບັດ CSS, ແຕ່ບໍ່ມີ tags HTML. Pseudo ສາມາດໄດ້ຮັບການ positioned ຢ່າງສົມບູນພາຍໃນອົງປະກອບທີ່, ຊຶ່ງຕິດກັບ, ເນື່ອງຈາກວ່າຄວາມຫມາຍຂອງກ່ອນແລະຫຼັງແມ່ນຂ້ອນຂ້າງແລະໂທລະສັບມືຖື. ທ່ານບໍ່ສາມາດພຽງແຕ່ລະບຸຕໍາແຫນ່ງ, ແຕ່ຍັງໄດ້ຂະຫນາດ, ສີ, ຄວາມເປັນມາ, ຕົວອັກສອນ, ແລະການນໍາໃຊ້ຄຸນນະສົມບັດອື່ນໆຂອງ CSS.

ໃນຖານະ ທີ່ແມວ CSS, ກ່ອນແລະຫຼັງຈາກກໍາລັງນໍາຫນ້າດ້ວຍສັນຍາລັກຂອງ ":", ແຕ່ມາດຕະຖານ CSS3 ແນະນໍາ "::". ໃນການກວດສອບການນໍາໃຊ້ໂດຍສະເພາະໃນຫນ້າທີ່ຈະບໍ່ມີຫຼາຍກ່ວາຕົວທ່ອງເວັບຫຼືສະບັບອາດພຽງແຕ່ບໍ່ສັງເກດເຫັນເປັນ pseudo ໂດຍສະເພາະ.

ເງື່ອນໄຂທົ່ວໄປຂອງການນໍາໃຊ້

ໂດຍອີງໃສ່ພູມ, ເຊັ່ນ: ອົງປະກອບ div ອະທິບາຍ class = 'scElement' ແລະເນື້ອໃນ "Element" ກັບຫນ້າເວັບນີ້, ທີ່ຊີ້ບອກວ່າໃນຄໍາອະທິບາຍເອກະສານ CSS-style:

.scElement {
ຕໍາແຫນ່ງ ... ;
z ດັດຊະນີ ... ;
...

}

ທ່ານສາມາດສະຫມັກຂໍເອົາເປັນ pseudo ": hover" pseudo ແລະ ":: ກ່ອນ" CSS:

.scElement: hover :: ກ່ອນ {ເນື້ອໃນ: 'prefix ນໍາຫນ້າເປັນ; ສີ ... ; ຄວາມເປັນມາ, ສີ ... }.

ຫຼັງຈາກນັ້ນໃນເວລາທີ່ທ່ານ hover ຕົວຊີ້ເມົາກ່ອນທີ່ຈະຄໍາ 'Element' ຈະປາກົດຄໍາວ່າ 'prefix ນໍາຫນ້າເປັນ, ເຊິ່ງຈະມີການປ່ຽນແປງສີຂອງຕົວອັກສອນແລະຄວາມເປັນມາຂອງ.

ການປ່ຽນແປງເນື້ອຫາ pseudo

ຖ້າຫາກວ່າທ່ານບໍ່ໄດ້ລະບຸຄຸນສົມບັດ pseudo, ພວກເຂົາເຈົ້າຈະເປັນຄືກັນກັບທີ່ຂອງອົງປະກອບຕົ້ນຕໍຂອງ - scElement. ທ່ານສາມາດກໍານົດ url, ແລະຫຼັງຈາກນັ້ນຄຸນສົມບັດເນື້ອໃນ: url ( '/ scBox / rm, v / sc-rights.png') ໃນເວລາທີ່ຕົວກະພິບສະແດງໃຫ້ເຫັນຮູບພາບທີ່ກ່ຽວກັບອົງປະກອບທີ່. ໃນກໍລະນີຂອງເນື້ອໃນ: "\ 03B1" ປາກົດທາງຄະນິດສາດ ສັນຍາລັກ "ອັນຟ່າ", ແຕ່ການນໍາໃຊ້ຕົວອັກສອນພິເສດ: "& nbsp;", " & lt;", "& laquo;", "& raquo;" ແລະອື່ນໆບໍ່ - ພວກເຂົາເຈົ້າຈະໄດ້ຮັບການສະແດງເປັນແມ່ນ.

ອະນຸຍາດໃຫ້ຫຼາຍທາງເລືອກໃນການທີ່ຈະລະບຸເນື້ອໃນຂອງ pseudo- ໄດ້: "ຂໍ້ຄວາມ" ປົກກະຕິ, url (), ລໍາດັບຂອງຕົວອັກສອນເລກຖານສິບຫົກເປັນ, ຫມາຍເຖິງເປີດ quote / ໃກ້ຊິດ quote ຫລືບໍ່ເປີດ-quote / ບໍ່ມີໃກ້ຊິດ quote, ແລະອື່ນໆໃນຖານະເປັນອາດຈະສະແດງເຖິງມູນຂອງຕໍາແຫນ່ງຢ່າງແທ້ຈິງຂອງເນື້ອໃນ. ໂດຍຜ່ານຄຸນສົມບັດແບບ, ໂດຍການນໍາໃຊ້ກ່ອນທີ່ຈະ, CSS ຈະວາງແມວໄດ້ທຸກທີ່ໃນອົງປະກອບໃນການທີ່ມີການເຊື່ອມຕໍ່.

ທ່ານສາມາດສົມທົບການນໍາໃຊ້ພ້ອມກັນຂອງກ່ອນແລະຫຼັງ. ດັ່ງນັ້ນ, ການວາງການນໍາໃຊ້ CSS ກ່ອນລັກສະນະເນື້ອໃນ, ທ່ານສາມາດໄດ້ຮັບຊະນິດຂອງຜົນກະທົບ, ສົມທົບທີ່ແຕກຕ່າງກັນ pseudo ຫ້ອງຮຽນແລະ pseudo-ອົງປະກອບ, surprise ຈໍານວນຜູ້ເຂົ້າ, ບໍ່ໃຊ້ໃນເວລາດຽວກັນເຖິງແມ່ນວ່າດຽວ byte ລະຫັດ JavaScript.

ຄຸນນະສົມບັດ pseudo

ສໍາລັບການອອກແບບຂອງເຂົາເຈົ້າໄດ້ຮັບຮອງເອົາ ":" ລັກສະນະ, ເຊັ່ນດຽວກັນກັບເບິ່ງທີ່ pseudo, ແຕ່ບໍ່ເຫມືອນກັບ pseudo CSS3 ປົກກະຕິແລ້ວສະແດງໂດຍ "::". ຕົວທ່ອງເວັບທີ່ຈະເຂົ້າໃຈມັນ, ຮັບຮູ້ວ່າທັງສອງແບບ. ຊ່ອງຫວ່າງໃນການບັນທຶກບໍ່ໄດ້ຮັບອະນຸຍາດ, ສະຕິງຖືກບັນທຶກໄວ້ແລະ pseudo (ຫລືເທົ່ານັ້ນ) pseudo ບັນທຶກຮ່ວມກັນ:

scElement: hover :: ກ່ອນ {ເນື້ອໃນ: 'prefix ນໍາຫນ້າເປັນ; ... }

scElement: ມີການເຄື່ອນໄຫວ: ຫຼັງຈາກ {ເນື້ອໃນ: 'suffix'; ... }

ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະຈື່ຈໍາ: CSS ກ່ອນທີ່ຈະແລ່ນອອກຈາກເນື້ອໃນເວັບໄຊດັ່ງກ່າວ. ຄໍເຕົ້າໄຂ່ທີ່ຍັງບໍ່ໄດ້ກ່ຽວຂ້ອງກັບເນື້ອໃນຂອງຫນ້າເວັບ. Pseudo - ແມ່ນບໍ່ມີຂໍ້ຍົກເວັ້ນ. ພວກເຂົາເຈົ້າບໍ່ປາກົດໃນຕົ້ນໄມ້ DOM ແລະບໍ່ພຶງປະສົງທີ່ຈະນໍາໃຊ້ໃຫ້ເຂົາເຈົ້າໃນພາກສ່ວນທີ່ກ່ຽວຂ້ອງຂອງເວັບໄຊດັ່ງກ່າວ - ໃນເນື້ອໃນ, ພວກເຂົາເຈົ້າຈະບໍ່ໄດ້ຮັບ.

ການນໍາໃຊ້ "" ແລະ "::" ສະຫນັບສະຫນູນໂດຍເວທີມືຖືແລະຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ, ແຕ່ວ່າເບິ່ງການເຮັດວຽກກ່ຽວກັບສະບັບອາຍຸມັກຈະບໍ່ superfluous.

ເນື້ອໃນຂອງການ pseudo-ບໍ່ລວມເຂົ້າໃນເນື້ອໃນຂອງເວັບໄຊດັ່ງກ່າວ. ມັນຈະບໍ່ເຫັນເຄື່ອງຈັກຊອກຫາ. ວິທີການໃຊ້ກໍລະນີນີ້ - ຂຶ້ນກັບສະຖານະການສະເພາະໃດຫນຶ່ງ, ແຕ່ວ່າຄວາມເປັນໄປໄດ້ຂອງການນໍາໃຊ້ CSS ກ່ອນ, ເຊັ່ນດຽວກັນກັບຫຼັງຈາກ, ເປັນອິດສະຫຼະຫຼືສະລັບສັບຊ້ອນໄດ້, ຫນ້າສົນໃຈໃນເວລາທີ່ເນື້ອໃນແມ່ນ url ເປັນ (). ການນໍາໃຊ້ໂດຍກົງຂອງ pseudo ເນື້ອໃນການເຊື່ອມຕໍ່ກັບເວັບໄຊດັ່ງກ່າວ, ຈະອະນຸຍາດໃຫ້ເຂົາເພື່ອດາວນ໌ໂຫລດໄຟລ໌, ຍົກຕົວຢ່າງ, ຮູບພາບ.

ຄວາມສາມາດໃນການປ່ຽນແປງໄຟລ໌ແບບອອນໄລນ໌ (ໄຟລ໌ແຜ່ນແບບ cascading - ບໍ່ມີຂໍ້ຍົກເວັ້ນ) ບໍ່ແຊກແຊງກັບຮູບແບບແລະການນໍາໃຊ້ pseudo ເປັນສະດວກໃນເວລາໃດກໍຕາມ, ໃນຂັ້ນຕອນວິທີສະຖານທີ່ສິດທິໃນ, ອີງຕາມການປະຕິບັດຈໍານວນຜູ້ເຂົ້າໄດ້.