[css] 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"