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

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두 클래스 중 하나를 사용하여 요소에 속성이 적용됩니다.

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

---

You have four classes and two selectors in your example:

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

So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.

For example:

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

---

The above means that you are applying styles to two classes, indicated by the comma.

When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.

in the example:

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

The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.

A statement like

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

Would only apply the bold to

tags within areas that have class "description" that are inside of an area with id "admin", such as:

<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 will be only applied to .grid_6 and .grid_8

Edit: Here is a very good article for you

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

---

Selectors combinations get different meanings - attached image explains easily

a) Multiple selectors separated by a comma(“,”) - Same styles are applied to all selected elements.

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

Here border style is applied to DIV elements and CSS class(.elmnt-color) applied elements.

b) Multiple selectors separated by space – Those are called descendant selectors.

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

}

Here border style is applied to CSS class(.elmnt-color) applied elements which are child elements of DIV element.

c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.

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

Here border style is applied to CSS class(.elmnt-color) applied DIV elements only.

Details are attached at https://www.csssolid.com/css-tips.html

Note: CSS Class is one of the CSS Selector. Above rule is applicable to all CSS Selectors(ex: Class, Element, ID etc.,).

참고URL : https://stackoverflow.com/questions/3344284/what-do-commas-and-spaces-in-multiple-classes-mean-in-css