เปรียบเทียบ Selectors ของ CSS2 และ CSS3

โดย พร อันทะ เมื่อ 2008-02-19 09:19:54 ดูทั้งหมด 636 ครั้ง

เราจะเตรียมตัว ต้อนรับการมาถึงของ IE8 กันอย่างไรให้สมศักดิ์ศรี ถึงแม้ว่า ต้นมีนาคมนี้ ความไม่แน่นอน ยังคงมีอยู่สูงว่า จริงๆ แล้วเบต้า จะออกมาให้เราลองใช้กันทันหรือไม่ 5 มีนาเราคงเห็นคำตอบกัน แต่เรานั่งพิจารณาดูกันให้ถี่ถ้วนกันอีกสักนิดว่า เราจะนำ Selectors ทั้งสองเวอร์ชั่นเหล่านี้ มาใช้งานให้คุ้มกันอย่างไรบ้าง

ปัจจุบัน Selectors รูปแบบหลักๆ ที่เราใช้กันบ่อยมาก ก็คงจะมี

E
E:link
E:visited
E:active
E:hover
DIV.warning
E#myid
* พบเจอได้น้อย
E F พบเจอได้น้อย

โดยในความเป็นจริงแล้ว ปัจจุบันสำหรับ Modern Browsers ทั่วไป CSS Selectors Version 2 สามารถใช้ได้ทั้งหมด

CSS2 Selectors

*
E
E F
E > F
E:first-child
E:link

E:visited
1. E:active
2. E:hover
3. E:focus
E:lang(c)
E + F
E[foo]
E[foo="warning"]
E[foo~="warning"]
E[lang|="en"]
DIV.warning
E#myid

CSS3 Selectors

*
E
E[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E[hreflang|="en"]
E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:link

E:visited
1. E:active
2. E:hover
3. E:focus
E:target
E:lang(fr)
E:enabled
E:disabled
E:checked
E::first-line
E::first-letter
E::selection
E::before
E::after
E.warning
E#myid
E:not(s)
E F
E > F
E + F
E ~ F

ดูกันให้น้ำลายไหลไปก่อน นะครับ เดี๋ยวเราค่อยมานั่งไล่กันไปทีละตัว

- ยังไม่มีความคิดเห็น
- แสดงความคิดเห็นกับ : เปรียบเทียบ Selectors ของ CSS2 และ CSS3
About Author: พร อันทะ
- พร อันทะ

Tags:

เนื้อหาที่เกี่ยวข้อง

CSS3 เพื่ออะไร?

Unknown Version Unknown

Accessibility Links

เปรียบเทียบ Selectors ของ CSS2 และ CSS3