Tên lớp trong trường hợp chọn CSS có nhạy không?

229

Tôi tiếp tục đọc ở mọi nơi rằng CSS không phân biệt chữ hoa chữ thường, nhưng tôi có bộ chọn này

.holiday-type.Selfcatering

mà khi tôi sử dụng trong HTML của mình, như thế này, sẽ được chọn

<div class="holiday-type Selfcatering">

Nếu tôi thay đổi bộ chọn ở trên như thế này

.holiday-type.SelfCatering

Sau đó, phong cách không được chọn.

Ai đó đang nói dối.

html css css-selectors

— Sachin Kainth
nguồn

55

Đạo đức của câu chuyện này chỉ là trường hợp nhạy cảm mọi lúc - đừng nảy qua lại. Bạn sẽ thấy mã của bạn dễ đọc hơn và bất cứ ai nhặt thức ăn thừa của bạn đều đánh giá cao nó.

— kingdango

3

Im điều trị như trường hợp nhạy cảm kể từ bây giờ. class = "Giá" không hoạt động, class = "price" hoạt động, do đó, theo nghĩa thực tế mỗi ngày, chúng là trường hợp nhạy cảm.

— Tino Mclaren

4

Xem một "Ma trận trường hợp" hoàn chỉnh , về độ nhạy trường hợp trong các giá trị của các thuộc tính và bộ chọn .

— Peter Krauss

5

Điều thú vị là, tôi đã liên tục sử dụng camelCase trong tên lớp của mình, nhưng CSS đã không chọn nó trên webview iOS. Vì vậy, đạo đức là, luôn luôn sử dụng dấu gạch ngang cho các lớp.

— EpicPandaForce 13/03/2015

242

Các bộ chọn CSS thường không phân biệt chữ hoa chữ thường; điều này bao gồm các bộ chọn lớp và ID.

Nhưng tên lớp HTML phân biệt chữ hoa chữ thường (xem định nghĩa thuộc tính) và điều đó gây ra sự không khớp trong ví dụ thứ hai của bạn. Điều này đã không thay đổi trong HTML5 . ¹

Điều này là do độ nhạy trường hợp của các bộ chọn phụ thuộc vào ngôn ngữ tài liệu nói gì :

Tất cả cú pháp của Bộ chọn không phân biệt chữ hoa chữ thường trong phạm vi ASCII (nghĩa là [az] và [AZ] là tương đương), ngoại trừ các phần không thuộc quyền kiểm soát của Bộ chọn. Độ nhạy trường hợp của tên thành phần ngôn ngữ tài liệu, tên thuộc tính và giá trị thuộc tính trong bộ chọn phụ thuộc vào ngôn ngữ tài liệu.

Vì vậy, được cung cấp một phần tử HTML có một Selfcateringlớp nhưng không có SelfCateringlớp, các bộ chọn .Selfcateringvà [class~="Selfcatering"]sẽ khớp với nó, trong khi các bộ chọn .SelfCateringvà [class~="SelfCatering"]sẽ không. ²

Nếu loại tài liệu định nghĩa tên lớp là không phân biệt chữ hoa chữ thường, thì bạn sẽ có một kết quả khớp bất kể.

¹ _{Trong chế độ quirks cho tất cả các trình duyệt, các lớp và ID không phân biệt chữ hoa chữ thường. Điều này có nghĩa là bộ chọn trường hợp không khớp sẽ luôn khớp. Hành vi này phù hợp trên tất cả các trình duyệt vì lý do di sản, và được đề cập trong bài viết này .}

² _{Đối với giá trị của nó, Bộ chọn cấp 4 chứa một cú pháp được đề xuất để buộc tìm kiếm không phân biệt chữ hoa chữ thường trên các giá trị thuộc tính bằng cách sử dụng [class~="Selfcatering" i]hoặc [class~="SelfCatering" i]. Cả hai bộ chọn sẽ khớp một phần tử HTML hoặc XHTML với một Selfcateringlớp hoặc một SelfCateringlớp (hoặc, tất nhiên, cả hai). Tuy nhiên, không có cú pháp nào cho các bộ chọn lớp hoặc ID (chưa?), Có lẽ vì chúng mang các ngữ nghĩa khác nhau từ các bộ chọn thuộc tính thông thường ( không có ngữ nghĩa liên quan đến chúng) hoặc do khó đưa ra cú pháp có thể sử dụng được.}

— BoltClock
nguồn

7

Whoa điều này hoàn toàn ngược lại với những gì bài kiểm tra jsfiddle của tôi chỉ ra. Có sự divvà DIVselectors cả phù hợp với <div>, nhưng id và selectors tên lớp phải được chính xác trường hợp nhạy cảm. Trừ khi tôi hiểu nhầm câu trả lời của bạn?

— Roddy of the Frozen Peas

21

@Roddy of the Frozen Peas: Đó là vì các lớp và ID HTML phân biệt chữ hoa chữ thường, trong khi tên thẻ thì không. Tôi đặc biệt để lại tên thẻ ra khỏi câu trả lời của tôi vì lý do này. (Nhân tiện, tên thẻ chỉ phân biệt chữ hoa chữ thường trong XHTML thật, bất kể loại tài liệu - nếu jsFiddle có thể cho phép bạn buộc trang được phục vụ dưới dạng ứng dụng / xhtml + xml, DIVbộ chọn sẽ không còn phù hợp.)

— BoltClock

2

@BoltClock "Ngôn ngữ tài liệu" nghĩa là gì ở đây?

— Geek

4

@Geek: "ngôn ngữ tài liệu" đề cập đến ngôn ngữ của bất cứ điều gì bạn đang áp dụng CSS, phổ biến nhất là HTML, XHTML hoặc XML. Bạn có thể tìm thấy định nghĩa ở đây .

— BoltClock

2

Có ai khác hoàn toàn bối rối? Nếu selectors là trường hợp trong nhạy cảm, sau đó theo định nghĩa, không có lớp CSS làm ( liên quan đến selectors chọn chúng ) trường hợp trong nhạy cảm, quá? Nói cách khác, liên quan đến nhau (các lớp và bộ chọn CSS) - nếu một trường hợp không nhạy cảm, thì điều đó có nghĩa là cả hai đều như vậy. Nói cách khác - nếu bộ chọn của tôi .selfcateringvà bộ chọn không phân biệt chữ hoa chữ thường, tại sao nó phải quan tâm xem lớp đó là Selfcateringhay SelfCateringhay sElfcAtErInG? Tôi đang thiếu gì?

— jbyrd

62

Có lẽ không phải là một lời nói dối, nhưng cần làm rõ.

Bản thân css thực tế không phân biệt chữ hoa chữ thường.

Ví dụ

wiDth:100%;

nhưng tên, chúng phải phân biệt chữ hoa chữ thường để là định danh duy nhất.

Mong rằng sẽ giúp.

— Đá Jack
nguồn

20

Trong chế độ quirks, tất cả các trình duyệt hoạt động giống như phân biệt chữ hoa chữ thường khi sử dụng tên lớp và tên CSS.

Trong chế độ quirks, lớp CSS và tên id không phân biệt chữ hoa chữ thường. Trong chế độ tiêu chuẩn, chúng là trường hợp nhạy cảm. (Điều này cũng áp dụng cho getElementsByClassName.) Đọc thêm.

Đôi khi khi bạn có các loại tài liệu sai như dưới đây, trình duyệt của bạn sẽ ở chế độ quirks.

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

bạn nên sử dụng doctype tiêu chuẩn

HTML 5

<!DOCTYPE html>

HTML 4.01 Nghiêm

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

HTML 4.01 Chuyển tiếp

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

Bộ khung HTML 4.01

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

XHTML 1.0 Nghiêm

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

XHTML 1.0 Chuyển tiếp

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

Khung hình 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">

nếu lớp CSS hoặc tên id của bạn xử lý trường hợp không nhạy cảm, vui lòng kiểm tra loại tài liệu của bạn.

— Mohamad Shirusizadeh
nguồn

3

CSS không phân biệt chữ hoa chữ thường.

Nhưng trong HTML5, lớp và ID có phân biệt chữ hoa chữ thường

Vì vậy, các thuộc tính CSS, giá trị, tên lớp giả, tên phần tử giả, tên phần tử không phân biệt chữ hoa chữ thường

Và lớp CSS, id, url, họ phông chữ phân biệt chữ hoa chữ thường.

lưu ý: trong chế độ quirks html, css không phân biệt chữ hoa chữ thường ngay cả đối với ID và lớp (nếu bạn xóa khai báo doctype)

Ví dụ về 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>

— Trao đổi
nguồn