하나의 규칙 내에서 여러 클래스가있는 대상 요소

하나의 규칙 내에서 여러 클래스가있는 대상 요소

---

여러 클래스가있는 요소를 포함하는 HTML이 있고, 동일한 클래스가 다른 컨테이너 내에서 다를 수 있도록 하나의 규칙 내에서 할당해야합니다. 내 CSS에 다음이 있다고 가정합니다.

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

그런 다음 HTML에 다음이 있습니다.

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

단일 규칙 내에서이를 타겟팅 할 수 있습니까? 예를 들어, 내가 아는 것은 작동하지 않습니다.

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

---

.border-blue.background { ... }여러 클래스가있는 하나의 항목입니다.
.border-blue, .background { ... }각각 고유 한 클래스가있는 여러 항목을위한 것입니다.
.border-blue .background { ... }'.background'가 '.border-blue'의 자식 인 하나의 항목입니다.

더 자세한 설명 은 Chris의 답변 을 참조하십시오 .

---

누군가 내가 한 것처럼 우연히 발견하고 깨닫지 못하는 경우 위의 두 가지 변형은 다른 사용 사례에 대한 것입니다.

다음과 같은:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

파란색 테두리 또는 배경 클래스가있는 요소에 스타일을 추가하려는 경우입니다. 예를 들면 다음과 같습니다.

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

모두 파란색 테두리와 흰색 배경이 적용됩니다.

그러나 받아 들여지는 대답은 다릅니다.

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

이렇게하면 두 클래스가 모두있는 요소에 스타일이 적용되므로이 예제에서는 <div>두 클래스가있는 에만 스타일이 적용됩니다 (CSS를 올바르게 해석하는 브라우저에서).

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

따라서 기본적으로 이렇게 생각하면 쉼표 분리는 한 클래스 또는 다른 클래스 가있는 요소에 적용되고 점 분리는 한 클래스 및 다른 클래스 가있는 요소에 적용됩니다 .

참고 URL : https://stackoverflow.com/questions/5196583/target-elements-with-multiple-classes-within-one-rule