CSS 셀렉터의 클래스 이름은 대소문자를 구분합니까?
나는 CSS가 대소문자를 구분하지 않는다는 것을 도처에서 계속 읽지만, 나는 이 선택기를 가지고 있습니다.
.holiday-type.Selfcatering
내 HTML에서 이렇게 사용하면, 그것은 선택됩니다.
<div class="holiday-type Selfcatering">
위의 선택기를 이렇게 변경하면
.holiday-type.SelfCatering
그러면 스타일이 채택되지 않습니다.
누군가가 거짓말을 하고 있습니다.
CSS 선택기는 일반적으로 대소문자를 구분하지 않습니다. 여기에는 클래스 및 ID 선택기가 포함됩니다.
그러나 HTML 클래스 이름은 대소문자를 구분하므로(속성 정의 참조) 두 번째 예제에서 불일치가 발생합니다.HTML5에서는 변경되지 않았습니다.1
이는 선택기의 대소문자 구분이 문서 언어가 말하는 내용에 따라 달라지기 때문입니다.
Selectors의 제어 하에 있지 않은 부분을 제외한 모든 Selectors 구문은 ASCII 범위 내에서 대소문자를 구분하지 않습니다(즉, [a-z]와 [A-Z]는 동일함).선택기에서 문서 언어 요소 이름, 속성 이름 및 속성 값의 대소문자 구분은 문서 언어에 따라 다릅니다.
그래서, HTML 요소가 주어지면,Selfcatering수업은 있지만 수업은 없는SelfCatering클래스, 셀렉터.Selfcatering그리고.[class~="Selfcatering"]셀렉터가 일치하는 동안.SelfCatering그리고.[class~="SelfCatering"]하지 2않을 것입니다.
문서 유형이 클래스 이름을 대소문자를 구분하지 않는 것으로 정의한 경우, 일치하는 항목이 나타납니다.
1 모든 브라우저의 쿼리 모드에서 클래스와 ID는 대소문자를 구분하지 않습니다.즉, 대/소문자가 일치하지 않는 선택기가 항상 일치합니다.이 동작은 기존의 이유로 인해 모든 브라우저에서 일관성이 있으며 이 문서에서 설명합니다.
2 셀렉터 레벨 4에는 다음을 사용하여 속성 값에 대소문자를 구분하지 않는 검색을 강제로 적용하기 위한 제안된 구문이 포함되어 있습니다.[class~="Selfcatering" i]또는[class~="SelfCatering" i]두 선택기 모두 HTML 또는 XHTML 요소와 일치합니다.Selfcatering클래스 또는 aSelfCatering클래스(또는 물론 둘 다).그러나 클래스 또는 ID 선택기(아직?)에는 이러한 구문이 없습니다. 일반 속성 선택기(관련된 의미가 없음)와 다른 의미를 전달하거나 사용 가능한 구문을 찾기 어렵기 때문일 수 있습니다.
거짓말은 아니지만 해명이 필요합니다.
실제 CSS 자체는 대소문자를 구분하지 않습니다.
예를들면
wiDth:100%;
그러나 고유 식별자가 되려면 이름이 대소문자를 구분해야 합니다.
쿼리 모드에서 모든 브라우저는 CSS 클래스 및 ID 이름을 사용할 때 대소문자를 구분하지 않는 것처럼 작동합니다.
쿼리 모드에서 CSS 클래스 및 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 이름이 대소문자를 구분하지 않고 행동한다면 당신의 doctype을 확인하세요.
CSS는 대소문자를 구분하지 않습니다.
그러나 HTML5에서 클래스와 ID는 대소문자를 구분합니다.
따라서 CSS 속성, 값, 유사 클래스 이름, 유사 요소 이름, 요소 이름은 대소문자를 구분하지 않습니다.
그리고 CSS 클래스, ID, URL, 글꼴 패밀리는 대소문자를 구분합니다.
참고: html Quirks 모드에서 CSS는 ID와 클래스에 대해서도 대소문자를 구분하지 않습니다(doctype 선언을 제거하는 경우).
코드펜의 예: 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>
언급URL : https://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-case-sensitive
'programing' 카테고리의 다른 글
| 메이븐 구성의 스프링 부트 (0) | 2023.08.12 |
|---|---|
| PHP에서 연관 배열 정렬 (0) | 2023.08.12 |
| SOAP XML을 구문 분석하는 방법은 무엇입니까? (0) | 2023.08.07 |
| Mariadbc 커넥터 mysql_real_connect 실패 오류(2002) [HY000] "소켓 '/tmp/mysql'을 통해 로컬 MySQL 서버에 연결할 수 없습니다.양말' (2)" (0) | 2023.08.07 |
| 반사예외:클래스 클래스 이름이 없습니다. Laravel (0) | 2023.08.07 |