Bộ chọn CSS dấu phẩy

Như thường lệ, nếu tôi thấy mình làm điều gì đó nhiều lần, thì đó là một lời nhắc nhở rằng bạn nên viết ra cách thực hiện.

Hôm nay, đó là dấu phẩy. Cụ thể đó là cách sử dụng dấu phẩy trong CSS

Vì tôi không sử dụng cú pháp CSS mỗi ngày, nên hành trình thành thạo nó là một hành trình chậm chạp. Số lượng các loại bộ chọn khác nhau cũng không giúp được gì. Nhưng sau đó là dấu phẩy. Nó dường như chỉ xuất hiện một vài lần và tôi vẫn tự hỏi, chính xác thì nó làm gì

Trên thực tế, trong khi sê-ri Các bước đầu tiên và Khối xây dựng CSS của MDN đề cập đến việc sử dụng dấu phẩy (e. g. , trong phần Tạo các phần hợp lý trong biểu định kiểu của bạn), tôi không thể tìm thấy định nghĩa hay ở bất kỳ đâu về ý nghĩa của nó

Lấy ví dụ hai định nghĩa phong cách này

so với

Cái trước là một ví dụ về bộ chọn con và áp dụng màu xanh lam cho tất cả các thẻ

.comma-list li {
  display: inline;
}

.comma-list li {
  display: inline;
}

.comma-list li {
  display: inline;
}

.comma-list li {
  display: inline;
}

Sau đó, chỉ đơn giản là một cách ngắn gọn hơn (mặc dù tương đương) để viết như sau

body {
  color: blue;
}
p {
  color: blue;
}

Tôi vẫn không biết dấu phẩy có tên chính thức hay không, nhưng tôi đang nghĩ nó là “cá mú”. Đó là một cách để nói “hoặc” trong CSS. Dấu phẩy không phải là một bộ chọn, mà là một cách để nhóm các bộ chọn

Gần đây tôi đã viết blog về cách tạo kiểu danh sách sọc trong CSS. Lần này, tôi muốn xem cách tạo kiểu cho danh sách được phân tách bằng dấu phẩy. Đây là một tính năng khác mà tôi cần cho việc viết lại blog của mình để hiển thị danh sách các danh mục mà mỗi bài đăng có trong đó.

Giả sử tôi có HTML sau chứa danh sách các danh mục

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

Theo mặc định nó sẽ trông như thế này

Chúng tôi muốn đưa tất cả những thứ này vào một dòng với dấu phẩy giữa các danh mục. Vì vậy, trước hết, chúng tôi sẽ đặt lại kiểu dáng mặc định bằng cách tắt

.comma-list li {
  display: inline;
}

.comma-list li {
  display: inline;
}

.comma-list li::after {
  content: ", ";
}

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

Chúng tôi cũng sẽ cần đặt các mục danh sách thành

.comma-list li::after {
  content: ", ";
}

.comma-list li {
  display: inline;
}

Bây giờ nó trông như thế này

Bây giờ chúng tôi đang đến gần, nhưng tất nhiên không có dấu phẩy giữa các mục. Chúng ta có thể chèn chúng bằng cách sử dụng bộ chọn CSS

.comma-list li::after {
  content: ", ";
}

.comma-list li::after {
  content: ", ";
}

Điều này cung cấp cho chúng tôi gần như những gì chúng tôi cần, nhưng bây giờ chúng tôi có dấu phẩy sau danh mục cuối cùng

Chúng ta có thể loại bỏ dấu phẩy ở cuối bằng cách kết hợp bộ chọn

.comma-list li::after {
  content: ", ";
}

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

.comma-list li:last-child::after {
    content: "";
}

Và chúng tôi nhận được hiệu quả mong muốn

Một lần nữa, tôi chắc chắn rằng đây là tất cả những điều rất cơ bản đối với các chuyên gia CSS, nhưng với tôi thì nó mới. Bạn có thể chơi với một ví dụ đầy đủ trên CodePen

Ví dụ

Chọn và tạo kiểu cho tất cả

yếu tố VÀ tất cảyếu tốh2, p {  màu nền. màu vàng;}Tự mình thử »

Định nghĩa và cách sử dụng

Để tạo kiểu cho một số phần tử có cùng kiểu, hãy phân tách từng tên phần tử bằng dấu phẩy

Hỗ trợ trình duyệt

Chọn phần tử, phần tửCóCóCóCóCó

Cú pháp CSS

phần tử, phần tử {
  khai báo css;
} Trình diễn

Danh sách bộ chọn CSS (

span,
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

span,
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

span,
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

span,
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)

Posted in:

  
Azure
  
CSS
  
C#

(8th Jan 2018)