วิธีกำหนดเป้าหมายคลาส CSS ภายในคลาส CSS อื่น

'. จากนั้นจัดสรรแอตทริบิวต์ของคลาสเพื่อใช้งานต่อไป

ขั้นตอนที่ 2: สร้างคอนเทนเนอร์ 'div' ที่ซ้อนกัน

จากนั้น สร้างคอนเทนเนอร์ div ที่ซ้อนกันโดยทำตามขั้นตอนเดียวกันกับขั้นตอนที่ 1:

< แผนก ระดับ = 'เนื้อหาหลัก' >

< แผนก ระดับ = 'โต๊ะ' >

< แผนก ระดับ = 'แถว' >

< แผนก ระดับ = 'c-ซ้าย' > แต่งงาน < / แผนก >

< แผนก ระดับ = 'ค-ขวา' > แจ็ค < / แผนก >

< แผนก ระดับ = 'c-ซ้าย' > ทอม < / แผนก >

< แผนก ระดับ = 'ค-ขวา' > กรกฎาคม < / แผนก >

< / แผนก >

< / แผนก >

< / แผนก >

เอาต์พุต

---

---

ขั้นตอนที่ 3: ใช้สไตล์กับคอนเทนเนอร์ 'div' หลัก

เข้าสู่หลัก “ แผนก ” container โดยใช้ชื่อ class ว่า “ .เนื้อหาหลัก ”:

.เนื้อหาหลัก {

ความกว้าง : 40% ;

ขอบ : 0 อัตโนมัติ ;

สี : สีฟ้า ;

ชายแดน : 2px ประ สีฟ้า ;

จัดข้อความ : ศูนย์ ;

}

ที่นี่:

• “ ความกว้าง ” ระบุขนาดความกว้างขององค์ประกอบ
• “ ขอบ ” จัดสรรพื้นที่รอบองค์ประกอบนอกเส้นขอบที่กำหนด
• “ สี ” กำหนดสีสำหรับข้อความที่เพิ่มในองค์ประกอบ
• “ ชายแดน ” กำหนดโครงร่างหรือขอบเขตรอบองค์ประกอบใน HTML
• “ จัดข้อความ ” กำหนดการจัดตำแหน่งของข้อความขององค์ประกอบ

ขั้นตอนที่ 4: จัดรูปแบบคลาสอื่น

เข้าถึงคลาสหลักของ CSS และคลาสที่ซ้อนกันอื่นๆ โดยใช้ชื่อ จากนั้นตั้งค่าความกว้างของคอนเทนเนอร์โดยระบุค่าตามที่คุณเลือก:

.เนื้อหาหลัก .โต๊ะ {

ความกว้าง : 80% ;

}

นอกจากนี้ เข้าถึงคลาสอื่นโดยทำตามขั้นตอนเดียวกับด้านบนและใช้คุณสมบัติ CSS ที่กล่าวถึงในข้อมูลโค้ดด้านล่าง:

.เนื้อหาหลัก .c-ขวา {

แสดง : อินไลน์บล็อก ;

ขนาดตัวอักษร : 20px ;

}

ตามข้อมูลโค้ดด้านบน:

• “ แสดง คุณสมบัติ ” ใช้สำหรับตั้งค่าการแสดงผลขององค์ประกอบ
• “ ขนาดตัวอักษร ” ระบุขนาดของข้อความที่เพิ่มในคอนเทนเนอร์

ตอนนี้ เข้าถึงคลาสอื่นโดยใช้วิธีการเดียวกันและใช้คุณสมบัติ CSS ต่อไปนี้ตามที่กล่าวไว้ด้านล่าง:

.เนื้อหาหลัก .c-ซ้าย {

ความกว้าง : 140px ;

ขอบขวา : 6px ;

ขนาดตัวอักษร : 16px ;

}

ในการทำเช่นนั้น เราจะใช้ “ ความกว้าง ”, “ ขอบขวา ' และ ' ขนาดตัวอักษร ” เพื่อวัตถุประสงค์ในการจัดแต่งทรง

นอกจากนี้ เข้าถึงหลัก “ แผนก ” คอนเทนเนอร์พร้อมกับคอนเทนเนอร์ div ที่ซ้อนกันโดยใช้ชื่อคลาสและใช้คุณสมบัติ CSS ต่อไปนี้

.หลัก .c-ขวา {

ความกว้าง : อัตโนมัติ ;

ขนาดตัวอักษร : 15พิกเซล ;

สี : #ฟฟฟ ;

ขอบขวา : 20px ;

ตัวอักษรน้ำหนัก : ปกติ ;

}

เอาต์พุต

นั่นคือทั้งหมดที่เกี่ยวกับการกำหนดเป้าหมายคลาส CSS ภายในคลาส CSS อื่น

บทสรุป

หากต้องการกำหนดเป้าหมายคลาส CSS ภายในคลาส CSS อื่น ขั้นแรก ให้เข้าถึงหลัก “ แผนก ” ผ่านแอตทริบิวต์คลาสที่กำหนด จากนั้น เข้าถึงคอนเทนเนอร์ 'div' อื่นโดยทำตามขั้นตอนเดียวกัน นอกจากนี้ ผู้ใช้สามารถกำหนดเป้าหมายคลาส CSS ภายในคลาส CSS อื่นได้ โพสต์นี้ได้สาธิตวิธีการกำหนดเป้าหมายคลาส CSS ภายในคลาส CSS อื่น