Dấu phẩy và dấu cách trong nhiều lớp có nghĩa là gì trong CSS?

Đây là một ví dụ mà tôi không hiểu:

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

Đối với tôi, nó dường như width: 460pxđược áp dụng cho tất cả các lớp được đề cập ở trên. Nhưng tại sao một số lớp được phân tách bằng dấu phẩy ( ,) và một số chỉ bằng dấu cách?

Tôi giả sử rằng điều đó width: 460pxsẽ chỉ được áp dụng cho những phần tử kết hợp các lớp theo cách được đề cập trong tệp CSS. Ví dụ, nó sẽ được áp dụng cho <div class='container_12 grid_6'>nhưng nó sẽ không được áp dụng cho <div class='container_12'>. Giả thiết này có đúng không?

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

Điều đó nói rằng "làm cho tất cả .grid_6 nằm trong .container_12 và tất cả .grid_8 trong .container_16 có chiều rộng 460 pixel." Vì vậy, cả hai điều sau sẽ hiển thị giống nhau:

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

Đối với dấu phẩy, nó áp dụng một quy tắc cho nhiều lớp, như thế này.

.blueCheese, .blueBike {
  color:blue;
}

Về mặt chức năng, nó tương đương với:

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

Nhưng cắt giảm độ dài dòng.

.container_12 .grid_6 { ... }

Quy tắc này so khớp nút DOM với lớp có lớp container_12con (không nhất thiết phải là con) với lớp grid_6và áp dụng các quy tắc CSS cho phần tử DOM với lớp grid_6.

.container_12 > .grid_6 { ... }

Đặt >giữa chúng nói rằng grid_6nút phải là con trực tiếp của nút với lớp container_12.

.container_12, .grid_6 { ... }

Dấu phẩy, như những người khác đã nêu, là một cách để áp dụng các quy tắc cho nhiều nút khác nhau cùng một lúc. Trong trường hợp này, các quy tắc áp dụng cho bất kỳ nút nào có lớp container_12hoặc grid_6.

Không chính xác những gì đã được hỏi, nhưng có thể điều này sẽ hữu ích.

Để chỉ áp dụng một kiểu cho một phần tử nếu nó có cả hai lớp, bộ chọn của bạn không được sử dụng khoảng trắng giữa các tên lớp.

Ví dụ:

.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>

Dấu phẩy nhóm các lớp (áp dụng cùng một kiểu cho tất cả chúng), một khoảng trống cho biết rằng bộ chọn sau phải nằm trong bộ chọn đầu tiên.

vì thế

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

chỉ áp dụng phong cách đó cho lớp .grid_6nằm trong .container_12lớp và cho .grid_8lớp nằm trong .container_16.

Các width: 460px;sẽ được áp dụng cho các phần tử với các .grid_8lớp, chứa bên trong các yếu tố với .container_16lớp, và các yếu tố với các .grid_6lớp, chứa bên trong các yếu tố với .container_12.

Dấu cách có nghĩa là di sản và dấu phẩy có nghĩa là 'và'. Nếu bạn đặt các thuộc tính bằng một bộ chọn như
.class-a, .class-b , bạn sẽ có các thuộc tính được áp dụng cho các phần tử với bất kỳ ai trong hai lớp.

Hy vọng tôi đã giúp.

Bạn có bốn lớp và hai bộ chọn trong ví dụ của mình:

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

Vì vậy .container_12và .grid_6là cả hai lớp, nhưng quy tắc width: 460pxsẽ chỉ được áp dụng cho các phần tử có .grid_6lớp là con của một phần tử có .container_16lớp.

Ví dụ:

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

Điều trên có nghĩa là bạn đang áp dụng kiểu cho hai lớp, được biểu thị bằng dấu phẩy.

Khi bạn thấy hai phần tử cạnh nhau không được tách biệt, bạn có thể cho rằng nó đang tham chiếu đến một khu vực trong một khu vực. Vì vậy, ở trên, kiểu này chỉ áp dụng cho các lớp grid_6 bên trong các lớp container_12 và các lớp grid_8 bên trong các lớp container_16.

trong ví dụ:

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

Lớp grid_6 đầu tiên sẽ không có hiệu lực trong khi lớp thứ hai grid_6 sẽ vì nó được chứa bên trong container_12.

Một tuyên bố như

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

Sẽ chỉ áp dụng chữ đậm cho

bên trong các khu vực có "mô tả" lớp nằm bên trong khu vực có id "quản trị viên", chẳng hạn như:

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

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

width:460pxsẽ chỉ được áp dụng cho .grid_6và.grid_8

Chỉnh sửa: Đây là một bài viết rất tốt cho bạn

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

Các tổ hợp bộ chọn có ý nghĩa khác nhau - hình ảnh đính kèm giải thích dễ dàng

a) Nhiều bộ chọn được phân tách bằng dấu phẩy (“,”) - Các kiểu giống nhau được áp dụng cho tất cả các phần tử đã chọn.

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

Ở đây, kiểu đường viền được áp dụng cho các phần tử DIV và các phần tử áp dụng lớp CSS (.elmnt-color).

b) Nhiều bộ chọn cách nhau bởi dấu cách - Chúng được gọi là bộ chọn con.

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

}

Ở đây, kiểu đường viền được áp dụng cho các phần tử áp dụng lớp CSS (.elmnt-color) là phần tử con của phần tử DIV.

c) Nhiều bộ chọn được chỉ định không có khoảng trắng - Ở đây các kiểu được áp dụng cho các phần tử đáp ứng tất cả các kết hợp.

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

Ở đây, kiểu đường viền chỉ được áp dụng cho lớp CSS (.elmnt-color) chỉ áp dụng các phần tử DIV.

Thông tin chi tiết được đính kèm tại https://www.csssolid.com/css-tips.html

Lưu ý: CSS Class là một trong những CSS Selector. Quy tắc trên có thể áp dụng cho tất cả các Bộ chọn CSS (ví dụ: Lớp, Phần tử, ID, v.v.).