CSS 特异性

什么是特异性？

如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。

ພະຍາຍາມພົບຄວາມສະເພາະ (specificity) ຄືວ່າຄະແນນ/ລະດັບທີ່ສາມາດກຳນົດເລື່ອງທີ່ຈະນຳໃຊ້ກົດລະບຽບຖືກນຳໃຊ້ໃສ່ປະກອງ.

ການເລືອກຕົວປະຈຳວັດທະນະທຳ (*) ມີຄວາມສະເພາະຍັງຕໍ່າກວ່າການເລືອກຕົວ ID ມີຄວາມສະເພາະຫຼາຍ!

ເຫັນຫຍັງ:ສິ່ງທີ່ຈະກຳຢ່າງນັ້ນແມ່ນເປັນການບໍ່ຕາມກົດລະບຽບ CSS ສໍາລັບປະກອບສ່ວນບາງຫນັງທີ່ບໍ່ຕາມກົດລະບຽບ CSS，ເຖິງວ່າເຈົ້າອາດຄິດວ່າຄວນຈະຕາມກົດລະບຽບ.

ລະບົບຄວາມສະເພາະ

ແຕ່ລະກົດລະບຽບມີຄຳຖານໃນລະບົບຄວາມສະເພາະ. ປະເພດດັ່ງຕໍ່ມາທີ່ກໍ່ມີຄຳຖານຄວາມສະເພາະຂອງກົດລະບຽບ:

style ອິນເລນ - ຮູບແບບ ອິນເລນ (inline) ແມ່ນຮູບແບບທີ່ຕິດຕັ້ງໂດຍກົງໃສ່ສັບສົນທີ່ຈະສ້າງຮູບແບບ. ເຫດນະນະ: <h1 style="color: #ffffff">.

ID - ID ແມ່ນສັນຍາບັນທຶກສະຖານະພາບສັບສົນໃນເວລານັ້ນ, ເຊັ່ນ #navbar.

ປະເພດ, ລະບຽບ ແລະ ୱີຍານ - ປະເພດນີ້ລວມມີ .classes, [attributes] ແລະ ୱີຍານ, ເຊັ່ນ :hover, :focus.

ສັບສົນ ແລະ ୱີຍານ - ປະເພດນີ້ລວມມີສັບສົນ, ອີຍະພັນ, ແລະ :before, :after.

ພວກເຈົ້າຈະຄິດຫາວ່າຈະຄິດຫາຄວາມສະເພາະຫຼືບໍ່?

ບັນທຶກກົດລະບຽບຄວາມສະເພາະຂອງເຈົ້າ!

ເລີ່ມຈາກ 0, ຕື່ມ 1000 ສຳລັບ style, 100 ສຳລັບ ID, 10 ສຳລັບຜະລິດຕະພັນ, ສັບສົນຫຼື ອີຍະພັນ.

ຄິດຫາກິດຈະກຳສາມກັນດັ່ງຕໍ່ມາ:

Example

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A ມີຄວາມສະເພາະ 1 (ສັບສົນ)
  • B ມີຄວາມສະເພາະ 101 (ID ແລະ ສັບສົນ)
  • C ມີຄວາມສະເພາະ 1000 (style ອິນເລນ)

ຍ້ອນ 1 < 101 < 1000, ກົດລະບຽບທີສາມ (C) ມີຄວາມສະເພາະຫຼາຍກວ່າ, ແລະຈະຖືກນໍາໃຊ້.

ກົດລະບຽບຄວາມສະເພາະທີ 1:

ໃນການຄືກັນຄວາມສະເພາະ: ກົດລະບຽບທີ່ຫຼາຍຄັ້ງຈະມີຜົນງານຕໍ່າສຸດ. - ຖ້າມີກົດລະບຽບດຽວກັນຖືກເຂົ້າໃນຕົວແຫຼວພາຍນອກຫຼາຍຄັ້ງ, ກົດລະບຽບທີ່ຕໍ່ມາຈະຈະມີຄວາມຫຼາຍກວ່າສັບສົນທີ່ຈະສ້າງຮູບແບບ, ແລະຈະຖືກນໍາໃຊ້:

Example

h1 {background-color: yellow;}
h1 {background-color: red;}

Try it yourself

ກົດລະບຽບທີ່ຕໍ່ມາຈະຈະມີຜົນງານຕໍ່າສຸດ.

ກົດລະບຽບຄວາມສະເພາະທີ 2:

ເປັນການເລືອກ ID ມີຄວາມສະເພາະຫຼາຍກວ່າການເລືອກທາງລະບຽບ. - ບັນດາກິດຈະກຳສາມກັນດັ່ງຕໍ່ມາ:

Example

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Try it yourself

ກົດລະບຽບທີໜຶ່ງມີຄວາມຄືກັນຫຼາຍກວ່າສອງກົດລະບຽບອື່ນໆ, ດັ່ງນັ້ນຈະຖືກນໍາໃຊ້.

ກົດລະບຽບຄວາມສະເພາະທີ 3:

ເປັນການເລືອກໃນບັນດາຄວາມຄືກັນຫຼາຍກວ່າການເລືອກສັບສົນພຽງຢ່າງດຽວ. - ຮູບແບບສະແດງຫຼັງການເຂົ້າໃນສັບສົນທີ່ຈະສ້າງຮູບແບບ. ດັ່ງນັ້ນໃນກໍລະນີດັ່ງຕໍ່ມາ:

Example

ມາຈາກ CSS ຕົວແຫຼວພາຍນອກ:

#content h1 {background-color: red;}

In the HTML file:

<style>
#content h1 {
  background-color: yellow;
}
</style>

The next rule will apply.

Specificity Rule 4:

Class selectors will beat any number of element selectors - Class selector (such as .intro will beat h1, p, div, etc.):

Example

.intro {background-color: yellow;}
h1 {background-color: red;}

Try it yourself

In addition,Universal selectors and inherited values have 0 - Specificity of * and body *, and similar have 0 specificity. The specificity of inherited values is also 0.