CSS Selectors ประเภทเตอร์

ซึ่งแต่ละคุณต้องการตั้งค่าสีที่เฉพาะเจาะจง วิธีการทำมันได้หรือไม่ ตัวเลือก CSS มาตรฐานจะไม่เหมาะสำหรับแท็กพวกเขาแสดงให้เห็นพารามิเตอร์สำหรับบล็อกทั้งหมดในครั้งเดียว การแก้ปัญหาคือง่าย กำหนดให้สมาชิกชั้นเรียน ยกตัวอย่างเช่นตัวแรกที่ได้รับระดับ div = 'red' สอง - class = 'สีฟ้า' ที่สาม - class = 'สีเขียว' ตอนนี้พวกเขาสามารถเลือกใช้ตาราง CSS

ไวยากรณ์เป็นดังนี้: ระบุจุด ( "") ตามด้วยการเขียนชื่อของชั้น ในการจัดการหน่วยแรกใช้ก่อสร้าง .red ประการที่สอง - .blue และอื่น ๆ

ที่สำคัญ! ก็จะแนะนำให้ใช้ค่าที่มีความหมายของแอตทริบิวต์ชั้นเรียน และถือว่าเป็นรูปแบบที่ดีที่จะใช้ทับศัพท์ (เช่น krasiviy-blok) หรือการรวมกันแบบสุ่มของตัวอักษร / ตัวเลข (ojfh834871) ในรหัสนี้คุณจะผูกพันที่จะได้รับสับสนไม่ต้องพูดถึงความยากลำบากที่จะต้องเผชิญกับผู้ที่จะมีส่วนร่วมในโครงการหลังจากที่คุณ เลือกที่ดีที่สุด - จะใช้วิธีการใด ๆ เช่น BEM

ข้อดี - มีความยืดหยุ่นค่อนข้างสูง

ข้อเสีย - องค์ประกอบหลาย ๆ อาจจะเป็นหนึ่งและชั้นเดียวกันซึ่งหมายความว่าพวกเขาจะได้รับการแก้ไขไปพร้อม ๆ กัน ปัญหาจะแก้ไขโดยใช้วิธีการเช่นเดียวกับมรดกของ preprocessors ให้แน่ใจว่าจะได้รับในมือของคุณน้อยลงหรือบางเขื่อง preprocessor อื่น ๆ ก็ช่วยลดความซับซ้อนในการทำงาน

เลือก ID

เกี่ยวกับรุ่นนี้โคดความคิดเห็นและโปรแกรมเมอร์ไม่ชัดเจน CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. บางบทเรียน CSS ไม่แนะนำให้ใช้บัตรประจำตัวประชาชนเพราะในใบสมัครไม่ถูกต้องพวกเขาสามารถทำให้เกิดปัญหากับการรับมรดก อย่างไรก็ตามผู้เชี่ยวชาญหลายคนมีความกระตือรือร้นจัดให้พวกเขาตลอดทั้งรูปแบบ คุณตัดสินใจ # »), затем имя блока. ไวยากรณ์เป็นดังนี้เครื่องหมายปอนด์ ( "#") จากนั้นชื่อของบล็อก #red. ยกตัวอย่างเช่น #red

отличается от класса по нескольким параметрам. ID จะแตกต่างจากการเรียนในหลายรูปแบบ ID. ครั้งแรก, หน้าไม่สามารถเป็นสอง ID เหมือนกัน พวกเขาได้รับมอบหมายให้เป็นชื่อที่ไม่ซ้ำกัน ประการที่สองเช่นเลือกมีความสำคัญสูง red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. ซึ่งหมายความว่าหากคุณระบุระดับหน่วยสีแดงและระบุในตาราง CSS สีแดง สีพื้นหลัง และจากนั้นกำหนดให้มันรหัสเดียวกันสีฟ้าและระบุสีฟ้าเครื่องจะเปลี่ยนเป็นสีฟ้า

ข้อดี - คุณสามารถควบคุมองค์ประกอบเฉพาะไม่สนใจรูปแบบของแท็กและการเรียน

ID и class. ข้อเสีย - ง่ายที่จะได้รับหายไปในจำนวนมากของ ID และระดับ

ที่สำคัญ! ID вам, в общем-то, не нужны. หากคุณกำลังใช้วิธีการ BEM (หรือ analogues ของมัน), ID เพื่อคุณโดยทั่วไปไม่จำเป็นต้องใช้ เทคนิคนี้จะเกี่ยวข้องกับการใช้รูปแบบการเรียนที่ไม่ซ้ำกันที่สะดวกสบายมากขึ้น

เลือกสากล

{}. ไวยากรณ์: Starlets สัญญาณ ( "*") และวงเล็บคือ {*} ...

ใช้เพื่อกำหนดคุณลักษณะบางอย่างที่ครั้งหนึ่งเคยเป็นองค์ประกอบทั้งหมดของหน้า เมื่อเป็นเช่นนี้อาจจะมีประโยชน์หรือไม่ box-sizing: border-box. ตัวอย่างเช่นถ้าคุณต้องการที่จะตั้งค่าหน้าคุณสมบัติกล่องปรับขนาด: ชายแดนกล่อง div *{}. ไม่เพียง แต่สามารถนำมาใช้ในการจัดการองค์ประกอบทั้งหมดของเอกสาร แต่ยังให้การควบคุมเด็กทุกคนของบล็อกที่ระบุตัวอย่างเช่น div * {}

ข้อดี - คุณสามารถควบคุมจำนวนมากของรายการในเวลา

จุดด้อย - ตัวเลือกที่มีความยืดหยุ่นไม่เพียงพอ นอกจากนี้การใช้ตัวเลือกนี้ในบางกรณีชะลอการทำงานของหน้า

ตามคุณสมบัติ

ทำให้เป็นไปได้ในการควบคุมองค์ประกอบที่มีคุณลักษณะเฉพาะ ตัวอย่างเช่นคุณมีจำนวนของแท็กการป้อนข้อมูลที่มีประเภทแอตทริบิวต์ที่แตกต่างกัน หนึ่งของพวกเขา - ข้อความที่สอง - ใช้รหัสผ่านที่สาม - จำนวน แน่นอนคุณสามารถตั้งค่าแต่ละชั้นเรียนหรือบัตรประจำตัว แต่มันมักจะไม่สะดวก CSS เตอร์ของคุณลักษณะที่ทำให้มันเป็นไปได้ที่จะระบุค่าสำหรับแท็กบางอย่างที่มีความแม่นยำสูงสุด ตัวอย่างเช่นนี้

การป้อนข้อมูล [ 'ข้อความ' type =] {}

ตัวเลือกนี้จะเลือกคุณลักษณะทั้งหมดที่มีประเภทของข้อความการป้อนข้อมูล

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

ลองนึกภาพว่าหน้าของคุณมีการป้อนข้อมูลด้วยตัวยึดแอตทริบิวต์ = "ป้อนชื่อ" และยึดการป้อนข้อมูล = "ป้อนรหัสผ่าน" พวกเขายังสามารถเลือกใช้ตัวเลือก! การทำเช่นนี้ใช้โครงสร้างต่อไปนี้:

การป้อนข้อมูล [placeholder = "ใส่ชื่อ"] {} หรืออินพุต [placeholder = "ใส่รหัสผ่าน"]

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

[ชื่อ * = "Kaspiysk"]

CSS จะเลือกรายการทั้งหมดในชื่อของที่มีสัญลักษณ์ของ "แคสเปี้ย" คือ. อีและ "แคสเปี้ย" และ "แคสเปี้ย"

นอกจากนี้คุณยังสามารถเลือกแท็กที่ขึ้นต้นด้วยตัวอักษรคุณลักษณะบางอย่าง:

[ชื่อ ^ = "ตัวละครที่คุณต้องการ"] {}

หรือยุติการให้พวกเขา:

[ชื่อ $ = "ตัวอักษรที่ถูกต้อง"] {}

ข้อดี - ความยืดหยุ่นสูงสุด คุณสามารถเลือกองค์ประกอบของหน้าเว็บที่มีอยู่โดยไม่ต้องยุ่งกับการเรียน

ข้อเสีย - ใช้ค่อนข้างไม่ค่อยได้เฉพาะในกรณีที่เฉพาะเจาะจง ออกแบบเว็บหลายคนชอบที่จะวิธีการตั้งแต่ระดับจุดจะง่ายกว่าที่จะจัดให้มีจำนวนมาก วงเล็บ และสัญญาณ "เท่ากับ" นอกจากนี้ตัวเลือกเหล่านี้ไม่ทำงานใน Internet Explorer เวอร์ชั่น 7 และด้านล่าง แต่ที่ตอนนี้กำลังต้องการเก่า Internet Explorer?

เตอร์หลอกชั้น

หมายถึงองค์ประกอบหลอกสถานะ ยกตัวอย่างเช่น ,: เลื่อน - สิ่งที่เกิดขึ้นเพื่อเป็นส่วนหนึ่งของหน้าเมื่อคุณเลื่อน ,: เยี่ยมชม - การเชื่อมโยงเข้าเยี่ยมชม นอกจากนี้ยังรวมถึงองค์ประกอบเช่น: ครั้งแรกที่เด็กและ: สุดท้ายเด็ก

ประเภทของตัวเลือกนี้มีการใช้งานในรูปแบบที่ทันสมัยเพราะขอบคุณที่คุณสามารถทำหน้า "ชีวิต" โดยไม่ต้องใช้ของ JavaScript ตัวอย่างเช่นคุณต้องการให้แน่ใจว่าเมื่อคุณเลื่อนเมาส์ไปที่ปุ่มที่มีระดับของ BTN สีเปลี่ยน การทำเช่นนี้เราจะใช้โครงสร้างต่อไปนี้:

.btn: โฉบ {

สีพื้นหลัง: สีแดง;

}

ความงามสามารถระบุได้ในคุณสมบัติพื้นฐานของปุ่มการเปลี่ยนแปลงสถานที่ให้บริการเช่น 0.5s - ในกรณีนี้ปุ่มจะไม่อายทันทีและภายในครึ่งวินาที

คุณธรรม - มีการใช้กันอย่างแพร่หลายสำหรับการ "ฟื้นฟู" ของหน้าเว็บ ง่ายต่อการใช้

ข้อเสีย - พวกเขาไม่ได้ นี้เป็นเครื่องมือที่มีประโยชน์จริงๆ อย่างไรก็ตามนักออกแบบเว็บที่ไม่มีประสบการณ์จะได้รับหายไปในความอุดมสมบูรณ์ของหลอกชั้นเรียน ปัญหาจะแก้ไขศึกษาและการปฏิบัติ

หลอกเตอร์

"ปลอม" - เหล่านี้เป็นส่วนหนึ่งของหน้าเว็บที่ไม่ได้อยู่ใน HTML แต่พวกเขายังคงสามารถจัดการได้ คุณไม่เข้าใจ? มันง่ายกว่าที่ดูเหมือนว่า ตัวอย่างเช่นคุณต้องการที่จะทำให้ตัวอักษรตัวแรกในสตริงขนาดใหญ่และสีแดงออกจากข้อความที่มีขนาดเล็กและอื่น ๆ สีดำ แน่นอนมันสามารถสรุปได้ตัวอักษรในช่วงที่มีระดับบางอย่างนั้น แต่มันยาวและน่าเบื่อ มันเป็นเรื่องง่ายมากที่จะเลือกทั้งย่อหน้าและใช้หลอก :: แรกตัวอักษร มันทำให้โอกาสที่จะควบคุมลักษณะของตัวอักษรตัวแรก

ค่อนข้างมีจำนวนมากของหลอกองค์ประกอบ รายชื่อไว้ในบทความเดียวไม่น่าจะประสบความสำเร็จ คุณสามารถค้นหาข้อมูลที่เกี่ยวข้องในเครื่องมือค้นหาที่คุณชื่นชอบ

ข้อดี - ให้ความยืดหยุ่นในการปรับแต่งรูปลักษณ์ของหน้า

ข้อเสีย - ใหม่ให้กับพวกเขามักจะสับสน การเลือกหลายประเภทของงานนี้เฉพาะในเบราว์เซอร์บางอย่าง

เพื่อสรุป

Selector - เครื่องมือที่มีประสิทธิภาพในการควบคุมการไหลของเอกสาร ขอขอบคุณที่เขาคุณสามารถเลือกทุกองค์ประกอบเดียวของหน้า (มีแม้เพียงบางส่วนเท่านั้น) ให้แน่ใจว่าได้เรียนรู้ตัวเลือกทั้งหมดที่มีอยู่หรือแม้กระทั่งพวกเขาเขียนลง นี้เป็นสิ่งสำคัญโดยเฉพาะอย่างยิ่งถ้าคุณสร้างหน้าเว็บที่ซับซ้อนที่มีการออกแบบที่ทันสมัยและจำนวนมากขององค์ประกอบแบบโต้ตอบ