อะไรคือความแตกต่างระหว่าง * และ * | * ใน CSS?

ใน CSS *จะจับคู่องค์ประกอบใด ๆ

*|*มีการใช้บ่อยครั้งแทนที่จะ*จับคู่องค์ประกอบทั้งหมด โดยทั่วไปจะใช้เพื่อการทดสอบ

ความแตกต่างระหว่าง*และ*|*ใน CSS คืออะไร?

ตามW3C Selector Spec :

ตัวเลือกสากลอนุญาตให้มีเนมสเปซทางเลือก มันถูกใช้ดังนี้:

ns|*
องค์ประกอบทั้งหมดใน namespace ns

*|*
องค์ประกอบทั้งหมด

|*
องค์ประกอบทั้งหมดที่ไม่มีเนมสเปซ

*
หากไม่มีการระบุ namespace เริ่มต้นสิ่งนี้จะเทียบเท่ากับ * | * มิฉะนั้นจะเทียบเท่ากับ ns | * โดยที่ ns เป็น namespace เริ่มต้น

ดังนั้นไม่*และ*|*ไม่เหมือนกันเสมอไป หากมีการระบุช่องว่างชื่อเริ่มต้นให้*เลือกเฉพาะองค์ประกอบที่เป็นส่วนหนึ่งของเนมสเปซนั้น

คุณสามารถเห็นความแตกต่างทางสายตาโดยใช้ตัวอย่างข้อมูลด้านล่างสองรายการ ในแรกจะมีการกำหนดเนมสเปซเริ่มต้นและ*ตัวเลือกจะใช้พื้นหลังสีเบจเฉพาะกับองค์ประกอบที่เป็นส่วนหนึ่งของ namsepace นั้นในขณะที่การ*|*ใช้ชายแดนกับองค์ประกอบทั้งหมด

@namespace "http://www.w3.org/2000/svg";

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

ในตัวอย่างด้านล่างไม่มีการกำหนดเนมสเปซเริ่มต้นและทั้งสองอย่าง*และ*|*นำไปใช้กับองค์ประกอบทั้งหมดและเพื่อให้พวกเขาทั้งหมดได้รับพื้นหลังสีเบจและเส้นขอบสีดำ กล่าวอีกนัยหนึ่งมันทำงานในลักษณะเดียวกันเมื่อไม่มีการระบุเนมสเปซเริ่มต้น

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

เป็นจุด BoltClock ออกมาในการแสดงความคิดเห็น ( 1 , 2 ) namespaces แรกนำมาใช้กับ XML ตามภาษาเช่น XHTML, SVG ฯลฯ แต่ตามรายละเอียดล่าสุดของทุกองค์ประกอบ HTML (นั่นคือองค์ประกอบใน namespace HTML) จะ namespaced http://www.w3.org/1999/xhtmlไป Firefox ติดตามพฤติกรรมนี้และสอดคล้องกับตัวแทนผู้ใช้ HTML5 ทั้งหมด คุณสามารถค้นหาข้อมูลเพิ่มเติมได้ในคำตอบนี้

*|*แสดงถึงตัวเลือกของ "องค์ประกอบทั้งหมดในเนมสเปซใด ๆ " ตามW3Cตัวเลือกจะแบ่งออกเป็น:

NS | E

โดยที่ ns คือเนมสเปซและ E คือองค์ประกอบ ตามค่าเริ่มต้นจะไม่มีการประกาศเนมสเปซ ดังนั้นหากมีการประกาศ namespace อย่างชัดเจน*|*และ*จะเลือกองค์ประกอบเดียวกัน

ใน CSS, * จะจับคู่องค์ประกอบใด ๆ

| ถูกนำมาใช้เพื่อให้ตรงกับการเลือกองค์ประกอบเฉพาะ ทั้งสองเป็นตัวเลือกที่ใช้สำหรับการทดสอบของเรา