ຄູ່ມູນການປະສົມຄິວເບີ້

CSS ສະນັກວິດສະຕິດ

ສະນັກວິດສະຕິດຖືກໃຊ້ເພື່ອກໍານົດສະຖານະທີ່ພິເສດຂອງປະກອບ

ຕົວຢ່າງທີ່ສາມາດໃຊ້ໄດ້:

  • ຈັດກຳນົດຮູບແບບທີ່ຫຼາຍທັງໝົດສຳລັບທາງເຄືອງໂທລະຄົມທີ່ຜູ້ຄົນພົບກັບທີ່ພົບ
  • ຈັດກຳນົດຮູບແບບທີ່ຫຼາຍທັງໝົດສຳລັບທາງເຄືອງໂທລະຄົມທີ່ໄດ້ບັນທຶກ ແລະ ທີ່ບໍ່ໄດ້ບັນທຶກ
  • ຈັດກຳນົດຮູບແບບທີ່ປະກອບມີຄວາມເຫັນດີເມື່ອປະກອບມີຄວາມເລືອກຂອງຜູ້ຄົນ
  • ການຈັດກຳນົດຮູບແບບສຳລັບປະກອບສະຫນາມທີ່ມີຜົນຄວາມມີຜົນ/ບໍ່ມີຜົນ/ສະຫນາມຈຳນວນຫຼາຍ/ສະຫນາມທີ່ສາມາດເລືອກຫຼືບໍ່

ຕາລະຊົນປະກອບສະນັກວິດສະຕິດ CSS ທີ່ຫຼາຍທັງໝົດ

ສະນັກວິດສະຕິດ ຕົວຢ່າງ ການອະທິບາຍຕົວຢ່າງ
:active a:active ເລືອກທາງເຄືອງໂທລະຄົມ
:any-link a:anylink ເລືອກປະກອບ <a> ຫຼື <area> ທີ່ມີຜົນຄວາມເຊື່ອມຕໍ່
:auto-fill input:autofill ເລືອກປະກອບ <input> ທີ່ຖືກກຳນົດຂອງຜູ້ຄົນໃນບາງຖານ
:checked option:checked ຕົກລົງປະກອບ <input> ຫຼື <option> ທີ່ຖືກເລືອກ
:default input:default ເລືອກປະກອບສະຫນາມໃນຟອມບັນຊີທີ່ມີການກ່ຽວຂ້ອງ
:defined :defined ເລືອກປະກອບທີ່ກໍາລັງຖືກກຳນົດ (ປະກອບທຳມະດາ ຫຼື ປະກອບທີ່ສ້າງຂຶ້ນເອງ)
:dir() :dir(rtl) ເລືອກປະກອບທີ່ມີທຳດັບທີ່ຄົບກະຈາຍ
:disabled option:disabled ເລືອກປະກອບທີ່ຖືກຫົວໜ້າລົງ (ປະກອບສະຫນາມໃນຟອມບັນຊີແບບທຳມະດາ ຫຼື ປະກອບທີ່ສ້າງຂຶ້ນເອງ)
:empty div:empty ເລືອກປະກອບທີ່ບໍ່ມີລູກສົມທູກ (ລວມທັງຫົວຂໍ້ຕາມ)
:enabled input:enabled ເລືອກປະກອບທີ່ມີຄວາມກະຕຸ້ນງານ (ພົນໃນປະກອບຟອມ).
:first @page :first ສະພາບອອກພິມບົດຂັດຄວາມທຳອິດ (ພ້ອມກັບ @page ຄຳປະສານ).
:first-child p:first-child ເລືອກປະກອບທີ່ເປັນສິ່ງຫນັງສິ່ງຜູ້ໃຫ້ການທຳອິດຂອງຄູ່ຮ່ວມ (ໃນຄູ່ຮ່ວມທີ່ມີຊະນິດ).
:first-of-type li:first-of-type ເລືອກປະກອບທີ່ເປັນຊະນິດທຳອິດຂອງຄູ່ຮ່ວມທີ່ມີຊະນິດພິເສດ.
:focus select:focus ເລືອກປະກອບທີ່ມີຄວາມສົນໃຈ (ພົນໃນປະກອບຟອມ).
:focus-visible button:focus-visible ເລືອກປະກອບທີ່ມີຄວາມສົນໃຈ (ພຽງແຕ່ພາຍໃນການນຳໃຊ້ຄຳມະນຸດສະໜາມ).
:focus-within form:focus-within ຕົກລົງປະກອບຫນັງທີ່ມີຄວາມສົນໃຈຫນັງຂອງຫນັງທີ່ມີຄວາມສົນໃຈຫນັງ.
:fullscreen :fullscreen ເລືອກປະກອບທີ່ຢູ່ໃນສະພາບການສະແດງສະໜາມບັນຈຸ.
:has() h2:has(+p) ເລືອກ <h2> ແມ່ນສິ່ງຫນັງ <p> ແລະນຳມີຮູບແບບຕໍ່ <h2>.
:hover a:hover ເລືອກປະກອບທີ່ຢູ່ໃນສະພາບຂັງສອງຂາວ.
:in-range input:in-range ເລືອກປະກອບ <input> ທີ່ມີຄວາມສຳຄັນຢູ່ໃນຂອບຂອງຄວາມສຳຄັນທີ່ກໍານົດ.
:indeterminate input:indeterminate ເລືອກປະກອບຟອມທີ່ຢູ່ໃນສະພາບບໍ່ຮັບການພິຈາລະນາ.
:invalid input:invalid ເລືອກປະກອບຟອມຄວາມບໍ່ມີຄວາມສຳຄັນ.
:is() :is(ul, ol) ເລືອກທຸກ <ul> ແລະ <ol> ບັນດາປະກອບ.
:lang() p:lang(it) ເລືອກ <p> ທີ່ມີຜູ້ສັງເກດຄຳປະສານ "it" (ພາສາອິຕາລີ).
:last-child li:last-child ເລືອກ <li> ແມ່ນສິ່ງຫນັງສິ່ງຜູ້ໃຫ້ການສຸດທ້າຍ.
:last-of-type p:last-of-type ເລືອກ <p> ແມ່ນສິ່ງຫນັງສິ່ງຜູ້ໃຫ້ການປະຕິບັດສຸດທ້າຍຂອງສິ່ງຜູ້ໃຫ້ການ.
:left @page :left ສະພາບອອກພິມບົດຂັດຄວາມທັງສອງອອກພິມ (ພ້ອມກັບ @page ຄຳປະສານ).
:link a:link ເລືອກທາງເຊື່ອມທີ່ບໍ່ໄດ້ຢືນຢັນ.
:modal :modal ເລືອກປະກອບທີ່ຢູ່ໃນສະພາບມອດ.
:not() :not(p) ເລືອກປະກອບທີ່ບໍ່ແມ່ນ <p>.
:nth-child() p:nth-child(2) ເລືອກ <p> ແມ່ນສິບຕອນຫນັງສິ່ງຜູ້ໃຫ້ການປະຕິບັດ.
:nth-last-child() p:nth-last-child(2) ເລືອກບັນທັດ <p> ທີ່ເປັນບັນດາ <p> ທີ່ເປັນຜູ້ລູກທີສອງຈາກທີ່ສຸດຂອງສາຍພາບຂອງພວກເຂົາ.
:nth-last-of-type() p:nth-last-of-type(2) ເລືອກບັນທັດ <p> ທີ່ເປັນບັນດາ <p> ທີ່ເປັນຜູ້ລູກທີສອງຈາກທີ່ສຸດຂອງສາຍພາບຂອງພວກເຂົາ.
:nth-of-type() p:nth-of-type(2) ເລືອກບັນທັດ <p> ທີ່ເປັນບັນດາ <p> ທີ່ເປັນຜູ້ລູກທີສອງຂອງສາຍພາບຂອງພວກເຂົາ.
:only-child p:only-child ເລືອກບັນທັດ <p> ທີ່ເປັນຜູ້ລູກດຽວພຽງຂອງສາຍພາບຂອງພວກເຂົາ.
:only-of-type p:only-of-type ເລືອກບັນທັດ <p> ທີ່ເປັນບັນດາ <p> ດຽວພຽງຂອງສາຍພາບຂອງພວກເຂົາ.
:optional textarea:optional ເລືອກບັນທັດ <input>、<select> ຫຼື <textarea> ທີ່ບໍ່ມີລະບົບ required.
:out-of-range input:out-of-range ເລືອກບັນທັດ <input> ທີ່ຄຸນຄ່າບໍ່ຢູ່ໃນຂອບເຂດທີ່ກໍານົດ.
:placeholder-shown input:placeholder-shown ເລືອກບັນທັດ <input> ຫຼື <textarea> ທີ່ປະກາດຄວາມຄິດຄອບ.
:popover-open :popover-open ເລືອກບັນທັດທີ່ກຳລັງດຳເນີນການປະກາດສະເພາະ.
:read-only input:read-only ເລືອກບັນທັດທີ່ມີລະບົບ readonly.
:read-write input:read-write ເລືອກບັນທັດທີ່ສາມາດເຮັດການແກ້ໄຂ.
:required input:required ເລືອກບັນທັດທີ່ມີລະບົບ required.
:right @page :right ສະທ້ອນບັນດາໜ້ານັບບັນທຶກທີ່ຢູ່ທາງຂວາຂອງໂຕກະຈາຍ (ພ້ອມກັບ @page ຄົນສະຕິກັນ).
:root :root ເລືອກບັນທັດທີ່ເປັນບັນດາສາຍພາບຂອງໂຕກະຈາຍ.
:scope :scope ເລືອກບັນທັດທີ່ເປັນຈຸດປະກອບການຄົ້ນຫາຫຼືຂອບເຂດ.
:state() :state() ເລືອກບັນທັດທີ່ມີສະຖານະທີ່ສະເພາະທີ່ກໍານົດ.
:target :target ເລືອກບັນທັດທີ່ກຳລັງດຳເນີນ.
:user-invalid :user-invalid ເລືອກບັນທັດທີ່ມີຄຸນຄ່າຜົນບໍ່ສຳເລັດໃນການຕິດຕໍ່ກັບຜູ້ນຳໃຊ້.
:user-valid :user-valid ເລືອກບັນທັດທີ່ມີຄຸນຄ່າຜົນສຳເລັດໃນການຕິດຕໍ່ກັບຜູ້ນຳໃຊ້.
:valid input:valid ເລືອກບັນທັດທີ່ມີຄຸນຄ່າຜົນສຳເລັດ.
:visited a:visited ເລືອກທຸກບັນດາທໍານາຍທີ່ໄດ້ຖືກນຳໃຊ້.
:where() :where(ol, ul) ເລືອກທຸກ <ul> ແລະ <ol> ບັນດາປະກອບ.