CSS 选择器

CSS 选择器

CSS ຄາດຕະການຖືກນຳໃຊ້ເພື່ອ“ຊອກຫາ”（ຫຼືເລືອກ）ຫຼັກສະນະ HTML ທີ່ຈະກະຈາຍຈຸດສະນະ。

ພວກເຮົາສາມາດກະຈາຍ CSS ຄາດຕະການເປັນຫ້າບັນດາພາສານຢູ່ນັ້ນ:

  • ຄາດຕະການຄູ່ມວຍພື້ນຖານ（ຕິດຕາມຊື່ຊະນະຄວາມຫຼື ID ຫຼືປະເພດເພື່ອເລືອກຫຼັກສະນະ）
  • ຄາດຕະການການປະສານ（ຕິດຕາມສະພາບພິເສດຂອງຫຼັກສະນະລະຫວ່າງພວກເຂົາເພື່ອເລືອກຫຼັກສະນະ）
  • ຄາດຕະການສີນລະບາຍ（ຕິດຕາມສະພາບພິເສດຂອງຫຼັກສະນະເພື່ອເລືອກຫຼັກສະນະ）
  • ຄາດຕະການສີນລະບາຍ（ຕິດຕາມປະສົມປະກອບຫຼັກສະນະຂອງຫຼັກສະນະເພື່ອການກະຈາຍກຳນົດຈຸດສະນະ）
  • ຄາດຕະການປະສົມປະກອບ（ຕິດຕາມປະສົມປະກອບຫຼືຄຸນນະພາບຂອງປະສົມປະກອບເພື່ອເລືອກຫຼັກສະນະ）

ນີ້ເປັນໜ້າທີ່ຈະອະທິບາຍຄູ່ມວຍ CSS ຄາດຕະການພື້ນຖານ。

CSS Element Selector

元素选择器根据元素名称来选择 HTML 元素。

ຕົວຢ່າງ

在这里，页面上的所有

元素都将居中对齐，并带有红色文本颜色：

p {
  text-align: center;
  color: red;
}

ຕິດຕາມການທົດລອງຕົນເອງ

CSS �ູ່ມື id

id �ູ່ມືຖືກນໍາໃຊ້ເພື່ອຄົ້ນຫາປະກອບທີ່ມີ id.

id ຂອງປະກອບແມ່ນມີຄວາມລະເວັ້ນພຽງຫນຶ່ງໃນໜ້າເວັບ，ຖ້າແຕ່ id ຄູ່ມືຖືກນໍາໃຊ້ເພື່ອຄົ້ນຫາປະກອບລະດັບພຽງຫນຶ່ງ!

ເພື່ອຄົ້ນຫາປະກອບທີ່ມີ id ��ິຈາລະນາການຄົ້ນຫາດ້ວຍຄຳສັ່ງຂອງຄຳສັ່ງ (#) ແລະ id ຂອງປະກອບ.

ຕົວຢ່າງ

ກົດລະບຽບ CSS ນີ້ຈະນໍາໃຊ້ຕໍ່ປະກອບ HTML ທີ່ມີ id="para1":

#para1 {
  text-align: center;
  color: red;
}

ຕິດຕາມການທົດລອງຕົນເອງ

ເຫັນເຈົ້າ:ຊັບສັບ id ບໍ່ສາມາດເລີ່ມຈາກຈຳນວນ!

CSS �ູ່ມືຊັບສັບ

CSS �ູ່ມືຊັບສັບ

ເພື່ອຄົ້ນຫາປະກອບທີ່ມີ class ພິຈາລະນາການຄົ້ນຫາດ້ວຍຄຳສັ່ງຂອງຄຳສັ່ງ (.) ແລະຊັບສັບ.

ຕົວຢ່າງ

ໃນຕົວຢ່າງນີ້，ທຸກປະກອບ HTML ທີ່ມີ class="center" ຈະຈະເປັນສີສີນຳ ແລະຈັດການການກັດກັນກາງ:

.center {
  text-align: center;
  color: red;
}

ຕິດຕາມການທົດລອງຕົນເອງ

ທ່ານສາມາດກຳນົດໃຫ້ພຽງແຕ່ປະກອບ HTML ທີ່ພິຈາລະນາຈະຖືກການຈັດການລະບຽບ.

ຕົວຢ່າງ

ໃນຕົວຢ່າງນີ້，ພຽງແຕ່ <p> ທີ່ມີ class="center" ຈະຖືກຈັດການການກັດກັນກາງ:

p.center {
  text-align: center;
  color: red;
}

ຕິດຕາມການທົດລອງຕົນເອງ

HTML ປະກອບສອງຊັບສັບກໍ່ສາມາດ.

ຕົວຢ່າງ

ໃນຕົວຢ່າງນີ້，<p> ຈະຖືກການການຈັດການລະບຽບຕາມ class="center" ແລະ class="large":

<p class="center large">ບົດຄວາມນີ້ອ້າງຄວາມນອກສອງຊັບສັບ.</p>

ຕິດຕາມການທົດລອງຕົນເອງ

ເຫັນເຈົ້າ:ຊັບສັບບໍ່ສາມາດເລີ່ມຈາກຈຳນວນ!

CSS �ູ່ມືທົ່ວໄປ

CSS �ູ່ມືທົ່ວໄປ (*):

ຕົວຢ່າງ

CSS ກົດລະບຽບທີ່ຖືກຜົນຄວາມຕໍ່ຕົວປະກອບ HTML ທີ່ຢູ່ໃນໜ້າເວັບ:

* {
  text-align: center;
  color: blue;
}

ຕິດຕາມການທົດລອງຕົນເອງ

CSS �ູ່ມືກຸ່ມ

CSS �ູ່ມືກຸ່ມຄົ້ນຫາຕົວປະກອບ HTML ທີ່ມີລະບຽບຈັນກັນ.

ບັນທຶກ CSS ທີ່ຖືກອະທິບາຍຢູ່ລາຍການຕໍ່າກັບ h1, h2, p (h1, h2, p ມີລະບຽບຈັນກັນ):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

ມັນດີທີ່ຈະຈັດການຄູ່ມືຄົ້ນຫາໃນກຸ່ມເພື່ອຫຼຸດຕົວລະບຽບລະບົບ.

ເພື່ອຈັດການຄູ່ມືຄົ້ນຫາໃນກຸ່ມໄດ້ການໃຊ້ຄຳແຈກຄວາມດ້ວຍຄຳແຈກຄຳສັ່ງ.

ຕົວຢ່າງ

ໃນຕົວຢ່າງນີ້，ພວກເຮົາຈະຈັດການຄູ່ມືຄົ້ນຫາທີ່ກ່ຽວກັບລາຍການລະບຽບຂັ້ນຕົ້ນ:

h1, h2, p {
  text-align: center;
  color: red;
}

ຕິດຕາມການທົດລອງຕົນເອງ

ຄູ່ມື CSS ຄົ້ນຫາທີ່ງາມຢ່າງງ່າຍ

ຄູ່ມືຄົ້ນຫາ ຕົວຢ່າງ ການອະທິບາຍຕົວຢ່າງ
.class .intro ເລືອກຕົວປະກອບທີ່ມີ class="intro".
#id #firstname Select the element with id="firstname".
* * Select all elements.
element p Select all <p> elements.
element,element,.. div, p Select all <div> elements and all <p> elements.

Further Reading

Extra Books:CSS Element Selector

Extra Books:CSS Selector Grouping

Extra Books:CSS Class Selector Explanation

Extra Books:CSS ID Selector Explanation

Extra Books:CSS Attribute Selector Explanation

Extra Books:CSS Descendant Selector

Extra Books:CSS Child Element Selector

Extra Books:CSS Adjacent Sibling Selector