CSS 클래스 .foo.bar (공백 없음)과 .foo.bar(공백 있음)의 차이점은 무엇입니까?

CSS 클래스 .foo.bar (공백 없음)과 .foo.bar(공백 있음)의 차이점은 무엇입니까?

이 두 CSS 클래스 구문의 차이점을 설명해 주시겠습니까?

.element .symbol {}

그리고.

.element.large .symbol {}

저는 그 둘의 차이를 이해할 수 없습니다.첫 번째 줄은 동일한 스타일이 적용되는 두 개의 서로 다른 클래스를 나타냅니다.그런데 두 번째는 '.element'에 붙어 있는 '.large'의 의미는 무엇입니까?

.element .symbol

은 단입니다..symbol東京의 .element

.element.symbol

은 단입니다..element그것은 최고의 것입니다.symbol뿐만 아니라.

그렇게,

.element.large .symbol

은 단입니다..symbol東京의 .element그것은 최고의 것입니다.large뿐만 아니라.

첫 번째가 무슨 뜻인지 조금 오해하신 것 같습니다.

.element .symbol {}

가 "" "" "" "" "" "" "" "" ""인 HTML 합니다..symbol가 " 와함내있습다니에부요소께스클래▁class▁with▁the▁element"인 요소 안에 있습니다..element.

<div class="element">
    <div class="symbol" />
</div>

첫이 " " " " " " " " " " " " " " " " " " " " 에 을 미칩니다.<div>가운데에 꼬리표를 달다

두 번째 예제는 첫 번째 클래스에 영향을 받으려면 두 개의 클래스가 필요하다는 것을 의미합니다.그 외에는 첫 번째 것과 같습니다.

<div class="element large">
    <div class="symbol" />
</div>

이 이렇게, 의 그서HTML 이인보면, 값적것입용다니될이, 내다에부은래렇게▁the▁to▁css▁will▁be▁applied에 적용될 것입니다.<div>꼬리표도 붙입니다.

여러 클래스에 적용되는 CSS 태그를 별도로 설정하려면 쉼표를 사용하여 분할해야 합니다.그래서 다음과 같이 보입니다.

.element, .symbol {}

편집: CSS 셀렉터의 문서에 대한 링크를 요청합니다.

사용.

.element.large

두 클래스를 모두 가진 요소를 말합니다.

<div class="element large"></div>

요소의 후손이 아니라:

.element .large

의미:

<div class="element">
    <div class="large"></div>
</div>

오직.

<div class="large"></div>

스타일을 '안정적'으로 표현합니다.

기본적으로, 공간에 의해 분리되는 것은 다음과 같은 두 가지 요소를 의미합니다.descendant관계.

사용할 수 있습니다..element .symbol이것은 당신이 다른 요소 안에 요소를 가지고 있는 곳입니다.예:

<div class="element">
    <i class="symbol"></i>
</div>

몇 개의 클래스만 , 로를몇개의싶면다구고앞으다다, 클만클추있수를니습가할추래스하가로 할 수 ..element.large .symbol예를 들어, 다음과 같습니다.

<div class="element large">
    <i class="symbol"></i>
</div>

의 첫 두의 클래스를 입니다. 를 들어 두 번 째 예 제 부 단 클 개 두 를 요 입 소 니 가 진 다 스 래 의 순 히 은 분 째 번 에 첫 서 선 의 기 택 , ▁with ▁in 니 입 ▁in ▁an 다 ▁classes ▁is , ▁as 소 ▁element 요 ▁simply ▁selector ▁the▁of ▁example<span class="element large">또는<span class="large element">.

일반적으로 선택기의 각 부분은 하나의 HTML 요소에 적용됩니다.

table[border].clname경계 속성과 clname 클래스가 있는 테이블을 의미하는 반면table [border] .clname테이블에서 경계 속성을 가진 요소에서 클래스 clname을 가진 요소를 의미합니다.

(편집: 글쎄요, 저는 "HTML 요소 하나"라고 말하지만, 물론 이것이 적용되는 테이블은 둘 이상일 수 있습니다.이해하시겠죠.)

공백이 없으면 선택기를 더 구체적으로 지정할 수 있습니다.왜냐하면 클래스는 html dom에 여러 번 나타날 수 있기 때문입니다.그러나 한 요소의 두 개 이상의 클래스는 더 드물기 때문에 더 정확합니다.

공백이 있는 선택기(.a1 .b2클래스 검색을 말합니다.a1이 요소에 클래스 b2가 있는 자식 요소 또는 자식 요소가 있는지 확인합니다.

보다 높은 수준의 정확도를 달성할 수 있습니다.>선택기(.a1 .b2 > span이것은 클래스 a1을 가진 요소 내에 위치한 클래스 .b2의 직계 자식인 스팬 요소만 고려해야 한다는 것을 나타냅니다.

.a1 .b1 {
  color: green;
}

.a1.a2 .b1 {
  color: red;
}

.a1.a2 .b2 {
  font-style: italic;
  font-weight: bold;
}

.a1.a2 .b2 > span {
  color: orange;
}

<div class="a1">
  <div class="b1">Hello France</div>
  <div class="b1">Hello Spain</div>
  <div class="b2">Hello Sweden</div>
</div>
<hr/>
<div class="a1 a2">
  <div class="b1">Bye France</div>
  <div class="b1">Bye Spain</div>
  <div class="b2">
    Bye
    <span>World</span>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/10036156/whats-the-difference-between-css-classes-foo-bar-without-space-and-foo-bar