CSS 선택기에서 클래스와 ID를 결합하는 방법은 무엇입니까?

다음 div가있는 경우 :

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

" id='content'AND를 가진 div"라는 아이디어를 표현하는 스타일을 정의하는 방법이 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 년 후 편집 : 이 기능은 매우 오래되어 사람들이 계속 찾아 냅니다. 선택기에서 tagNames를 사용 하지 마십시오 . tagName이 필요하지 않은 필터링 단계를 추가하기 때문에 #content.myClass보다 빠릅니다 div#content.myClass. 선택기에서만 tagNames를 사용해야합니다!

차이가 있습니다 #header .callout와 #header.calloutCSS에서이.

다음은 "일반 영어"입니다 #header .callout.
클래스 이름 callout이 ID 인 요소의 자손 인 모든 요소를 ​​선택하십시오 header.

그리고 #header.callout의미 :
ID header와 클래스 이름 을 가진 요소를 선택하십시오 callout.

CSS 트릭을 더 읽을 수 있습니다.

하나의 요소에 ID와 클래스를 결합하는 데 아무런 문제가 없지만 하나의 규칙에 대해 둘 다로 식별 할 필요는 없습니다. 정말로 원한다면 할 수 있습니다 :

#content.sectionA{some rules}

div다른 사람들이 제안한 것처럼 ID 앞에는 필요하지 않습니다 .

일반적으로 해당 요소에 고유 한 CSS 규칙은 ID로 설정해야하며 규칙보다 클래스의 가중치가 더 높습니다. 클래스에 의해 지정된 규칙은 조정해야 할 때마다 여러 곳에서 변경하지 않으려는 여러 항목에 적용되는 속성입니다.

이것으로 요약됩니다.

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

말이 되나요?

id는 항상 고유하기 때문에 일반적으로 id로 지정된 요소를 분류 할 필요는 없지만 실제로 필요한 경우 다음이 작동해야합니다.

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

당신은 할 수 있습니다 CSS의 ID 및 클래스를 결합하지만 ID는 그래서 그것을 넘어서 자격을 것 CSS 셀렉터에 클래스를 추가, 고유하기위한 것입니다.

사용 : tag.id ; tag#class당신의 CSS에서 태그 변수.

ID는 문서 전체에 걸쳐 고유해야하므로 둘 다를 기준으로 선택할 필요는 없습니다. 요소를 여러 클래스에 할당 할 수 있습니다.class="class1 class2"

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

페이지의 특정 부분 (예 : 헤더, 탐색 모음, 주요 기사, 작성자 속성, 바닥 글)을 식별하려면 ID를 사용해야합니다.

페이지에 스타일을 적용하려면 클래스를 사용해야합니다. 일반 잡지 사이트가 있다고 가정 해 봅시다. 사이트의 모든 페이지에는 제목, 탐색 메뉴, 주요 기사, 사이드 바, 바닥 글과 같은 요소가 있습니다. 그러나 잡지에는 경제학, 스포츠, 엔터테인먼트 등 다양한 섹션이 있습니다. 당신은 세 부분이 서로 다른 외모를 갖기를 원합니다-경제학 보수적이며 정사각형, 스포츠 액션, 엔터테인먼트 밝고 젊음.

당신은 그것을 위해 수업을 사용합니다. # economics-article 및 # sports-article 및 # entertainment-article과 같은 여러 ID를 만들 필요는 없습니다. 말이되지 않습니다. 오히려 .economics, sports 및 .entertainment의 세 가지 클래스를 정의한 다음 각각에 대해 #nav, #article 및 #footer id를 정의하십시오.

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

doctype이 html 4.01 인 경우 작동하지 않습니다 ...