>웹 프론트엔드 >CSS 튜토리얼 >CSS의 의사 컴포먼트 (또는 브라우저가 스타일을 구문 분석하는 방법)

CSS의 의사 컴포먼트 (또는 브라우저가 스타일을 구문 분석하는 방법)

William Shakespeare
William Shakespeare원래의
2025-02-23 11:14:09606검색

CSS伪注释 (或浏览器如何解析样式) CSS 사양은 언급되지 않았지만 CSS 파일 (일부 제한 사항)에서 C 스타일 및/또는 Unix 스타일 라인 주석을 시뮬레이션 할 수있는 몇 가지 방법이 있습니다. 다른 사람들은 이전에 이것에 대해 썼습니다 (특히 CSS 주석은 Sitepoint의 웹 기초 기사에 다루어집니다). 이 기사는 이것을 더 자세히 논의 할 것입니다.

키 포인트

CSS는 공식적으로 C 스타일의 멀티 라인 댓글 만 지원하지만 의사 주석은 구문 분석 오류를 사용하여 실수로 코드를 댓글을 달아줍니다. 의사 주석은 세미콜론을 생략하거나 인식되지 않은 속성 이름을 사용하는 것과 같은 CSS 선언을 기형으로 만들어 후속 코드가 무시됩니다. inline 및 pseudo 주석의 다음 줄 배치는 후속 CSS 규칙이 적용되는지 여부에 영향을 미치며 인라인 의사 주석은 같은 줄에 후속 선언을 무효화 할 수 있습니다.

pseudo-notations도 @ 규칙에 적용될 수 있으며, 관찰 된 동작은 @ 규칙에 바디 블록이 포함되어 있는지 또는 세미콜론으로 끝나는 지에 따라 다릅니다.
    의사 댓글은 디버깅에 사용될 수 있지만 읽을 수 없으며 프로덕션 코드에서 표준 CSS 주석을 대체해서는 안됩니다.
  • CSS 댓글
  • 사양에 따르면, CSS 파서는 공식적으로 주석 스타일, 즉 C 스타일 언어의 멀티 라인 주석을 지원합니다. >
  • 따라서 주석의 규칙 선언은 무시됩니다 :
  • 주석의 블록 선언은 무시됩니다 :
  • 이 예에서, 우리는 모두 의도적으로 주석 구문을 사용하여 구문 프로그램에 콘텐츠를 무시하도록 지시합니다. 그러나, 우리는 오염 된 진술을 사용하는 것과 같이 예기치 않게 이것을 할 수도 있습니다 : .
이 예에서는 세미콜론의 부족으로 인해

배경 선언이 적용되지 않습니다. 파서는 다음 세미콜론을 스캔하여 전체 2 라인 문이 잘못되었다고 판단하므로 전체 어휘 분석의 내용이 무시됩니다. 속성 값을 모두 생략하면 다음과 같은 일이 발생합니다.

는 우리가 널리 알려진 문을 ... 의사 주석 /* */ 우리는이"의사 주석 "이라고 부릅니다. 엄격히 말하면, 이것은 라인 문자의 끝에서 종료되는 의견이 아닙니다. 대신, 이들은 후속 입력 (후속 선에서도)을 기형으로 사용하여 작동합니다. 규칙 세트, 선언 블록 및 선택기의 오류 처리 프로세스 때문입니다.

"선택기의 어느 곳에도 오류가 있으면, 나머지 선택기가 CSS 2.1에서 합리적으로 보이 도라도 전체 진술을 무시해야합니다."
<code>/*
  起始和结束标记之间(包括起始和结束标记)的字符将被解析器忽略,
*/</code>
다음 예제 (사양에서 발췌)에서, 두 번째 규칙 세트는 셀렉터의 잘못된 문자 "&"로 인해 무시됩니다.

마찬가지로, 다음 예에서, 두 번째 및 세 번째 선언은 배경 속성 이름에 중복 문자가 있기 때문에 무시됩니다.

영어 키보드를 한 눈에 볼 때 다음 특수 문자는 단일 라인 선언 코멘트로 작용할 것임을 보여줍니다.
<code>/*
  起始和结束标记之间(包括起始和结束标记)的字符将被解析器忽略,
*/</code>
그러나 문자를 사용하지 말고 C 및 Unix 규칙을 고수하고 # 또는 // : 를 사용하십시오.

세미 콜론
<code>body {
  background: red;
  /*
  background: white;
  */
}</code>

    세미콜론은 규칙 선언의 끝 마크입니다. 그러므로 그들은 다음 텍스트를 "댓글"할 수 없습니다. 사양에서, 파서는 매달려있는 세미콜론을 기형 선언 (이름, 콜론 또는 값의 선언)로 취급합니다. 앞에서 언급 한 바와 같이, 일반 멀티 린 댓글 형식이 잘못 될 때, 즉 시작 및 종료 태그가 규칙 세트 또는 선언 주변에서 균형을 잡지 않으면, 파서는 후속 선언 또는 규칙 세트를 무시합니다. Parser가 영향을받는 선언의 다음 선언 끝 태그 (세미콜론)를 검색하기 때문에 다음은 실제로 두

    배경 선언을 "댓글"했습니다. 다음 진술 전에 댓글 후 세미콜론을 추가 하여이 문제를 해결하십시오 (따라서 배경 파란색 선언이 적용됩니다) : Pseudo 댓글의 경우 세미콜론이 한 줄에 누락 된 경우 효과는 동일합니다.

    그리고 세미콜론을 복원하여 수정하십시오

    다음 줄 인라인 이것은"의사 "가"의사 주석 "이라는 단어에 들어가는 곳입니다. 이것은 C 또는 UNIX 스타일 라인 의견의 종말 계약을 위반하기 때문에 "의견"이라고 부르지 않는 좋은 이유 일 수 있습니다.

    한 줄에 배치 된 의사 주석은 다음 줄에서 선언을 억제합니다. 다음 예에서는 배경이 파란색입니다 :
    <code>/*
    body {
      background: red;
    }
    */</code>

    이후에 같은 줄에 배치 된 의사 주석은 에 의해 억제됩니다. 다음 예에서는 배경이 파란색 대신 흰색이됩니다.
    <code>body {
      background: red    /* 缺少分号 */
      background: blue;      
    }</code>
    인라인 유사 발전을 갖는 CSS 선택기의 "압축 된"버전조차도 단일 선반 주석으로 작동합니다. 다음 예에서, 파서에서 인식 한 주석 마크 #은 다음 세미콜론에서 종료되므로 첫 번째 배경 선언은 무시되고 두 번째 배경 선언은 올바르게 형식으로 인식되므로 적용됩니다 (이 경우 파란색은 적용됩니다. 신체 배경) :

    (후속 컨텐츠와 동일. 공간 제한으로 인해 나머지 부분의 나머지 의사 원리 창작물은 여기서 생략됩니다.)

위 내용은 CSS의 의사 컴포먼트 (또는 브라우저가 스타일을 구문 분석하는 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.