클래스 선택기 (CSS 선택기)

구문

설명 클래스 이름을 기반으로 요소를 선택하는 것은 CSS에서 매우 일반적인 기술입니다. 속성 선택기 구문 [class ~ = "경고"]는 다소 어색하지만 고맙게도 클래스 선택기라는 더 간단하고 짧은 형태가 있습니다. 다음은 "경고"값을 포함하는 클래스 속성을 가진 모든 요소를 ​​선택하는 간단한 예입니다.

이 예제는 또한 묵시적 범용 선택기의 사용을 보여줍니다. 공백 문자는 기간 이후 또는 요소 유형 선택기 또는 명시적인 범용 선택기와 기간간에 나타날 수 없습니다. 예를 들어, 다음 선택기는 모든 P 요소와 일치하여 "경고"값이 포함 된 클래스 속성과 일치합니다. “:

.className {
declaration block
}

간단한 선택기는 둘 이상의 속성 선택기 및/또는 클래스 선택기를 포함 할 수 있습니다. 이러한 경우, 선택기 패턴은 속성에

모든

가 지정된 구성 요소를 포함하는 요소와 일치합니다. 예는 다음과 같습니다.

.warning {
  ⋮ <span>declarations
</span>}

위의 첫 번째 예제 선택기는 클래스 속성 값에 "foo"와 "bar"라는 단어가 모두 포함 된 div 요소와 일치합니다. 두 번째 예제 선택기는 클래스 속성 값이 "foo"라는 단어를 모두 포함하는 div 요소와 일치합니다. 그리고 "bar", 그리고 제목 속성 값은 문자열 "도움말"으로 시작합니다. 위의 CSS 선택기와 일치하는 HTML을 더 명확히하기 위해 다음과 같습니다.

p.warning {
  ⋮ <span>declarations
</span>}

예제 다음 선택기는 모든 p 요소와 일치하여 "Intro"값을 포함하는 클래스 속성과 일치합니다.

div.foo.bar {
  ⋮ <span>declarations
</span>}
div.foo.bar[title^="Help"] {
  ⋮ <span>declarations
</span>}

CSS 클래스 선택기에 대한 자주 질문

<div >Matches first example</div>
<div  title="Help">Matches second example</div>

CSS 클래스 선택기의 중요성은 무엇입니까?

A CSS 클래스 선택기는 CSS 파일의 특정 스타일에 할당 된 이름입니다. 개발자가 여러 HTML 요소에 동일한 스타일을 적용 할 수 있으므로 웹 개발에 중요한 역할을합니다. 이는 개발자가 동일한 코드를 반복적으로 작성할 필요가 없기 때문에 설계의 일관성을 보장 할뿐만 아니라 시간을 절약 할 수 있습니다. 클래스 선택기는 기간과 클래스 이름으로 정의됩니다. 예를 들어, .intro {color : blue;}입니다. 이 경우 'Intro'는 클래스 선택기입니다.

html에서 CSS 클래스 선택기를 어떻게 사용합니까?

HTML에서 CSS 클래스 선택기를 사용하려면 클래스를 할당해야합니다. '클래스'속성을 사용하여 HTML 요소의 이름을 지정하십시오. 예를 들어, CSS 파일에 'Intro'라는 클래스 선택기가있는 경우 다음과 같은 html의 단락에 적용 할 수 있습니다.

p.intro {
  ⋮ <span>declarations
</span>}

이것은 소개 단락입니다.

.. '소개'클래스에 정의 된 스타일은이 단락에 적용됩니다. 단일 HTML 요소에 다중 클래스 선택기를 사용할 수 있습니까?

예, 단일 HTML 요소에 여러 클래스 선택기를 사용할 수 있습니다. HTML의 '클래스'속성 내의 공간으로 각 클래스 이름을 분리하면됩니다. 예를 들어,

이것은 강조된 입문 단락입니다. 이 경우 '소개'및 '하이라이트'클래스 모두에 정의 된 스타일이 단락에 적용됩니다. CSS의 클래스 선택기와 ID 선택기의 차이점은 무엇입니까? CSS의 클래스 선택기와 ID 선택기의 주요 차이점은 사용에 있습니다. 클래스 선택기는 여러 HTML 요소를 스타일링하는 데 사용될 수 있지만 ID 선택기는 단일 고유 한 요소를 스타일링하는 데 사용됩니다. 또한 클래스 선택기는 클래스 이름 이전의 기간 (.)으로 정의되는 반면 ID Selectors는 ID 이름 앞에 해시 (#)로 정의됩니다.

다른 선택기와 함께 CSS 클래스 선택기를 사용할 수 있습니까? CSS 클래스 선택기는 다른 선택기와 결합하여 특정 요소를 대상으로 할 수 있습니다. 예를 들어, 요소 선택기가있는 클래스 선택기를 사용하여 클래스 내에서 특정 유형의 요소를 스타일링 할 수 있습니다. 예를 들어, p.intro {color : blue;}는 'Intro'클래스 내의 단락 요소에만 스타일을 적용합니다.

CSS 클래스 선택기에 상충되는 스타일이 있으면 어떻게 되나요?

CSS 클래스 선택기에 상충되는 스타일이있는 경우 브라우저는 CSS 특이성 및 상속 규칙을 따라 충돌을 해결합니다. 일반적으로 CSS 파일의 나중에 정의 된 스타일은 이전의 스타일을 무시합니다. 그러나보다 구체적인 선택기는 우선 순위가 높을 것입니다.

CSS 클래스 선택기에서 스타일을 어떻게 무시할 수 있습니까?

CSS의 나중에 새로운 스타일을 정의하여 CSS 클래스 선택기의 스타일을 재정의 할 수 있습니다. 파일 또는보다 구체적인 선택기 사용. 또 다른 방법은 '중요한'규칙을 사용하는 것입니다. 스타일 후에‘! 중요한’를 추가하면 우선 순위가 높아질 수 있습니다. 그러나이 규칙을 CSS 관리하기가 어렵게 만들 수 있으므로이 규칙을 드물게 사용하십시오.

JavaScript에서 CSS 클래스 선택기를 사용할 수 있습니까?

예, JavaScript에서 CSS 클래스 선택기를 사용하여 HTML을 조작 할 수 있습니다. 강요. ‘Document.GetElementsByClassName ()’메소드를 사용하면 특정 클래스 이름을 가진 요소를 선택할 수 있습니다. 그런 다음 다양한 JavaScript 방법을 사용하여 스타일, 내용 또는 속성을 변경할 수 있습니다.

CSS 클래스 선택기에 대한 이름 지정 규칙이 있습니까?

CSS는 클래스에 대한 엄격한 이름 지정 규칙을 시행하지 않습니다. 선택기는 설명적이고 간결한 이름을 사용하는 것이 좋습니다. 또한 클래스 이름은 사례에 민감하며 숫자로 시작해서는 안됩니다. 하이픈 (-) 또는 밑줄 (_)을 사용하여 클래스 이름으로 단어를 분리 할 수 ​​있습니다. 응답 디자인에서 CSS 클래스 선택기를 사용할 수 있습니까?

예, CSS 클래스 선택기는 스크린 크기 또는 장치를 기반으로 다양한 스타일을 적용하기 위해 응답 디자인에 사용될 수 있습니다. 클래스 선택기를 미디어 쿼리와 결합하면 다른 시청 환경에 적응하는 응답 형 레이아웃을 만들 수 있습니다.

위 내용은 클래스 선택기 (CSS 선택기)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!