HTML CSS ການສອນມາດຕະຖານການຄຳສັນຍາ ປະເພດ

class selector ສາມາດນຳໃຊ້ການວາງຮູບແບບວ່າບໍ່ຕ້ອງພົບກັບປະກອບສັນນະພາບເອກະສານ.

HTML CSS ການສອນມາດຕະຖານການຄຳສັນຍາ ປະເພດ

class selector ສາມາດນຳໃຊ້ການວາງຮູບແບບວ່າບໍ່ຕ້ອງພົບກັບປະກອບສັນນະພາບເອກະສານ.

ການເລື່ອງນີ້ສາມາດນຳໃຊ້ດ້ວຍອິດດຽວ ຫຼື ກັບປະກອບສັນນະພາບອື່ນໆ.

ຄຳແນະນຳ:ພຽງແຕ່ຫຼັງຈາກການຢາກຢືນຢັນເອກະສານຢ່າງພຽງພໍ, ຈະສາມາດນຳໃຊ້ເພື່ອເລື່ອງນີ້, ດັ່ງນັ້ນການນຳໃຊ້ສອງເພື່ອເລື່ອງນີ້ຈະຕ້ອງການມີການຄິດຫາແລະການວາງແຜນກ່ອນ.

ການນຳໃຊ້ class selector ແມ່ນວິທີທີ່ຫຼາຍທີ່ສຸດເພື່ອນຳໃຊ້ການວາງຮູບແບບບໍ່ຄິດກ່ອນການວາງການອອກແບບສະຖານະການ.

ດັດແກ້ HTML 代码

ກ່ອນທີ່ຈະນຳໃຊ້ class selector, ຕ້ອງໄດ້ດັດແກ້ການຢາກຢືນຢັນຂອງເອກະສານ HTML ເພື່ອພະຍາຍາມໃຫ້ class selector ປະຕິບັດພາບຫຼາຍຄວາມສຳຄັນ.

ເພື່ອທີ່ຈະພົບກັບການວາງຮູບແບບຂອງ class selector ກັບປະກອບສັນນະພາບຄົນມັນຕ້ອງການກໍານົດ class ວ່າຄວາມສຳຄັນ. ບັນຈຸ HTML 代码ທີ່ຖືກສະແດງລາວ.

<h1 class="important">
ປະກັບຫົວຂໍ້ນີ້ຫຼາຍຄວາມສຳຄັນ.
</h1>

class="important">
ບົດຄຳນີ້ຫຼາຍຄວາມສຳຄັນ.

ໃນການຂຽນລະບົບຂັ້ນກ່າວກ່າວນີ້ສອງປ່ຽນມີການກໍານົດ class ວ່າ important: ປະກັບຫົວຂໍ້ທຳອິດ (h1 ປ່ຽນ), ປະກັບບົດຄຳທີສອງ (p ປ່ຽນ).

Syntax

Then we use the following syntax to apply styles to these classified elements, that is, a dot (.) before the class name, then combined with a wildcard selector:

*.important {color:red;}

If you only want to select elements with the same class name, you can ignore the wildcard selector in the class selector, which will have no bad effect:

.important {color:red;}

亲自试一试

Combine element selectors

Class selectors can be combined with element selectors.

For example, you may want only paragraphs to be displayed as red text:

p.important {color:red;}

Selector now will match all p elements that contain class important, but no other type of element will match, regardless of whether it has this class attribute. Selector p.important means "all paragraphs that have class attribute as important". Because h1 element is not a paragraph, the selector does not match it, so the h1 element will not become red text.

ຖ້າເຈົ້າຕ້ອງການຈະມີການຈັດວິກິດທີ່ຕ່າງກັນສຳລັບປະກອບ h1, ສາມາດນຳໃຊ້ຄູ່ວິກິດ h1.important:

p.important {color:red;}
h1.important {color:blue;}

亲自试一试

CSS Multi-class Selector

ໃນວັນນະຄັດກ່ອນ, ພວກເຮົາໄດ້ຈັດການຄູ່ວິກິດທີ່ມີຄູ່ວິກິດໜຶ່ງວ່າ. ໃນ HTML, ຄູ່ວິກິດ class ອາດມີບັນດາວ່າມີຄູ່ວິກິດ, ທີ່ກະຈຳກັນໂດຍຄວາມຈະລອງ. ເປັນຕົວຢ່າງ, ຖ້າພວກເຮົາຕ້ອງການມີປະກອບພິເສດເປັນທີ່ສຳຄັນ (important) ແລະ ການອອກປະເງິນ (warning), ສາມາດຂຽນໄດ້ວ່າ:

class="important warning">
This paragraph is a very important warning.

ອັນດັບຂອງພວກນັ້ນບໍ່ມີຄວາມສໍາຄັນ, ສາມາດຂຽນໄດ້ວ່າ warning important ກໍ່ໄດ້.

ພວກເຮົາພະຍາຍາມວ່າເປັນບັນດາປະກອບທີ່ມີ class ວ່າ important ຈະເປັນມີວິວັດບັງ, ບັນດາປະກອບທີ່ມີ class ວ່າ warning ຈະເປັນມີກາຕົວ, ບັນດາປະກອບທີ່ມີ important ແລະ warning ທັງສອງຂອງພວກເຂົາຈະມີພາກດາວເຫຼືອຂອງສີເຫຼືອດຳ. ສາມາດຂຽນໄດ້ວ່າ:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

亲自试一试

ຈາກການເຊື່ອມຄູ່ວິກິດຄູ່ລວມພຽງແຕ່ການເລືອກ同时包含这些类名的元素（类名的顺序不限）。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：

.important.urgent {background:silver;}

不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：

class="important urgent warning">
This paragraph is a very important and urgent warning.

亲自试一试

重要事项：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。