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;
}
4 là con của .comma-list li {
display: inline;
}
5. Cái sau áp dụng màu xanh lam cho thẻ .comma-list li {
display: inline;
}
5 hoặc thẻ .comma-list li {
display: inline;
}
4Sau đó, 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;
}
8 và đặt .comma-list li {
display: inline;
}
9 thành 0. Chúng tôi cũng sẽ đặt .comma-list li::after {
content: ", ";
}
0 để nó được hiển thị trên cùng một dòng với "Đã đăng trong. ".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: ", ";
}
0 để đưa mọi thứ vào một dòng.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: ", ";
}
2 để đặt dấu phẩy [và khoảng trắng] sau mỗi mục danh sách.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: ", ";
}
2 với bộ chọn .comma-list {
display: inline;
list-style: none;
padding: 0px;
}
1.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;
}
Đị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;
}
0] chọn tất cả các nút phù hợp. Danh sách bộ chọn là danh sách bộ chọn được phân tách bằng dấu phẩyKhi nhiều bộ chọn chia sẻ cùng một khai báo, chúng có thể được nhóm lại với nhau thành một danh sách được phân tách bằng dấu phẩy. Danh sách bộ chọn cũng có thể được truyền dưới dạng tham số cho một số lớp giả CSS chức năng. Khoảng trắng có thể xuất hiện trước và/hoặc sau dấu phẩy
Ba khai báo sau là tương đương
________số 8
span,
div {
border: red 2px solid;
}
Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
0Khi áp dụng các kiểu giống nhau cho các phần tử khớp với các tiêu chí khác nhau, việc nhóm các bộ chọn trong danh sách được phân tách bằng dấu phẩy có thể cải thiện tính nhất quán đồng thời giảm kích thước của biểu định kiểu
Ví dụ này hiển thị các bộ chọn nhóm trong một dòng bằng cách sử dụng danh sách được phân tách bằng dấu phẩy
Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
1Ví dụ này hiển thị các bộ chọn nhóm trong nhiều dòng bằng cách sử dụng danh sách được phân tách bằng dấu phẩy
Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
2Bộ chọn không hợp lệ đại diện, và do đó khớp, không có gì. Khi danh sách bộ chọn chứa bộ chọn không hợp lệ, toàn bộ khối kiểu sẽ bị bỏ qua, ngoại trừ các lớp giả
span,
div {
border: red 2px solid;
}
1 và span,
div {
border: red 2px solid;
}
2 chấp nhậnNhược điểm của việc sử dụng danh sách bộ chọn là một bộ chọn không được hỗ trợ trong danh sách bộ chọn sẽ làm mất hiệu lực toàn bộ quy tắc
Hãy xem xét hai bộ quy tắc CSS sau
Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
5Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
6Chúng không tương đương. Trong bộ quy tắc đầu tiên, các kiểu sẽ được áp dụng cho các phần tử
span,
div {
border: red 2px solid;
}
3 và span,
div {
border: red 2px solid;
}
4, nhưng quy tắc span,
div {
border: red 2px solid;
}
5 sẽ không được phân tích cú pháp. Trong bộ quy tắc thứ hai, vì một bộ chọn trong danh sách không hợp lệ nên toàn bộ quy tắc sẽ không được phân tích cú pháp. Do đó, sẽ không có kiểu nào được áp dụng cho các phần tử span,
div {
border: red 2px solid;
}
3 và span,
div {
border: red 2px solid;
}
4 vì khi bất kỳ bộ chọn nào trong danh sách bộ chọn không hợp lệ, toàn bộ khối kiểu sẽ bị bỏ quaMột cách để khắc phục sự cố là sử dụng lớp giả
span,
div {
border: red 2px solid;
}
1 hoặc lớp giả span,
div {
border: red 2px solid;
}
2, những lớp này chấp nhận danh sách bộ chọn có thể bỏ qua. Mỗi bộ chọn trong danh sách bộ chọn tha thứ được phân tích cú pháp riêng lẻ. Vì vậy, bất kỳ bộ chọn không hợp lệ nào trong danh sách đều bị bỏ qua và những bộ chọn hợp lệ được sử dụngTiếp tục từ ví dụ trước, hai bộ quy tắc CSS sau đây hiện tương đương nhau
.comma-list {
display: inline;
list-style: none;
padding: 0px;
}
4.comma-list {
display: inline;
list-style: none;
padding: 0px;
}
5Sự khác biệt giữa hai loại này là tính đặc hiệu của
span,
div {
border: red 2px solid;
}
1 là đối số cụ thể nhất của nó, trong khi bộ chọn span,
div {
border: red 2px solid;
}
2 và tham số danh sách bộ chọn tha thứ không thêm bất kỳ trọng số đặc hiệu nàoDanh sách bộ chọn tương đối là danh sách bộ chọn được phân tách bằng dấu phẩy được phân tích cú pháp thành , bắt đầu bằng bộ kết hợp rõ ràng hoặc ngụ ý
.comma-list {
display: inline;
list-style: none;
padding: 0px;
}
8Ở trên, một
Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
02 ngay sau đó là một Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
03 hoặc một Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
04, sẽ được in nghiêng. Các phần tử giả và bộ chọn Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
05 không hợp lệ trong tham số danh sách bộ chọn tương đối Posted in:
- Azure
- CSS
- C#
[8th Jan 2018]
05