CSS 셀렉터에서 클래스와 ID를 결합하는 방법은?

CSS 셀렉터에서 클래스와 ID를 결합하는 방법은?

다음 디바가 있는 경우:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

아이디어를 표현하는 스타일을 정의할 수 있는 방법이 있을까요?id='content'그리고.class='myClass'"?

아니면 그냥 한 길을 가든지 아니면 다른 길을 가든지요?

<div class="content-sectionA">
    Lorem Ipsum...
</div>

아니면

<div id="content-sectionA">
    Lorem Ipsum...
</div>

스타일시트에서:

div#content.myClass

편집: 다음 사항도 도움이 될 수 있습니다.

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

예를 들어 다음과 같이 하십시오.

div#content.sectionA

편집, 4년 후:이것은 아주 오래된 것이고 사람들이 계속 찾고 있기 때문에 선택기에 Names라는 태그를 사용하지 마십시오.#content.myClass보다 빠릅니다.div#content.myClass태그Name에는 필요 없는 필터링 단계가 추가되기 때문입니다.selectors에서 names 태그를 사용해야 하는 곳에만 사용합니다!

사이에 차이가 있습니다.#header .callout그리고.#header.calloutCSS로

다음은 "평범한 영어"입니다.#header .callout:
클래스 이름을 가진 모든 요소 선택callout다음과 같은 ID를 가진 원소의 후손입니다.header.

그리고.#header.callout평균:
ID가 다음인 요소를 선택합니다.header그리고 또한 의 클래스 이름.callout.

여기서 더 많은 CSS 트릭을 읽을 수 있습니다.

일반적으로 id로 지정된 요소를 분류할 필요가 없습니다. id는 항상 고유하기 때문입니다. 하지만 정말로 필요하다면 다음이 작동해야 합니다.

div#content.sectionA {
    /* ... */
}

하나의 요소에 ID와 클래스를 결합하는 것은 문제가 없지만, 하나의 규칙에 대해 둘 다 식별할 필요는 없습니다.정말로 원하는 경우 다음을 수행할 수 있습니다.

#content.sectionA{some rules}

당신은 필요 없어요.div다른 분들이 말씀하신 것처럼 아이디 앞에.

일반적으로 해당 요소에 고유한 CSS 규칙은 ID와 함께 설정되어야 하며, 해당 규칙은 클래스의 규칙보다 더 큰 비중을 차지하게 됩니다.클래스에서 지정한 규칙은 조정해야 할 때마다 여러 위치에서 변경하지 않으려는 여러 항목에 적용되는 속성입니다.

결론은 이렇습니다.

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

이해했어?

Ajm의 답변 이어가기:

동적 ID 또는 클래스 선택 조합 ->

div[id*='**myStandarKey-**'].myClass{

}

/* This is to validate something like: */

div[id*='myStandarKey-**12**'].myClass{

}

/* AND */

div[id*='myStandarKey-**13**'].myClass{

}

/* etc. */

ID는 고유 문서 폭이어야 하므로 둘 다를 기준으로 선택할 필요가 없습니다.요소를 여러 클래스로 할당할 수 있습니다.class="class1 class2"

CSS에서 ID와 Class를 결합할 수 있지만 ID는 고유하게 만들어졌기 때문에 CSS 셀렉터에 클래스를 추가하면 오버퀄리티가 됩니다.

당신이 다 틀렸다고 생각합니다.ID 대 클래스는 특정성의 문제가 아닙니다. 이들은 완전히 다른 논리적 용도를 가지고 있습니다.

ID는 페이지의 특정 부분(헤더, 탐색바, 메인 기사, 저자 속성, 바닥글)을 식별하는 데 사용해야 합니다.

페이지에 스타일을 적용하려면 클래스를 사용해야 합니다.종합잡지 사이트가 있다고 치자.사이트의 모든 페이지에는 헤더, 탐색, 메인 기사, 사이드바, 바닥글과 같은 동일한 요소가 있습니다.하지만 당신의 잡지는 경제, 스포츠, 엔터테인먼트와 같은 다른 섹션을 가지고 있습니다.이 세 부분은 경제적으로 보수적이고 균형잡힌 모습, 스포츠 액션-y, 연예계에서 밝고 젊은 모습 등 다양한 모습을 갖추길 원하실 것입니다.

당신은 수업을 이용합니다.여러 개의 ID(#경제-기사, #스포츠-기사, #연예-기사)를 만들 필요가 없습니다.그것은 말이 안됩니다.오히려 경제학, 스포츠, 엔터테인먼트 등 세 가지 클래스를 정의한 다음 각각의 #nav, #article, #footerid를 정의합니다.

:tag.id ; tag#class당신의 css에 있는 태그 변수에서.

.sectionA[id='content'] { color : red; }

docype이 html 4.01일 때는 작동하지 않습니다.

언급URL : https://stackoverflow.com/questions/1028248/how-to-combine-class-and-id-in-css-selector