ใน CSS อะไรคือความแตกต่างระหว่าง“.” และ“ #” เมื่อประกาศชุดของสไตล์?

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

ใช่พวกเขาแตกต่างกัน ...

#เป็นตัวเลือก IDที่ใช้ในการกำหนดเป้าหมายเดียวองค์ประกอบเฉพาะด้วยหมายเลขที่ไม่ซ้ำกัน แต่ เป็นตัวเลือกคลาสที่ใช้ในการกำหนดเป้าหมายองค์ประกอบหลายรายการด้วยคลาสเฉพาะ วิธีนำอีกวิธีหนึ่ง:

• #foo {}จะจัดรูปแบบองค์ประกอบเดียวที่ประกาศพร้อมกับแอตทริบิวต์id="foo"
• .foo {}จะจัดรูปแบบองค์ประกอบทั้งหมดด้วยแอตทริบิวต์class="foo"(คุณสามารถมีหลายคลาสที่กำหนดให้กับองค์ประกอบได้เช่นกันโดยคั่นด้วยช่องว่างเช่นclass="foo bar")

การใช้งานทั่วไป

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

ชั้นเรียนถูกใช้ในลักษณะที่เกิดขึ้นซ้ำเช่นว่าคุณเป็นหัวหน้าส่วนหัวในรูปแบบพิเศษสำหรับข้อความแสดงข้อผิดพลาดคุณสามารถสร้างสไตล์h1.error {}ที่จะใช้กับ<h1 class="error">

ความจำเพาะ

อีกด้านที่ตัวเลือกแตกต่างกันอยู่ในความจำเพาะของพวกเขา - ตัวเลือกรหัสจะถือว่ามีความเฉพาะเจาะจงมากกว่าตัวเลือกคลาส ซึ่งหมายความว่าในกรณีที่ลักษณะขัดแย้งกันกับองค์ประกอบรายการที่กำหนดด้วยตัวเลือกที่เฉพาะเจาะจงมากขึ้นจะแทนที่ตัวเลือกที่เฉพาะเจาะจงน้อยลง ตัวอย่างเช่นกำหนด<div id="sidebar" class="box">กฎใด ๆ สำหรับ#sidebarด้วยการแทนที่กฎที่ขัดแย้งกันสำหรับ.box

เรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือก CSS

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

แก้ไข: ดูเหมือนว่า Selectutorial อาจเข้าสู่เว็บไซต์ขนาดใหญ่บนท้องฟ้าดังนั้นให้ลองลิงก์ลิงก์นี้แทน

#หมายความว่ามันตรงกับidขององค์ประกอบ .หมายถึงชื่อชั้น:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

โปรดทราบว่าในเอกสาร HTML แอตทริบิวต์ id ต้องไม่ซ้ำกันดังนั้นหากคุณมีองค์ประกอบมากกว่าหนึ่งรายการที่ต้องการสไตล์เฉพาะคุณควรใช้ชื่อคลาส

จุด ( .) หมายถึงชื่อคลาสขณะที่แฮช ( #) หมายถึงองค์ประกอบที่มีแอตทริบิวต์id ที่เฉพาะเจาะจง คลาสจะใช้กับองค์ประกอบใด ๆ ที่ตกแต่งด้วยคลาสนั้นในขณะที่ # style จะใช้กับองค์ประกอบที่มีรหัสเฉพาะนั้นเท่านั้น

ชื่อคลาส:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

องค์ประกอบชื่อ:

<style>
   #name { ... }
</style>

<div id="name"></div>

นอกจากนี้ยังเป็นที่น่าสังเกตว่าในน้ำตกเป็นID ( #) ตัวเลือกมากขึ้นที่เฉพาะเจาะจงกว่า AB ( .) เลือก ดังนั้นกฎในคำสั่ง id จะแทนที่กฎในคำสั่งคลาส

ตัวอย่างเช่นหากทั้งสองข้อความต่อไปนี้:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

ถูกนำไปใช้กับองค์ประกอบ HTML เดียวกัน:

<h1 id="specials" class="headline">Today's Specials</h1>

สี: สีฟ้ากฎจะแทนที่สี: สีแดงกฎ

ส่วนขยายอย่างรวดเร็วสองสามข้อที่กล่าวไว้แล้ว ...

idต้องไม่ซ้ำกัน แต่คุณสามารถใช้รหัสเดียวกันที่จะทำให้รูปแบบที่แตกต่างกันเฉพาะเจาะจงมากขึ้น

ตัวอย่างเช่นกำหนดให้แยก HTML นี้:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

คุณสามารถใช้สไตล์ที่แตกต่างกับสิ่งเหล่านี้:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

สิ่งที่มีประโยชน์อีกอย่างที่ควรทราบ: คุณสามารถมีหลายคลาสในองค์ประกอบโดยการเว้นวรรค ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

ซึ่งช่วยให้คุณมีสไตล์ร่วม.menuกับสไตล์เฉพาะที่ใช้.main.menuและ.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

.class กำหนดเป้าหมายองค์ประกอบต่อไปนี้:

<div class="class"></div>

#class กำหนดเป้าหมายองค์ประกอบต่อไปนี้:

<div id="class"></div>

โปรดทราบว่า id ต้องไม่ซ้ำกันตลอดทั้งเอกสารในขณะที่องค์ประกอบจำนวนเท่าใดก็อาจแบ่งคลาสได้

ชอบมากทุกคนกล่าวไว้แล้ว:

ระยะเวลา ( .) บ่งบอกถึงระดับและกัญชา ( #) บ่งชี้ว่าID

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

หน้าจะยังคงแสดงผลถ้าคุณมีหลายองค์ประกอบที่มี ID เดียวกัน แต่คุณจะพบกับปัญหาหาก / เมื่อคุณพยายามอัปเดตองค์ประกอบดังกล่าวแบบไดนามิกโดยการเรียกพวกเขาด้วย ID ของพวกเขาเนื่องจากพวกเขาจะไม่ซ้ำกัน

นอกจากนี้ยังมีประโยชน์ที่จะต้องทราบว่า ID คุณสมบัติจะแทนที่คุณสมบัติคลาส

# คือตัวเลือกรหัส มันตรงกับองค์ประกอบเท่านั้นที่มีรหัสที่ตรงกัน กฎสไตล์ถัดไปจะจับคู่องค์ประกอบที่มีแอตทริบิวต์ id ที่มีค่าเป็น "สีเขียว":

#green {color: green}

ดูhttp://www.w3schools.com/css/css_syntax.aspสำหรับข้อมูลเพิ่มเติม

นี่คือ aproach ของฉันอธิบายกฎ te .styleและ#styleเป็นส่วนหนึ่งของเมทริกซ์ หากไม่ได้อยู่ในลำดับที่ถูกต้องพวกเขาสามารถแทนที่ซึ่งกันและกันหรือทำให้เกิดความขัดแย้ง

นี่คือแถว

มดลูก

#style 0,0,1,0 id

.style 0,1,0,0 class

หากคุณต้องการแทนที่ทั้งสองนี้คุณสามารถใช้<style></style>แม่มดที่มีระดับเมทริกซ์หรือ1,0,0,0. คิวรี And @media จะแทนที่ทุกอย่างด้านบน ... ฉันไม่แน่ใจเกี่ยวกับเรื่องนี้ แต่ฉันคิดว่าตัวเลือก ID #สามารถใช้เพียงครั้งเดียวในหน้า