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

Html / 글쓴이

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

.holiday-type.Selfcatering

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

<div class="holiday-type Selfcatering">

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

.holiday-type.SelfCatering

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

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

답변

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

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

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

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

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

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

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

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

답변

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

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

예를 들어

wiDth:100%;

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

희망이 도움이됩니다.

답변

쿼크 모드에서는 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을 확인하십시오.

답변

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>

답변