ดูที่ตัวเลือกการปฏิเสธ CSS3 (ไม่ใช่)
CSS มีตัวเลือกบางอย่างที่ช่วยให้คุณสามารถเลือกองค์ประกอบในเงื่อนไขบางอย่างเช่น : เลื่อน, : โฟกัส, :คล่องแคล่ว, เป็นต้น แต่วันนี้เราจะไม่ครอบคลุมตัวเลือกเหล่านั้น เราจะตรวจสอบวิธีการหนึ่งซึ่งยังคงเป็นวิธีที่รู้จักกันน้อย แต่ใช้โดยนักออกแบบเว็บไซต์ส่วนใหญ่ - นั่นคือ :ไม่ ตัวเลือกหรือที่เรียกว่าตัวเลือกการปฏิเสธ.
มันทำอะไร?
ฉันแน่ใจว่า :ไม่ ชื่อตัวเองได้อธิบายฟังก์ชั่นของมันว่ามันจะเลือก ตรงกันข้ามกับองค์ประกอบหรือเงื่อนไขที่ระบุ. ตัวอย่างเช่น:
ไวยากรณ์นี้จะเลือกองค์ประกอบอื่นที่ไม่ใช่ พี (วรรค).
: ไม่ได้ (P) ในขณะที่ตัวอย่างไวยากรณ์ด้านล่างจะเลือก div องค์ประกอบที่ทำ ไม่ มีคลาส abc
div: ไม่ (.abc) เอาล่ะทีนี้มาลองตัวเลือกนี้ในตัวอย่างจริง:
ก่อนอื่นเรามาทำสองสามย่อหน้าด้วยลิงค์จากวิกิพีเดียและลิงค์กับโดเมนสมมติ นี่คือมาร์กอัป HTML สำหรับย่อหน้า.
CSS: ไม่ใช่ตัวเลือกสาธิต
Jujubes ประยุกต์ใช้งา snaps snaps Chupa เค้กช็อคโกแลต. เค้กข้าวโอ๊ตมาร์ชเมลโล่ wypas เค้กโดนัททอฟฟี่ Chupa chups เยลลี่คัพเค้กหมีกูม เค้กเวเฟอร์เลมอน.
ชีสเค้กช็อกโกแลตโดนัท เยลลี่หวานม้วนผงsoufflà ??  ?? Ã'©เค้กช็อกโกแลต Wypas ฝ้ายลูกอมมะนาวหยดคุกกี้ขนมโดนัท Bonbon มาร์ซิปัน มาการูนลูกอมชะเอมเจลลี่ -o ช็อกโกแลตพายขนมหวานม้วน ขนมหวานฟู dragà?? Ã'© e ฝ้ายขนมบราวนี่มาร์ชเมลโล่.
พุดดิ้งราดหน้าอุ้งเล็บหมี พายขนมเค้กมัฟฟิน บราวนี่เค้กผลไม้ วุ้นขิงขนมปังขิงกรอบ กรงเล็บหมีพุดดิ้งขนมคัพเค้ก เค้กมัฟฟินแครอท เยลลี่ถั่วทาร์ตdragà ??  ?? Ã'© e icing หวาน หน้าท็อปปิ้งช็อกโกแลตแท่ง. ม้วนขนมทอฟฟี่น้ำตาลพลัมขนมdragà ??  ?? Ã'© e ขนมมัฟฟิน Bonbon.
เค้กมาร์ซิปันสมัครขนม เค้กผลไม้ wypas เค้กข้าวโอ๊ตช็อกโกแลต wypas dragà?? Ã'© e น้ำตาลพลัมแครอทไอซิ่งเค้ก คาราเมลช็อคโกแลตบาร์ครัวซองต์เวเฟอร์คัพเค้กพายพุทราช็อคโกแลตบาร์ บิสกิตขนม canes dragà?? Ã'© e.Candy บราวนี่เค้กข้าวโอ๊ตงา snaps ชีสเค้กชีสเค้กผง tootsie ม้วนบิสกิตหมีกรงเล็บ Soufflà?? Ã'© gummi bears วุ้นถั่วงา faworki snaps ขนมหวานของหวานคุกกี้บองบอน.
แผนนี่คือ: เราจะเลือกเฉพาะลิงก์ที่ไม่ได้ชี้ไปที่ Wikipedia แล้วให้เครื่องหมายอัศเจรีย์เพื่อแจ้งเตือนความสนใจไปยังลิงค์เหล่านั้น.
ก่อนอื่นเราจะเพิ่ม :หลังจาก องค์ประกอบเทียมในลิงก์ทั้งหมดเพื่อวางเครื่องหมายและเรากำหนดว่าเป็น อินไลน์บล็อก ธาตุ.
a: หลัง display: inline-block;
จากนั้นเพื่อเลือกทุกลิงก์ที่ไม่ได้ชี้ไปที่ Wikipedia เราจะรวม :ไม่ selector พร้อมตัวเลือกแอททริบิวต์ ตัวเลือกแอททริบิวที่นี่จะเลือกแท็กสมอทุกอันซึ่งแอททริบิว href เริ่มต้นด้วย http://en.wikipedia.org/ และด้วยการรวมเข้ากับ :ไม่, มันจะเลือกสิ่งที่ตรงกันข้ามอย่างชัดเจน ดังนั้นเราไปที่นี่:
a: not ([href ^ = "http://en.wikipedia.org/"]): หลัง background-color: # F8EEBD; เส้นขอบ: 1px solid # EEC56D; เส้นขอบรัศมี: 3px 3px 3px 3px; สี: # B0811E; เนื้อหา: "!"; ขนาดตัวอักษร: 10pt; ระยะขอบซ้าย: 5px; การขยาย: 1px 6px; ตำแหน่ง: ญาติ;
มันได้ผล! แท็กสมอที่ไม่ได้ชี้ไปที่ Wikipedia ตอนนี้มีเครื่องหมายอัศเจรีย์.
Chrome Bug
หากคุณดูสิ่งนี้ใน Chrome คุณจะสังเกตได้ว่าเอฟเฟกต์การแสดงผลไม่เหมือนด้านบน ลิงก์ทั้งหมดมีเครื่องหมายอัศเจรีย์โดยไม่คำนึงถึง URL.
กรณีนี้ได้รับการแก้ไขแล้วเป็นข้อบกพร่อง ดังนั้นเพื่อแก้ไขข้อผิดพลาดนี้เราจำเป็นต้องเพิ่มกฎนี้.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
และตอนนี้ปัญหาควรได้รับการแก้ไขแล้ว.
- การสาธิต
ข้อสรุป
ในบางสถานการณ์โดยใช้ :ไม่ ตัวเลือกเป็นตัวเลือกที่มีประสิทธิภาพมากที่สุดเช่นเดียวกับตัวอย่างด้านบนซึ่งเราสามารถเลือกองค์ประกอบแบบสุ่มโดยไม่ต้องเพิ่มคลาสที่ไม่จำเป็นหรือเพิ่มมาร์กอัพเพิ่มเติมในเอกสาร.
คุณสามารถสร้างเอฟเฟ็กต์ที่ยอดเยี่ยมได้จริงโดยใช้ตัวเลือกนี้และนี่คือตัวอย่างหนึ่ง: ฟังก์ชันการทำงานของตัวกรองด้วย CSS3
