CSS에서 여러 클래스의 쉼표와 공백은 무엇을 의미합니까?

다음은 내가 이해하지 못하는 예입니다.

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width: 460px위에서 언급 한 모든 수업에 적용되는 것 같습니다 . 그러나 일부 클래스는 쉼표 ( ,) 로 구분 되고 일부는 공백 으로 구분되는 이유는 무엇입니까?

width: 460pxCSS 파일에 언급 된 방식으로 클래스를 결합하는 요소에만 적용 된다고 가정 합니다. 예를 들어에는 적용 <div class='container_12 grid_6'>되지만 <div class='container_12'>. 이 가정이 맞습니까?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

즉, "모든 .grid_6는 .container_12의 범위 내에서, 모든 .grid_8은 .container_16의 460 픽셀 너비 이내로 만드십시오." 따라서 다음 두 가지 모두 동일하게 렌더링됩니다.

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

쉼표는 이와 같이 여러 클래스에 하나의 규칙을 적용합니다.

.blueCheese, .blueBike {
  color:blue;
}

기능적으로 다음과 같습니다.

.blueCheese { color:blue }
.blueBike { color:blue }

그러나 장황함을 줄입니다.

.container_12 .grid_6 { ... }

이 규칙은 class container_12가있는 자손 (반드시 자식 일 필요는 없음)이있는 클래스와 DOM 노드를 일치시키고 grid_6, class 가있는 DOM 요소에 CSS 규칙을 적용합니다 grid_6.

.container_12 > .grid_6 { ... }

>그들 사이에 두는 grid_6것은 노드가 class가있는 노드의 직접적인 자식이어야 한다는 것을 의미합니다 container_12.

.container_12, .grid_6 { ... }

다른 사람들이 말했듯이 쉼표는 한 번에 여러 노드에 규칙을 적용하는 방법입니다. 이 경우 규칙은 container_12또는 클래스가있는 모든 노드에 적용됩니다 grid_6.

정확히 무엇을 요청했는지는 아니지만 아마도 이것이 도움이 될 것입니다.

두 클래스가 모두있는 경우에만 요소에 스타일을 적용하려면 선택기가 클래스 이름 사이에 공백을 사용하지 않아야합니다.

예를 들면 :

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }

<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>

쉼표 는 클래스를 그룹화합니다 (모두 동일한 스타일 적용) . 빈 공간 은 다음 선택자가 첫 번째 선택자 내에 있어야 함을 나타냅니다.

따라서

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

단지 클래스에 해당 스타일 적용 .grid_6내에 .container_12클래스에 .grid_8내 클래스를 .container_16.

는 width: 460px;갖는 소자에인가한다 .grid_8포함 클래스 내부 와 요소 .container_16와 클래스 및 원소 .grid_6함유 클래스 내부 와 소자 .container_12.

공백은 유산을 의미하고 쉼표는 'and'를 의미합니다. 같은 선택기를 사용하여 속성을 넣으면
.class-a, .class-b두 클래스 중 하나가있는 요소에 속성이 적용됩니다.

도움이 되었기를 바랍니다.

예제에는 4 개의 클래스와 2 개의 선택기가 있습니다.

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

그래서 .container_12와는 .grid_6두 클래스,하지만 규칙은 width: 460px오직이 요소에 적용됩니다 .grid_6이 요소의 후손 클래스를 .container_16클래스를.

예를 들면 :

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

위는 쉼표로 표시된 두 클래스에 스타일을 적용하고 있음을 의미합니다.

두 요소가 나란히 나란히 분리되지 않은 것을 보면 영역 내의 영역을 참조한다고 가정 할 수 있습니다. 따라서 위의 스타일에서이 스타일은 container_12 클래스 내부의 grid_6 클래스와 container_16 클래스 내부의 grid_8 클래스에만 적용됩니다.

예에서 :

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

첫 번째 grid_6은 적용되지 않지만 두 번째 grid_6 클래스는 container_12 내부에 포함되어 있기 때문입니다.

다음과 같은 진술

#admin .description p { font-weight:bold; }

대담한 것을 적용 할 것입니다

다음과 같이 ID가 "admin"인 영역 내에있는 클래스 "설명"이있는 영역 내의 태그 :

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460px.grid_6및 에만 적용됩니다..grid_8

편집 : 여기에 아주 좋은 기사가 있습니다.

http://css-tricks.com/multiple-class-id-selectors/

선택기 조합은 다른 의미를 갖습니다-첨부 된 이미지는 쉽게 설명됩니다.

a) 쉼표 ( ,) 로 구분 된 다중 선택기 -선택한 모든 요소에 동일한 스타일이 적용됩니다.

div,.elmnt-color {
  border: 1px solid red;
}

여기서 테두리 스타일은 DIV요소 및 CSS 클래스 .elmnt-color적용 요소에 적용됩니다.

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

b) 공백으로 구분 된 다중 선택기 –이를 하위 선택 자라고합니다.

div .elmnt-color {
  background-color: red;
}

여기서 테두리 스타일은 요소의 자식 요소 인 CSS 클래스 .elmnt-color적용 요소에 적용됩니다 .DIV

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

c) 공백없이 여러 선택자 지정-모든 조합을 충족하는 요소에 스타일이 적용됩니다.

div.elmnt-color {
  border: 1px solid red;
}

여기서 테두리 스타일은 DIVCSS 클래스가 .elmnt-color.

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>

자세한 내용은 https://www.csssolid.com/css-tips.html 에 첨부되어 있습니다.

참고 : CSS 클래스는 CSS 선택기 중 하나 일뿐입니다. 이 규칙은 모든 CSS 선택자 (예 : 클래스, 요소, ID 등)에 적용됩니다.