CSS의 ID와 클래스를 모두 기반으로 요소의 스타일을 지정하려면 어떻게 해야 합니까?

CSS 선택기에서 클래스와 ID 결합

클래스 및 ID 속성을 모두 기반으로 요소의 스타일을 지정해야 하는 상황이 발생할 수 있습니다. 한 번에 하나의 속성을 사용하는 것은 쉽지만 이들을 결합하는 것은 혼란스러워 보일 수 있습니다.

다음 HTML 코드를 고려해 보겠습니다.

<div class="sectionA">
<p><strong>다음 HTML 코드를 고려해 보겠습니다. 특히 "a div with></strong></p>
<p> 달성하는 방법에는 두 가지가 있습니다. 다음:</p>
<ol><li>
<strong>결합된 ID와 클래스 선택기 사용:</strong> 스타일시트에 다음을 작성합니다.</li></ol>
<pre class="brush:php;toolbar:false">div#content.myClass

이 구문은 규칙은 ID 속성 값 "content"와 class 속성 값을 모두 갖는

요소에 적용됩니다. "myClass".

2. 두 식별자를 결합하는 클래스 이름 만들기: 별도의 클래스 및 ID 속성을 사용하는 대신 원하는 조합을 나타내는 단일 클래스 이름을 만들 수 있습니다. 예를 들어 다음을 사용할 수 있습니다.

<div class="content-sectionA">
<p>이 접근 방식은 ID와 클래스 속성의 기능을 단일 속성으로 결합합니다. 식별자.</p>
<p><strong>참고:</strong></p>
<ul>
<li>여러 클래스 이름이나 ID 선택기를 연결하여 보다 구체적인 조합을 지정할 수 있습니다.</li>
<li>최신 브라우저에서는 성능상의 이유로 선택기에서 태그 이름을 사용할 필요는 없습니다. 하지만 아껴서 사용하는 것이 좋습니다.</li>
</ul>
</div>