CSS ประเภทหลัก

What is a pseudo-class？

Pseudo-classes are used to define the special state of elements.

For example, it can be used for：

  • Set the style when the mouse hovers over the element
  • Set different styles for visited and unvisited links
  • Set the style when the element is focused
Hover over me

Syntax

Pseudo-class syntax：

selector:pseudo-class {
  property: value;
}

Anchor pseudo-class

Links can be displayed in different ways：

ตัวอย่าง

/* Unvisited link */
a:link {
  color: #FF0000;
}
/* Visited link */
a:visited {
  color: #00FF00;
}
/* Hover over link */
a:hover {
  color: #FF00FF;
}
/* Selected link */
a:active {
  color: #0000FF;
}

ลองด้วยตัวเอง

Note：a:hover It must be in the CSS definition a:link and a:visited before it takes effect!a:active It must be in the CSS definition a:hover It takes effect after! The pseudo-class name is case-insensitive.

Pseudo-classes and CSS classes

Pseudo-classes can be used with CSS classes：

When you hover over the link in the example, it changes color：

ตัวอย่าง

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

ลองด้วยตัวเอง

Hover over <div>

Use on <div> element :hover pseudo-class instance：

ตัวอย่าง

div:hover {
  background-color: blue;
}

ลองด้วยตัวเอง

โปรแกรมช่วยแนะนำที่เรียบง่าย

เคลื่อนที่เมาส์เหนือ <div> แถวเพื่อแสดง <p> แถว (เหมือนตัวช่วยแนะนำ)

เคลื่อนที่เมาส์ขึ้นมาเพื่อแสดง <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;
}

ลองด้วยตัวเอง

ตรงตัวอย่างทั้งหมด

ในตัวอย่างด้านล่างนี้

ตัวอย่าง

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

ลองด้วยตัวเอง

ตรงตัวอย่างทั้งหมด

ในตัวอย่างด้านล่างนี้

ตัวอย่าง

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> ที่เป็นลูกแรกของอนุญาตให้มีค่าที่ไม่มีข้อบังคับ <p> อิเล็กทรอนิกส์
:first-of-type p:first-of-type เลือกทุก <p> ที่เป็นลูกแรกของอนุญาตให้มีค่าที่ไม่มีข้อบังคับ <p> อิเล็กทรอนิกส์
:focus input:focus เลือกองค์ประกอบ <input> ที่มีความสำคัญ
:hover a:hover เลือกลิงก์ที่มีประสาทเห็นที่เห็นลงมือ
:in-range input:in-range เลือกองค์ประกอบ <input> ที่มีค่าในขอบเขตที่กำหนด
:invalid input:invalid เลือกทุกองค์ประกอบ <input> ที่มีค่าที่ผิดปกติ
:lang(language) p:lang(it) เลือกทุก <p> ที่มีค่าแคตาล็อกในแคตาล็อกของภาษาที่เริ่มด้วย 'it'
:last-child p:last-child เลือกทุก <p> ที่เป็นลูกสุดท้ายของอนุญาตให้มีค่าที่ไม่มีข้อบังคับ นับจากลูกหลังสุด
:last-of-type p:last-of-type เลือกทุก <p> ที่เป็นลูกสุดท้ายของอนุญาตให้มีค่าที่ไม่มีข้อบังคับ <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> ที่เป็นลูกที่สองของอนุญาตให้มีค่าที่ไม่มีข้อบังคับ <p> อิเล็กทรอนิกส์ นับจากลูกหลังสุด
:nth-of-type(n) p:nth-of-type(2) เลือกทุก <p> ที่เป็นลูกที่สองของอนุญาตให้มีค่าที่ไม่มีข้อบังคับ <p> อิเล็กทรอนิกส์
:only-of-type p:only-of-type เลือกทุก <p> ที่เป็นลูกเดียวของอนุญาตให้มีค่าที่ไม่มีข้อบังคับ <p> อิเล็กทรอนิกส์
:only-child p:only-child เลือกส่วนที่เป็นลูกเดียวของอนุญาตให้มีค่าที่ไม่มีข้อบังคับ <p> อิเล็กทรอนิกส์
:optional input:optional เลือกอินพุทที่ไม่มีคุณสมบัติ 'required'
:out-of-range input:out-of-range เลือกอินพุทที่มีค่าที่อยู่นอกช่วงที่กำหนด
:read-only input:read-only เลือกอินพุทที่มีคุณสมบัติ 'readonly'
:read-write input:read-write เลือกอินพุทที่ไม่มีคุณสมบัติ 'readonly'
:required input:required เลือกอินพุทที่มีคุณสมบัติ 'required'
:root root เลือกองค์ประกอบเริ่มต้นขององค์ประกอบ
:target #news:target เลือกองค์ประกอบ #news ที่กำลังใช้อยู่
:valid input:valid เลือกอินพุทที่มีค่าที่ถูกต้อง
:visited a:visited เลือกลิงก์ที่เคยเข้าเว็บไซต์

หน้าต่างๆ ใน CSS ที่เป็นปลิวเซล็กชี้

เลือกตัว ตัวอย่าง บทบาทตัวอย่าง
::after p::after ใส่เนื้อหาหลังแอลกอริทึม <p> ตัวอย่าง
::before p::before ใส่เนื้อหาก่อนแอลกอริทึม <p> ตัวอย่าง
::first-letter p::first-letter เลือกตัวอักษรแรกของแอลกอริทึม <p> ตัวอย่าง
::first-line p::first-line เลือกบรรทัดแรกของแอลกอริทึม <p> ตัวอย่าง
::selection p::selection เลือกส่วนที่ผู้ใช้เลือก