ชื่อคลาสในตัวเลือก CSS เป็นตัวพิมพ์เล็กหรือใหญ่?

229

ฉันอ่านต่อไปทุกที่ว่า CSS ไม่ได้ตรงตามตัวพิมพ์ใหญ่ - เล็ก แต่ฉันมีตัวเลือกนี้

.holiday-type.Selfcatering

สิ่งที่เมื่อฉันใช้ใน HTML ของฉันแบบนี้จะถูกหยิบขึ้นมา

<div class="holiday-type Selfcatering">

หากฉันเปลี่ยนตัวเลือกด้านบนเช่นนี้

.holiday-type.SelfCatering

จากนั้นสไตล์จะไม่ถูกหยิบขึ้นมา

มีคนบอกเรื่องโกหก

html css css-selectors

— Sachin Kainth
แหล่งที่มา

55

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

— kingdango

3

ฉันปฏิบัติต่อตัวพิมพ์เล็กและตัวพิมพ์ใหญ่นับจากนี้เป็นต้นไป class = "Price" ไม่ทำงาน class = "price" ไม่ทำงานดังนั้นในทางปฏิบัติทุกวันจะต้องคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

— Tino Mclaren

4

ดูสมบูรณ์ "Case เมทริกซ์" , เกี่ยวกับกรณีความไวในค่าของคุณสมบัติและตัวเลือก

— Peter Krauss

5

สิ่งที่ตลกฉันใช้ camelCase ในชื่อคลาสของฉันอย่างสม่ำเสมอ แต่ CSS ไม่ได้หยิบมาไว้ใน webview iOS ดังนั้นคุณธรรมคือการใช้เครื่องหมายขีดคั่นสำหรับคลาสเสมอ

— EpicPandaForce

242

ตัวเลือก CSS โดยทั่วไปจะคำนึงถึงขนาดตัวพิมพ์ ซึ่งรวมถึงตัวเลือกคลาสและรหัส

แต่ชื่อคลาส HTML จะต้องตรงตามตัวพิมพ์ใหญ่และตัวเล็ก (ดูคำจำกัดความของแอตทริบิวต์) และนั่นทำให้เกิดความไม่ตรงกันในตัวอย่างที่สองของคุณ นี้ยังไม่ได้มีการเปลี่ยนแปลงในHTML5 ¹

นี่เป็นเพราะความไวของตัวเลือกขึ้นอยู่กับสิ่งที่ภาษาเอกสารพูดว่า :

ไวยากรณ์ของ Selectors ทั้งหมดเป็นแบบตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ภายในช่วง ASCII (เช่น [az] และ [AZ] เทียบเท่ากัน) ยกเว้นชิ้นส่วนที่ไม่อยู่ภายใต้การควบคุมของ Selectors การพิจารณาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ของชื่อองค์ประกอบภาษาเอกสารชื่อแอตทริบิวต์และค่าแอตทริบิวต์ในตัวเลือกขึ้นอยู่กับภาษาของเอกสาร

ดังนั้นให้องค์ประกอบ HTML ที่มีSelfcateringคลาส แต่ไม่มีSelfCateringคลาสตัวเลือก.Selfcateringและ[class~="Selfcatering"]จะจับคู่มันในขณะที่ตัวเลือก .SelfCateringและ[class~="SelfCatering"]จะไม่ ²

หากชนิดเอกสารกำหนดชื่อคลาสเป็นแบบไม่สนใจตัวพิมพ์

¹ _{ในโหมดนิสัยใจคอสำหรับเบราว์เซอร์ทุกคลาสและรหัสจะไม่ตรงตามตัวพิมพ์ใหญ่ - เล็ก ซึ่งหมายความว่าตัวเลือกที่ตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่จะจับคู่เสมอ นี่คือพฤติกรรมที่สอดคล้องกันในเบราว์เซอร์ทั้งหมดสำหรับเหตุผลเดิมและมีการกล่าวถึงในบทความนี้}

² _{สำหรับสิ่งที่คุ้มค่า, Selectors ระดับ 4มีไวยากรณ์ที่นำเสนอสำหรับการบังคับให้การค้นหากรณีตายในค่าแอตทริบิวต์ใช้หรือ[class~="Selfcatering" i] [class~="SelfCatering" i]ตัวเลือกทั้งสองจะจับคู่องค์ประกอบ HTML หรือ XHTML กับSelfcateringคลาสหรือSelfCateringคลาส (หรือแน่นอนทั้งคู่) อย่างไรก็ตามไม่มีไวยากรณ์ดังกล่าวสำหรับตัวเลือกคลาสหรือรหัส (ยัง?) น่าจะเป็นเพราะพวกเขามีความหมายที่แตกต่างจากตัวเลือกคุณลักษณะปกติ (ซึ่งไม่มีความหมายที่เกี่ยวข้องกับพวกเขา) หรือเพราะมันยากที่จะเกิดขึ้นกับไวยากรณ์ที่ใช้งานได้}

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

7

นี่คือสิ่งที่ตรงกันข้ามกับสิ่งที่การทดสอบ jsfiddleของฉันระบุ ที่นั่นdivและDIVตัวเลือกทั้งสองจับคู่<div>แต่ id และตัวเลือกชื่อชั้นจะต้องตรงตามตัวพิมพ์ใหญ่ - เล็ก ถ้าฉันไม่เข้าใจคำตอบของคุณ?

— Roddy of the Peas แช่แข็ง

21

@ Reddy of the Peas แช่แข็ง: นั่นเป็นเพราะคลาส HTML และ ID นั้นคำนึงถึงตัวพิมพ์เล็กและตัวใหญ่ ฉันทิ้งชื่อแท็กออกจากคำตอบของฉันด้วยเหตุนี้โดยเฉพาะ (โดยวิธีการชื่อแท็กจะเป็นตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ใน XHTML จริงโดยไม่คำนึงถึงประเภทเอกสาร - หาก jsFiddle สามารถให้คุณบังคับให้หน้าเว็บแสดงเป็น application / xhtml + xml DIVตัวเลือกจะไม่ตรงกันอีกต่อไป)

— BoltClock

2

@BoltClock "ภาษาเอกสาร" หมายความว่าอะไรที่นี่?

— Geek

4

@Geek: "document language" หมายถึงภาษาของสิ่งที่คุณใช้ CSS กับ HTML, XHTML หรือ XML คุณสามารถค้นหาความหมายที่นี่

— BoltClock

2

มีใครสับสนอย่างทั่วถึงอีกหรือไม่ ถ้าเตอร์เป็นกรณีที่ในความละเอียดอ่อนแล้วโดยความหมายไม่ว่าคลาส CSS แต่งหน้า ( ในความสัมพันธ์กับเตอร์เลือกพวกเขา ) กรณีในความละเอียดอ่อนเกินไป? ในคำอื่น ๆ ที่เกี่ยวข้องกับแต่ละอื่น ๆ (CSS คลาสและตัวเลือก) - ถ้าหนึ่งไม่ตรงตามตัวพิมพ์ใหญ่ - เล็กนั่นหมายความว่าพวกเขาทั้งสองเป็น ในคำอื่น ๆ - ถ้าตัวเลือกของฉันคือ.selfcateringและตัวเลือกเป็นกรณีที่ไม่สำคัญทำไมมันควรจะสนใจว่าชั้นเรียนเป็นSelfcateringหรือSelfCateringหรือsElfcAtErInG? ฉันพลาดอะไรไป

— jbyrd

62

อาจไม่ใช่เรื่องโกหก แต่ต้องการความกระจ่าง

css จริงนั้นไม่คำนึงถึงขนาดตัวพิมพ์

ตัวอย่างเช่น

wiDth:100%;

แต่ชื่อจะต้องตรงตามตัวพิมพ์เล็กและใหญ่เป็นตัวระบุที่ไม่ซ้ำกัน

หวังว่าจะช่วย

— แจ็คสโตน
แหล่งที่มา

20

ในโหมด quirks เบราว์เซอร์ทั้งหมดจะทำงานเหมือนตัวพิมพ์เล็กและตัวพิมพ์ใหญ่เมื่อใช้คลาส CSS และชื่อ id

ในคลาส CSS โหมด quirks และชื่อ id ไม่คำนึงถึงขนาดตัวพิมพ์ ในโหมดมาตรฐานจะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ (สิ่งนี้ใช้ได้กับ getElementsByClassName ด้วย) อ่านเพิ่มเติม

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

<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>

คุณควรใช้ doctype มาตรฐาน

HTML 5

<!DOCTYPE html>

HTML 4.01 ที่เข้มงวด

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 ในช่วงเปลี่ยนผ่าน

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ชุดเฟรม HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 ที่เข้มงวด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 การนำส่ง

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 เฟรม

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

หากคลาส CSS หรือชื่อ id ของคุณทำงานไม่ตรงตามตัวพิมพ์ใหญ่และตัวพิมพ์โปรดตรวจสอบประเภทเอกสารของคุณ

— Mohamad Shiralizadeh
แหล่งที่มา

3

CSS ไม่คำนึงถึงขนาดตัวพิมพ์

แต่ใน HTML5 คลาสและ ID จะคำนึงถึงขนาดตัวพิมพ์

ดังนั้นคุณสมบัติ CSS, ค่า, ชื่อคลาสหลอก, ชื่อองค์ประกอบหลอก, ชื่อองค์ประกอบไม่คำนึงถึงขนาดตัวพิมพ์

และคลาส CSS, id, urls, ตระกูลฟอนต์นั้นจะต้องตรงตามตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก

หมายเหตุ: ในโหมด html quirks css ไม่คำนึงถึงขนาดตัวพิมพ์แม้กับ ID และคลาส (ถ้าคุณลบการประกาศ doctype)

ตัวอย่างบน CodePen: https://codepen.io/swapnilPakolu/pen/MWgvQyB?&editable=true#anon-signup

<!DOCTYPE html>
<html>
<head>
<title>CSS case sensitive ?</title>
<style>

P#id
{color:RED;}

p#ID
{font-size:30PX;}

#iD
{BORDER:4px solid blue;}

.class
{text-decoration:underLine;}

.CLASS
{background-color:graY;}

.Class
{font-weight:900;}

#ID::afTeR
{conTent:"colored text";
disPlay:bLock;
color:#fAdAcA;}

.class:hoVeR
{background-color:lightblue;}

</style>
</head>
<body>
<p id="id" class="class">red and underline</p>
<p id="ID" class="CLASS">30px font size and gray background</p>
<p id="iD" class="Class">bold and blue border</p>
</body>
</html>

— แลกเปลี่ยน
แหล่งที่มา