ตัวเลือกคุณสมบัติของ CSS3 การกำหนดเป้าหมายประเภทไฟล์
ตัวเลือกคุณสมบัติ เป็นคุณสมบัติที่มีประโยชน์จริงๆในการเลือกองค์ประกอบโดยไม่ต้องเพิ่มฟุ่มเฟือย รหัส หรือ ชั้นเรียน. ตราบใดที่องค์ประกอบเป้าหมายมีคุณสมบัติเช่นนั้น href, src และ ชนิด เราไม่ต้องทำเช่นนั้น.
ตัวเลือกคุณลักษณะนั้นมีอยู่จริง ตั้งแต่ CSS 2.1, และตอนนี้เมื่อมีตัวเลือกแอททริบิวต์เพิ่มอีกสองสามชนิดในสเปค CSS3 เราสามารถกำหนดเป้าหมายคุณลักษณะขององค์ประกอบได้โดยเฉพาะยิ่งขึ้น.
และในโพสต์นี้เราจะใช้หนึ่งในไวยากรณ์เพื่อเลือก ประเภทไฟล์ ที่ถูกแทรกเป็นส่วนหนึ่งของค่าของแอตทริบิวต์.
การสนับสนุนไวยากรณ์และเบราว์เซอร์
ประเภทไฟล์ จะอยู่ท้ายชื่อไฟล์เสมอ ดังนั้นเพื่อเลือกว่า ประเภทไฟล์ เราสามารถใช้ไวยากรณ์ต่อไปนี้ [attr $ = "ค่า"]. ไวยากรณ์นี้ใช้ $ = ผู้ประกอบการที่จะกำหนดเป้าหมายในตอนท้ายของค่าแอตทริบิวต์ตัวอย่างเช่น:
a [href $ = ". pdf"]: ก่อนหน้า background: url ('… /images/document-pdf-text.png') ไม่ต้องทำซ้ำ ตัวอย่างด้านบนจะเลือกทุกลิงก์ที่ค่าแอตทริบิวต์นั้นลงท้ายด้วย .รูปแบบไฟล์ PDF และแทรกไอคอนคำ - เอกสารใน :ก่อน องค์ประกอบหลอก.
แหล่งไอคอน PDF: ไอคอนความทรงจำ
แม้ว่านี่จะเป็นการใช้งานทั่วไปของตัวเลือกนี้เราสามารถไปได้ไกลกว่านั้น.
เกี่ยวกับความเข้ากันได้ของเบราว์เซอร์ แม้ว่าไวยากรณ์นี้จะถูกนำมาใช้อย่างเป็นทางการเป็นสเปค CSS3 จริง ๆ แล้วมันได้รับการสนับสนุนตั้งแต่ Internet Explorer 7, เพื่อให้คุณสามารถนำไปใช้ได้อย่างปลอดภัยผ่านการออกแบบทั้งหมดของคุณ.
ตัวอย่าง
คุณจะไม่มีทางรู้ถ้าคุณไม่เคยลอง. เราแค่ต้องลองอะไรใหม่ ๆ เพื่อทำความเข้าใจกับสิ่งที่เรายังไม่เข้าใจ ดังนั้นที่นี่เราจะแสดงให้เห็นว่าไวยากรณ์นี้มีประโยชน์มากและมีประโยชน์อย่างไรในการกำหนดเป้าหมายองค์ประกอบในโครงสร้าง HTML เฉพาะที่เคยใช้งานยากเพียงใช้ CSS ธรรมดา.
ด้านล่างเรามี โครงสร้าง HTML5 เพื่อแสดงภาพสามภาพพร้อมคำอธิบายภาพ มันมีไว้เพื่อวัตถุประสงค์ในการสาธิตเท่านั้นมาร์กอัปของคุณไม่จำเป็นต้องเหมือนกับตัวอย่างต่อไปนี้ (เช่นคุณอาจมีเพียงภาพเดียวหรือแม้กระทั่งภาพอีกสามภาพ) แต่ประเด็นก็คือคุณจะได้รู้ว่าจะใช้ไวยากรณ์นี้อย่างไร โครงสร้าง HTML เฉพาะ.
-
JPG -
PNG -
GIF
รูปภาพแต่ละรูปด้านบนมีรูปแบบหรือส่วนขยายต่อไปนี้, JPG, PNG, และ GIF. พวกเขายังมีคำบรรยายภาพที่แสดงถึงการขยายภาพ คำบรรยายภาพนี้จะทำหน้าที่เป็นป้ายกำกับภาพ.
ดังนั้นนี่คือแผนเราจะให้สีพื้นหลังที่แตกต่างกันสำหรับคำอธิบายภาพสำหรับส่วนขยายภาพที่แตกต่างกัน ภาพ JPG จะได้รับ สีเขียว สีคำบรรยายภาพ PNG จะได้รับ สีน้ำเงิน, และท้ายสุด GIF จะได้รับ สีม่วง.
อันดับแรกเรามากำหนดตำแหน่งของแท็กรูปค่อนข้างเพราะเราจะนำไปใช้ แน่นอน ตำแหน่งสำหรับคำบรรยายใต้ภาพ.
รูป ตำแหน่ง: ญาติ;
เพิ่มการตกแต่งเล็กน้อยสำหรับภาพที่มีเส้นขอบและเงา.
img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5) กล่องเงา: 1px 1px 3px 0px rgba (0, 0, 0, .5)
จากนั้นเรากำหนดรูปแบบและตำแหน่งเริ่มต้นสำหรับคำบรรยายภาพ คำบรรยายภาพหรือป้ายกำกับจะมีขนาด 50px.
img + figcaption color: #fff; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ขวา: 0; ความกว้าง: 50px; ความสูง: 50px; line-height: 50px; จัดข้อความ: ศูนย์;
ตอนนี้ได้เวลาเพิ่มสีพื้นหลัง ในการทำเช่นนั้นเราสามารถรวมตัวเลือกคุณลักษณะเข้ากับตัวเลือกพี่น้องที่อยู่ติดกัน, +.
img [src $ = ". jpg"] + figcaption background-color: # a8b700;
ตัวอย่างด้านบนจะกำหนดเป้าหมายทุกภาพด้วยแอตทริบิวต์ต้นทางที่ลงท้ายด้วย .JPG, จากนั้นตัวเลือกที่อยู่ติดกันจะพบองค์ประกอบถัดจากมัน ในกรณีนี้ figcaption จะถูกเพิ่มด้วย # a8b700 สีพื้นหลัง.
และนี่คือรหัสทั้งหมดสำหรับรูปแบบส่วนที่เหลือ, .png และ. gif.
img [src $ = ". png"] + figcaption background-color: # 389abe; img [src $ = ". gif"] + figcaption background-color: # 8960a7;
ตอนนี้มาดูกันว่ามันจะเปิดใช้งานได้อย่างไรจากลิงก์สาธิตด้านล่างหรืออื่น ๆ ที่คุณสามารถดาวน์โหลดแหล่งข้อมูลเพื่อตรวจสอบแบบออฟไลน์.
- การสาธิต
- แหล่งดาวน์โหลด
แหล่งที่มาของภาพมีดังนี้: MacPro 1, MacPro 2 และ MacPro 3
ข้อสรุป
เราหวังว่าคุณจะสามารถมองเห็นด้านที่สง่างามของการจัดแต่งทรงผมโดยใช้ตัวเลือกพิเศษเช่นเดียวกับสิ่งที่เราพยายามแสดงให้เห็นข้างต้นโดยใช้ตัวเลือกแอททริบิวต์ ดังนั้นในครั้งต่อไปที่คุณใส่สไตล์ HTML ของคุณเราขอแนะนำให้คุณค้นคว้าว่ามีสไตล์ของคุณที่สามารถใช้งานได้โดยใช้ตัวเลือกพิเศษบางอย่างแทนที่จะทำลายมาร์กอัปที่มีโครงสร้างที่เหมาะสม ชั้นเรียน หรือ รหัส.
จริงๆแล้วมีตัวเลือกใหม่อีกสองประเภทซึ่งเราจะกล่าวถึงในโพสต์ถัดไปดังนั้นโปรดติดตาม.
