CSS 伪类

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
请将鼠标悬停在我上面

语法

伪类的语法：

selector:pseudo-class {
  property: value;
}

锚伪类

链接能够以不同的方式显示：

ຕົວຢ່າງ

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
/* 已选择的链接 */
a:active {
  color: #0000FF;
}

ຕັ້ງການທົດລອງຕົນເອງ

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

ຕົວຢ່າງ

a.highlight:hover {
  color: #ff0000;
}

ຕັ້ງການທົດລອງຕົນເອງ

悬停在
上

在

元素上使用 :hover 伪类的实例：

ຕົວຢ່າງ

div:hover {
  background-color: blue;
}

ຕັ້ງການທົດລອງຕົນເອງ

ການສະແດງຄວາມຄິດຕາມຫຼັກຄອມທີ່ງາມ

ສະແດງສິ່ງ <p> ເມື່ອຍິນດາວຂຶ້ນເທິງສິ່ງ <div> (ຄືການສະແດງຄວາມຄິດຕາມຫຼັກຄອມ)

ສະແດງສິ່ງ <p> ເມື່ອຍິນດາວຂຶ້ນເທິງຂ້ອຍ.

ພິມວ່າຂ້ອຍຢູ່ບ່ອນນີ້!

ຕົວຢ່າງ

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

ຕັ້ງການທົດລອງຕົນເອງ

CSS - :first-child ປະຕິບັດພາສານາຍ

:first-child ປະຕິບັດພາສານາຍຈະກົດຫຼັກກົດຫຼັກສຳລັບສິ່ງທີ່ເປັນລູກສະຫ�ັກທຳອິດຂອງສິ່ງອື່ນ.

ການກວດຄົ້ນຈັບສິ່ງ <p> ທີ່ເປັນລູກສະຫ�ັກທຳອິດຂອງສິ່ງອື່ນ.

ໃນຕົວຢ່າງລາວ

ຕົວຢ່າງ

p:first-child {
  color: blue;
}

ຕັ້ງການທົດລອງຕົນເອງ

ການກວດຄົ້ນຈັບທຸກ <i> ທີ່ເປັນລູກສະຫຼັກທຳອິດຂອງສິ່ງ <p>.

ໃນຕົວຢ່າງລາວ

ຕົວຢ່າງ

p i:first-child {
  color: blue;
}

ຕັ້ງການທົດລອງຕົນເອງ

ການກວດຄົ້ນຈັບທຸກ <i> ທີ່ເປັນລູກສະຫຼັກທຳອິດຂອງສິ່ງ <p> ທີ່ເປັນລູກສະຫຼັກທຳອິດຂອງສິ່ງອື່ນ.

ໃນຕົວຢ່າງລາວ

ຕົວຢ່າງ

p:first-child i {
  color: blue;
}

ຕັ້ງການທົດລອງຕົນເອງ

CSS - :lang ປະຕິບັດພາສານາຍ

:lang ປະຕິບັດພາສານາຍອາດຈະກົດຫຼັກກົດຫຼັກສຳລັບພາສາທີ່ແຕກຕ່າງກັນ.

ໃນຕົວຢ່າງລາວ:lang ກໍານົດຄວາມພິມຕົວສະຫຼັກສຳລັບສິ່ງ <q> ທີ່ມີຜົນງານ lang="en":

ຕົວຢ່າງ

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

ຕັ້ງການທົດລອງຕົນເອງ

ຕົວຢ່າງອື່ນ

ເພີ່ມຊົງຈັກຕ່າງໆໃຫ້ການເຊື່ອມຕໍ່ທີ່ມີການສະແດງ
ຕົວຢ່າງນີ້ສະແດງວ່າແນວໃດທີ່ເພີ່ມຊົງຈັກຕ່າງໆໃຫ້ການເຊື່ອມຕໍ່ທີ່ມີການສະແດງ
ໃຊ້ :focus
ຕົວຢ່າງນີ້ສະແດງວ່າແນວໃດທີ່ໃຊ້ :focus ປະຕິບັດພາສານາຍ

ທຸກຊັບສັນ CSS ປະຕິບັດພາສານາຍ

ຄູ່ວິໄຈ ຫຼັກສັນຍານ ອີກຄວາມຈາກຫຼັກສັນຍານ
:active a:active ເລືອກການເຊື່ອມຕໍ່ທີ່ກຳລັງດຳເນີນງານ。
:checked input:checked ເລືອກເອກະສານ <input> ທີ່ຖືກເລືອກ。
:disabled input:disabled ເລືອກເອກະສານ <input> ທີ່ຖືກຫຼຸດຜົນງານ。
:empty p:empty ເລືອກເອກະສານ <p> ທີ່ບໍ່ມີລູກສະຫຼັກ。
:enabled input:enabled ເລືອກແຕ່ <input> ສິ່ງລຶກຄືນທີ່ມີຄຸນນະພາບທີ່ສາມາດໃຊ້
:first-child p:first-child ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:first-of-type p:first-of-type ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:focus input:focus ເລືອກແຕ່ <input> ສິ່ງລຶກຄືນທີ່ມີຄຸນນະພາບທີ່ກຳລັງມີຄວາມສົນໃຈ
:hover a:hover ເລືອກການເຊື່ອມຕໍ່ທີ່ຫົວໄກຂອງມືຂອງສະເປພະຍາດ
:in-range input:in-range ເລືອກແຕ່ <input> ສິ່ງລຶກຄືນທີ່ມີຄຸນນະພາບພາຍໃນຈຸດສະພາບຂອງຄືນ
:invalid input:invalid ເລືອກແຕ່ <input> ສິ່ງລຶກຄືນທີ່ມີຄຸນນະພາບບໍ່ມີຜົນດີ
:lang(language) p:lang(it) ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນທີ່ມີຄູ່ມືຂອງ lang ເລີ່ມຈາກ "it"
:last-child p:last-child ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:last-of-type p:last-of-type ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:link a:link ເລືອກການເຊື່ອມຕໍ່ທີ່ບໍ່ໄດ້ນໍາໃຊ້
:not(selector) :not(p) ເລືອກແຕ່ສິ່ງລຶກຄືນທີ່ບໍ່ແມ່ນ <p>
:nth-child(n) p:nth-child(2) ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:nth-last-child(n) p:nth-last-child(2) ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:nth-last-of-type(n) p:nth-last-of-type(2) ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:nth-of-type(n) p:nth-of-type(2) ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:only-of-type p:only-of-type ເລືອກແຕ່ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:only-child p:only-child ເລືອກ <p> ສິ່ງລຶກຄືນພຽງພາຍໃນສາຍພັນທີ່ແຕກຕ່າງກັນ
:optional input:optional ເລືອກປະກອບ <input> ທີ່ບໍ່ມີຄວາມມູນມັນ "required".
:out-of-range input:out-of-range ເລືອກປະກອບ <input> ທີ່ຄວາມມູນມັນບໍ່ຢູ່ໃນຂັ້ນຕອນທີ່ກໍານົດ.
:read-only input:read-only ເລືອກປະກອບ <input> ທີ່ມີຄວາມມູນມັນ "readonly".
:read-write input:read-write ເລືອກປະກອບ <input> ທີ່ບໍ່ມີຄວາມມູນມັນ "readonly".
:required input:required ເລືອກປະກອບ <input> ທີ່ມີຄວາມມູນມັນ "required".
:root root ເລືອກປະກອບທີ່ເປັນປະກອບພື້ນຖານຂອງປະກອບ.
:target #news:target ເລືອກປະກອບ #news ທີ່ກຳລັງສະຖານະການປະຕິບັດຢູ່ (ຄົງຂັນກັບ URL ທີ່ມີຄຳກຳນົດມາ).
:valid input:valid ເລືອກທຸກປະກອບ <input> ທີ່ມີຄວາມມູນມັນທີ່ຖືກຕ້ອງ.
:visited a:visited ເລືອກທຸກປະກອບ <a> ທີ່ໄດ້ຖືກຢືນຢັນ.

ຄູ່ວິໄຈສິບລາຍ CSS

ຄູ່ວິໄຈ ຫຼັກສັນຍານ ອີກຄວາມຈາກຫຼັກສັນຍານ
::after p::after ເພີ່ມຂັ້ນຕົວໃນຫຼັງ <p>.
::before p::before ເພີ່ມຂັ້ນຕົວໃນກ່ອນ <p>.
::first-letter p::first-letter ເລືອກການເລືອກສຳລັບຈຸດຫນັງທຳອິດຂອງປະກອບ <p>.
::first-line p::first-line ເລືອກການເລືອກສຳລັບປະກອບ <p> ທີ່ມີຄຳກຳນົດທຳອິດ.
::selection p::selection ເລືອກສ່ວນຫນັງຂອງປະກອບທີ່ນັກພິນລະບາຍຄົນໄດ້ເລືອກ.