> 웹 프론트엔드 > CSS 튜토리얼 > CSS의 클래스 이름 문제 소개

CSS의 클래스 이름 문제 소개

王林
풀어 주다: 2020-04-15 09:14:19
앞으로
2532명이 탐색했습니다.

CSS의 클래스 이름 문제 소개

숫자로 시작하는 다음 CSS 클래스 이름은 적용되지 않습니다.

.1st{
    color: red;
}
로그인 후 복사

적법한 CSS 클래스 이름은 다음 중 하나로 시작해야 합니다.

1, underscore_

2, dash-

3. 문자 a - z

뒤에는 기타 _, - 숫자 또는 문자가 옵니다.

(권장 튜토리얼: CSS 소개 튜토리얼)

정규 표현식을 사용하는 경우 적합한 CSS 클래스 이름은 다음과 같습니다.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*
로그인 후 복사

CSS 표준의 설명에 따르면 클래스 이름이 대시 - 로 시작하면 두 번째 문자는 밑줄_ 또는 문자여야 하지만 실제 테스트에서는 언급된 두 가지 외에 다른 대시를 뒤에 붙이는 것도 효과적인 것으로 나타났습니다.

다음은 테스트 코드 및 결과입니다.

<p class="1st">should apply red color</p>
<p class="-1foo">should apply red color</p>
<p class="-_foo">should apply red color</p>
<p class="--foo">should apply red color</p>
<p class="-foo">should apply red color</p>
<p class="foo">should apply red color</p>
.1st {
  color: red;
}
.-1foo {
  color: red;
}
.-_foo {
  color: red;
}

.--foo {
  color: red;
}

.-foo {
  color: red;
}
.foo {
  color: red;
}
로그인 후 복사

결과는 그림과 같습니다.

CSS의 클래스 이름 문제 소개

추천 비디오 튜토리얼: css 비디오 튜토리얼

위 내용은 CSS의 클래스 이름 문제 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:jb51.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿