css - ใช้ universal '*' selector vs. html หรือ body selector?

11

การใช้สไตล์กับแท็ก body จะถูกนำไปใช้กับทั้งหน้าดังนั้น

body { font-family: Verdana }

จะถูกนำไปใช้กับทั้งหน้า สิ่งนี้สามารถทำได้ด้วย

* {font-family: Verdana}

ซึ่งจะนำไปใช้กับองค์ประกอบทั้งหมดและดังนั้นดูเหมือนว่าจะมีผลเช่นเดียวกัน

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

ผลข้างเคียงคือความเร็วอย่างแน่นอน (+1 Rob) ฉันสนใจเหตุผลที่แท้จริงที่สุดในการเลือกหนึ่งอย่างในแง่ของการใช้งาน

— Michael Durrant
แหล่งที่มา

ไซต์ข้ามที่เป็นไปได้ซ้ำซ้อนของ: stackoverflow.com/questions/7187569/…

— Ciro Santilli 法轮功病毒审查审查六四事件法轮功

6

ความแตกต่างการทำงานระหว่างตัวเลือก CSS สองตัวเลือกเหล่านี้ ...

ร่างกาย

ใช้คุณสมบัติสไตล์กับองค์ประกอบร่างกาย
องค์ประกอบภายในร่างกายอาจสืบทอดค่าคุณสมบัติ คุณสมบัติบางอย่างเริ่มต้นที่ 'สืบทอด'
การประกาศสไตล์ที่ตรงกับองค์ประกอบภายในร่างกายสามารถแทนที่สไตล์ที่สืบทอด

Universal Selector * (องค์ประกอบทั้งหมด)

ใช้คุณสมบัติสไตล์กับองค์ประกอบแต่ละรายการ
แทนที่คุณสมบัติสไตล์ที่สืบทอดและค่าเริ่มต้น 'ค่าเริ่มต้น' บล็อกการสืบทอด
ตัวเลือก css อื่น ๆ ที่เฉพาะเจาะจงมากขึ้นซึ่งตรงกับองค์ประกอบจะแทนที่คุณสมบัติของสไตล์ที่ใช้โดย *

ข้อเสนอแนะ

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

— joshp
แหล่งที่มา

10

ลองอะไรเช่นนี้

body { font-family: Verdana }
table { font-family: Arial }

ต่อต้าน

* { font-family: Verdana }
table { font-family: Arial }

และดูว่าสไตล์ใดที่นำไปใช้กับเซลล์ของตาราง

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

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

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

สไตล์ที่ไม่เรียงซ้อนส่วนใหญ่ยังมีค่าสืบทอด (เช่น. margin: inherit) ซึ่งหมายถึง "ใช้ค่าของแท็กพาเรนต์"

— สาธารณรัฐประชาธิปไตยประชาชนลาว
แหล่งที่มา

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

— Michael Durrant

@MichaelDurrant: ไม่มันใช้กับสแปนภายใน div อย่างเท่าเทียมกัน อย่างไรก็ตามควรสังเกตว่าสไตล์บางอย่างเช่นมาร์จิ้นและแพ็ดดิ้งไม่เรียงซ้อนกับองค์ประกอบลูก สำหรับสิ่งเหล่านั้นคุณควรใช้ * เพื่อนำไปใช้กับทุกสิ่ง แต่คุณไม่ค่อยต้องการทำเช่นนั้น

— pdr

3

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

มีปัญหาอื่นอีกเช่นกัน แต่อีกครั้งฉันจำไม่ได้หมดและไม่ได้ใช้ * เป็นเวลาหลายปี

— ปล้น
แหล่งที่มา

1

คำแนะนำทั่วไปสำหรับการออกแบบ CSS ที่ดีนั้นต้องมีความเฉพาะเจาะจงมากที่สุดเท่าที่จะทำได้ แต่ไม่มาก

ดังนั้นในตัวอย่างของคุณการใช้สไตล์กับองค์ประกอบของร่างกายจะมีความเฉพาะเจาะจงที่สุดเท่าที่จะเป็นไปได้และแน่นอนกว่าตัวเลือก '*'

— Dibbeke
แหล่งที่มา

1

เป็นคนอื่นได้กล่าวถึงbody { font-family: Verdana }จะเลือกแบบอักษรเวอร์ดนาไปเพียงองค์ประกอบเหล่านั้นซึ่งได้รับมรดกfont-styleทรัพย์สินจากผู้ปกครองของเช่นว่าทั้งหมดของพ่อแม่มากเกินไปสืบทอดคุณสมบัติ eventualy รูปแบบbodyองค์ประกอบและ* {font-family: Verdana}จะเลือกแบบอักษรเวอร์ดนาไปทุกองค์ประกอบ ฉันต้องการแสดงความแตกต่างด้วยตัวอย่าง:

ใช้ตัวเลือกร่างกาย:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

ใช้ selelctor สากล*:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

ใช้โค้ด css และ html ของตัวอย่างที่คุณจะจำได้ว่า<input>องค์ประกอบนั้นไม่ได้รับแบบอักษรเลยและสิ่งที่คุณพิมพ์ลงในแบบฟอร์มจะได้รับฟอนต์เริ่มต้นของสไตล์ชีทตัวแทนผู้ใช้ ในตัวอย่างที่สองตัวเลือกสากล*ตั้งค่าแบบอักษรอย่างชัดเจนสำหรับทุกองค์ประกอบรวมถึงinputองค์ประกอบ

— user106313
แหล่งที่มา