CSS 선택기의 클래스 이름은 대소 문자를 구분합니까?

229

CSS는 대소 문자를 구분하지 않지만 어디서나이 선택기를 가지고 있습니다.

.holiday-type.Selfcatering

이와 같이 HTML에서 사용할 때 선택됩니다.

<div class="holiday-type Selfcatering">

위의 선택기를 이렇게 변경하면

.holiday-type.SelfCatering

그런 다음 스타일이 선택되지 않습니다.

누군가 거짓말을하고 있습니다.

html css css-selectors

— 사친 카 인스
소스

55

이 이야기의 도덕은 항상 대소 문자를 구분합니다. 윌리 닐리 앞뒤로 튀지 마십시오. 코드를 쉽게 읽을 수 있으며 남은 음식을 집어 든 사람은 누구나 감사하게 생각할 것입니다.

— kingdango

3

지금부터 대소 문자를 구분합니다. class = "Price"가 작동하지 않고 class = "price"가 작동하므로 실제적으로 매일 대소 문자를 구분합니다.

— Tino Mclaren

4

참조 완전한 "케이스 매트릭스" , 에서 대소 문자 구분에 대한 속성 값 및 선택기 .

— 피터 크라우스

5

재미있는 점은 클래스 이름에 camelCase를 일관되게 사용하고 있었지만 CSS는 iOS 웹보기에서 CSS를 찾지 못했습니다. 따라서 도덕은 항상 수업에 사용됩니다.

— EpicPandaForce

242

CSS 선택기는 일반적으로 대소 문자를 구분하지 않습니다. 여기에는 클래스 및 ID 선택기가 포함됩니다.

그러나 HTML 클래스 이름 은 대소 문자를 구분 하므로 (속성 정의 참조) 두 번째 예에서 불일치가 발생합니다. HTML5 에서는 변경되지 않았습니다 . ¹

선택기의 대소 문자 구분은 문서 언어의 내용에 따라 달라 지기 때문입니다 .

Selector가 제어하지 않는 부분을 제외하고 모든 Selectors 구문은 ASCII 범위 내에서 대소 문자를 구분하지 않습니다 (예 : [az] 및 [AZ]는 동일 함). 선택기의 문서 언어 요소 이름, 속성 이름 및 속성 값의 대소 문자 구분은 문서 언어에 따라 다릅니다.

그래서하는과 HTML 요소를 주어진 Selfcatering클래스 만하지 않고 SelfCatering, 클래스 선택기를 .Selfcatering하고 [class~="Selfcatering"]그것을 일치, 셀렉터 동안 .SelfCatering과 [class~="SelfCatering"]하지 않을 것입니다. ²

문서 유형이 클래스 이름을 대소 문자를 구분하지 않는 것으로 정의한 경우, 관계없이 일치합니다.

¹ _{모든 브라우저의 쿼크 모드에서 클래스와 ID는 대소 문자를 구분하지 않습니다. 이는 대소 문자가 일치하지 않는 선택기가 항상 일치 함을 의미합니다. 이 동작은 레거시 이유로 모든 브라우저에서 일관되며이 기사 에서 언급됩니다 .}

^(2)는 _{무엇의 가치를 들어, 선택기 레벨 4는 사용하여 속성 값의 대소 문자를 구분 검색 강요에 대한 제안 구문을 포함 [class~="Selfcatering" i]또는 [class~="SelfCatering" i]. 두 선택기는 모두 HTML 또는 XHTML 요소를 Selfcatering클래스 또는 SelfCatering클래스 (또는 둘 다) 와 일치 시킵니다. 그러나 클래스 또는 ID 선택기 (아직?)에 대한 이러한 구문은 없습니다. 아마도 일반 속성 선택기 (다른 의미가 없는 )와 다른 의미를 갖 거나 사용 가능한 구문을 만들기가 어렵 기 때문일 것입니다.}

— BoltClock
소스

7

우와 이것은 내 jsfiddle 테스트가 나타내는 것과 정확히 반대입니다 . 거기 div와 DIV셀렉터 모두 일치 <div>하지만, ID와 클래스 이름 선택기 정확하게 대소 문자를 구분해야했다. 내가 당신의 대답을 오해하지 않는 한?

— 냉동 완두콩의 Roddy

21

얼어 붙은 완두콩 @Roddy : HTML 클래스와 ID는 대소 문자를 구분하지만 태그 이름은 대소 문자를 구분하지 않기 때문입니다. 이러한 이유로 태그 이름을 답변에서 제외했습니다. (따라서 태그 이름은 doctype에 관계없이 실제 XHTML에서만 대소 문자를 구분합니다. jsFiddle을 사용하여 페이지를 application / xhtml + xml로 제공하도록하면 DIV선택기가 더 이상 일치하지 않습니다.)

— BoltClock

2

@BoltClock "문서 언어"는 무엇을 의미합니까?

— Geek

4

@Geek : "문서 언어"는 가장 일반적으로 HTML, XHTML 또는 XML에 CSS를 적용하는 언어를 나타냅니다. 여기서 정의를 찾을 수 있습니다 .

— BoltClock

2

다른 사람이 완전히 혼란 스럽습니까? 선택자가 대소 문자 를 구분하면 정의에 따라 CSS 클래스 ( 선택자를 선택하는 것과 관련하여 )도 대소 문자 를 구분하지 않습니까? 즉, 서로 관련하여 (CSS 클래스 및 선택기)-하나가 대소 문자를 구분하지 않으면 둘 다임을 의미합니다. 다른 말로하면-내 선택자가 .selfcatering선택자이며 대소 문자를 구분하지 않는 경우 클래스가 클래스 Selfcatering인지 SelfCatering또는 sElfcAtErInG? 내가 무엇을 놓치고 있습니까?

— jbyrd

62

아마도 거짓말은 아니지만 설명이 필요합니다.

실제 CSS 자체는 대소 문자를 구분하지 않습니다.

예를 들어

wiDth:100%;

그러나 이름은 고유 식별자로 대소 문자를 구분해야합니다.

희망이 도움이됩니다.

— 잭 스톤
소스

20

쿼크 모드에서는 CSS 클래스 및 ID 이름을 사용할 때 모든 브라우저가 대소 문자를 구분하지 않는 것처럼 작동 합니다.

쿼크 모드에서 CSS 클래스와 ID 이름은 대소 문자를 구분하지 않습니다. 표준 모드에서는 대소 문자를 구분합니다. (이는 getElementsByClassName에도 적용됩니다.) 자세한 내용을 읽으십시오.

때때로 벨로우즈와 같은 잘못된 doctypes가 있으면 브라우저가 쿼크 모드로 전환됩니다.

<!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 이름이 대소 문자를 구분하지 않으면 doctype을 확인하십시오.

— 모하마드 시라 리자 데
소스

3

CSS는 대소 문자를 구분하지 않습니다.

그러나 HTML5에서 클래스와 ID는 대소 문자를 구분합니다

따라서 CSS 속성, 값, 의사 클래스 이름, 의사 요소 이름, 요소 이름은 대소 문자를 구분하지 않습니다.

CSS 클래스, id, urls, font-families는 대소 문자를 구분합니다.

참고 : HTML 쿼크 모드에서 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>

— 교환
소스