CSS có thể có hai lớp không?

Question

Sử dụng nhiều bộ chọn lớp để áp dụng kiểu cho các thành phần là một cách tiếp cận mạnh mẽ. Có những trường hợp sử dụng thực tế khi sử dụng một bộ chọn duy nhất là không đủ hoặc thêm giá trị thấp hơn giá trị mà nó thêm vào. Trong bài viết này, chúng ta sẽ quan sát cách nhiều bộ chọn nâng cao mã kiểu của chúng ta trong một ví dụ thực tế

Nội dung chính Show

Phần kết luận
Bạn có thể có bao nhiêu lớp trong CSS?
Bạn có thể có 2 lớp trong một div không?
Bạn có thể có nhiều lớp có cùng tên CSS không?

Lưu ý rằng bài viết này nói về việc sử dụng nhiều bộ chọn lớp chứ không phải bộ chọn tổ hợp. Một ví dụ về nhiều bộ chọn là .class1.class2 - nhắm mục tiêu một phần tử có cả hai lớp, lớp1 và lớp2. Mặt khác, .class1 > .class2 là một tổ hợp nhắm mục tiêu vào tất cả các con trực tiếp (không phải tất cả con cháu) của .class1 với .class2 được áp dụng.

Giả sử bạn được giao nhiệm vụ xây dựng giao diện người dùng chia sẻ tệp. Nó cung cấp các tính năng cơ bản sau

Một danh sách các tập tin để chọn từ
Một danh sách những người nhận để lựa chọn từ

Cả tệp và người nhận đều được thể hiện dưới dạng lưới các biểu tượng. Khi một tệp/thành viên được chọn, biểu tượng của nó phải được tạo kiểu với một thiết kế cụ thể để thể hiện lựa chọn. Cả hai loại biểu tượng đều có giao diện khác nhau và bắt buộc phải có các kiểu lựa chọn khác nhau

Chúng ta có thể sử dụng một lớp. biểu tượng để tạo kiểu cho giao diện mặc định và một lớp khác .selected. Nhưng vấn đề là, các biểu tượng có các kiểu trạng thái mặc định và được chọn khác nhau. Nhiều bộ chọn lớp giải quyết vấn đề này một cách suôn sẻ. Chúng tôi có thể phân tách các kiểu theo quy tắc

/* Multiple Selectors Demonstration */

span.file-icon:not(.selected):hover,
.file-icon:not(.selected):hover .page-turn {
  border-color: lightgreen;
}

.file-icon:not(.selected):hover .line {
  background-color: lightgreen;
}

span.file-icon.selected {
  background-color: lightgreen;
}

.avatar:not(.selected):hover {
  border-color: lightgreen;
}

.avatar.selected .head,
.avatar.selected .body {
  background-color: lightgreen;
}

/* UI styling */
* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgba(72, 171, 224, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.file-sharing-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background-color: white;
  width: 80%;
  height: 80%;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0px 0px 15px 9px lightgray;
}

span.file-icon {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  height: 20vh;
  width: 16vh;
  margin: 5px;
  border: 2px solid black;
  border-radius: 5px;
  border-top-right-radius: 20px;
  cursor: pointer;
}

.file-icon .page-turn {
  display: inline-block;
  height: 35%;
  width: 30%;
  position: absolute;
  right: 0;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

.content-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 30%;
}

.content-lines .line {
  height: 1px;
  background: black;
}

.avatar {
  display: inline-block;
  position: relative;
  display: inline-block;
  height: 20vh;
  width: 20vh;
  margin: 5px;
  border: 2px solid black;
  border-radius: 50%;
  cursor: pointer;
}

.avatar .head {
  display: inline-block;
  position: absolute;
  display: inline-block;
  height: 30%;
  width: 30%;
  border: 2px solid transparent;
  border-radius: 20px;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  background: #48abe0;
}

.avatar .body {
  display: inline-block;
  position: absolute;
  height: 25%;
  width: 50%;
  border: 2px solid transparent;
  border-radius: 10vh 10vh 0 0;
  top: 53%;
  left: 50%;
  transform: translateX(-50%);
  background: #48abe0;
}

0 và

/* Multiple Selectors Demonstration */

span.file-icon:not(.selected):hover,
.file-icon:not(.selected):hover .page-turn {
  border-color: lightgreen;
}

.file-icon:not(.selected):hover .line {
  background-color: lightgreen;
}

span.file-icon.selected {
  background-color: lightgreen;
}

.avatar:not(.selected):hover {
  border-color: lightgreen;
}

.avatar.selected .head,
.avatar.selected .body {
  background-color: lightgreen;
}

/* UI styling */
* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgba(72, 171, 224, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.file-sharing-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background-color: white;
  width: 80%;
  height: 80%;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0px 0px 15px 9px lightgray;
}

span.file-icon {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  height: 20vh;
  width: 16vh;
  margin: 5px;
  border: 2px solid black;
  border-radius: 5px;
  border-top-right-radius: 20px;
  cursor: pointer;
}

.file-icon .page-turn {
  display: inline-block;
  height: 35%;
  width: 30%;
  position: absolute;
  right: 0;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

.content-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 30%;
}

.content-lines .line {
  height: 1px;
  background: black;
}

.avatar {
  display: inline-block;
  position: relative;
  display: inline-block;
  height: 20vh;
  width: 20vh;
  margin: 5px;
  border: 2px solid black;
  border-radius: 50%;
  cursor: pointer;
}

.avatar .head {
  display: inline-block;
  position: absolute;
  display: inline-block;
  height: 30%;
  width: 30%;
  border: 2px solid transparent;
  border-radius: 20px;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  background: #48abe0;
}

.avatar .body {
  display: inline-block;
  position: absolute;
  height: 25%;
  width: 50%;
  border: 2px solid transparent;
  border-radius: 10vh 10vh 0 0;
  top: 53%;
  left: 50%;
  transform: translateX(-50%);
  background: #48abe0;
}

1.

Codepen sau minh họa giao diện người dùng và kiểu như vậy. Nhiều kiểu bộ chọn lớp đã được đặt ở đầu các kiểu để nhấn mạnh. Các chi tiết chung về việc triển khai giao diện người dùng này nằm ngoài phạm vi của bài viết này. Độc giả quan tâm có thể xem qua codepen để biết nó đã được xây dựng như thế nào.


  
  
  Select Files 
  
    
      
      
        
        
        
        
        
      
    
    
      
      
        
        
        
        
        
      
    
    
      
      
        
        
        
        
        
      
    
  
  

  
  Select Recipients

/* Multiple Selectors Demonstration */

span.file-icon:not(.selected):hover,
.file-icon:not(.selected):hover .page-turn {
  border-color: lightgreen;
}

.file-icon:not(.selected):hover .line {
  background-color: lightgreen;
}

span.file-icon.selected {
  background-color: lightgreen;
}

.avatar:not(.selected):hover {
  border-color: lightgreen;
}

.avatar.selected .head,
.avatar.selected .body {
  background-color: lightgreen;
}

/* UI styling */
* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgba(72, 171, 224, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.file-sharing-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background-color: white;
  width: 80%;
  height: 80%;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0px 0px 15px 9px lightgray;
}

span.file-icon {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  height: 20vh;
  width: 16vh;
  margin: 5px;
  border: 2px solid black;
  border-radius: 5px;
  border-top-right-radius: 20px;
  cursor: pointer;
}

.file-icon .page-turn {
  display: inline-block;
  height: 35%;
  width: 30%;
  position: absolute;
  right: 0;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

.content-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 30%;
}

.content-lines .line {
  height: 1px;
  background: black;
}

.avatar {
  display: inline-block;
  position: relative;
  display: inline-block;
  height: 20vh;
  width: 20vh;
  margin: 5px;
  border: 2px solid black;
  border-radius: 50%;
  cursor: pointer;
}

.avatar .head {
  display: inline-block;
  position: absolute;
  display: inline-block;
  height: 30%;
  width: 30%;
  border: 2px solid transparent;
  border-radius: 20px;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  background: #48abe0;
}

.avatar .body {
  display: inline-block;
  position: absolute;
  height: 25%;
  width: 50%;
  border: 2px solid transparent;
  border-radius: 10vh 10vh 0 0;
  top: 53%;
  left: 50%;
  transform: translateX(-50%);
  background: #48abe0;
}

function selectItem(event) {
  var classList = document.getElementById(event).classList;

  if (classList.contains("selected")) classList.remove("selected");
  else classList.add("selected");
}

Nhiều bộ chọn lớp CSS bổ sung thêm giá trị khi các trạng thái của các phần tử khác nhau có các kiểu được chia sẻ một phần. Thay vì lặp lại mã kiểu, chúng ta có thể chia sẻ mã kiểu trùng lặp và ghi đè mã kiểu duy nhất. Hãy chứng minh điều này bằng một ví dụ

Giả sử chúng ta đang xây dựng một tập hợp các thông báo có nội dung văn bản được đánh dấu giống như sau

Văn bản này chứa một thông báo Ngẫu nhiên quan trọng

Văn bản này chứa một thông báo Thành công quan trọng.

Văn bản này có văn bản Cảnh báo quan trọng.

Văn bản này có thông báo Lỗi quan trọng.

Yêu cầu của chúng tôi như sau

Văn bản được đánh dấu phải được in đậm và lớn
Văn bản bình thường sẽ được đánh dấu màu xanh lam. Các trạng thái Thành công, Cảnh báo, Lỗi sẽ có màu Xanh lục, Vàng/Vàng, Đỏ tương ứng

Chúng tôi nhanh chóng lưu ý rằng các văn bản quan trọng bình thường của chúng tôi có cỡ chữ lớn và màu xanh lam

.important {
  font-size: 1.5rem;
  color: blue;
}

Tiếp tục, chúng tôi nhận thấy rằng các văn bản thành công, cảnh báo và lỗi có cùng kích thước phông chữ mặc dù màu sắc khác nhau. Thay vì tạo một lớp riêng biệt là

/* Multiple Selectors Demonstration */

span.file-icon:not(.selected):hover,
.file-icon:not(.selected):hover .page-turn {
  border-color: lightgreen;
}

.file-icon:not(.selected):hover .line {
  background-color: lightgreen;
}

span.file-icon.selected {
  background-color: lightgreen;
}

.avatar:not(.selected):hover {
  border-color: lightgreen;
}

.avatar.selected .head,
.avatar.selected .body {
  background-color: lightgreen;
}

/* UI styling */
* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgba(72, 171, 224, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.file-sharing-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background-color: white;
  width: 80%;
  height: 80%;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0px 0px 15px 9px lightgray;
}

span.file-icon {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  height: 20vh;
  width: 16vh;
  margin: 5px;
  border: 2px solid black;
  border-radius: 5px;
  border-top-right-radius: 20px;
  cursor: pointer;
}

.file-icon .page-turn {
  display: inline-block;
  height: 35%;
  width: 30%;
  position: absolute;
  right: 0;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

.content-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 30%;
}

.content-lines .line {
  height: 1px;
  background: black;
}

.avatar {
  display: inline-block;
  position: relative;
  display: inline-block;
  height: 20vh;
  width: 20vh;
  margin: 5px;
  border: 2px solid black;
  border-radius: 50%;
  cursor: pointer;
}

.avatar .head {
  display: inline-block;
  position: absolute;
  display: inline-block;
  height: 30%;
  width: 30%;
  border: 2px solid transparent;
  border-radius: 20px;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  background: #48abe0;
}

.avatar .body {
  display: inline-block;
  position: absolute;
  height: 25%;
  width: 50%;
  border: 2px solid transparent;
  border-radius: 10vh 10vh 0 0;
  top: 53%;
  left: 50%;
  transform: translateX(-50%);
  background: #48abe0;
}

2 và lặp lại các kiểu bên cạnh màu duy nhất, chúng ta có thể chia sẻ các kiểu chồng chéo và ghi đè các kiểu duy nhất bằng cách sử dụng nhiều bộ chọn lớp

.important.success {
  color: green;
}

.important.warning {
  color: gold;
}

.important.error {
  color: red;
}

Đây là một ví dụ cơ bản với rất ít thuộc tính. Nhưng trong các cơ sở mã trong thế giới thực, giá trị bổ sung này có thể tiết kiệm một lượng lớn mã khỏi sự trùng lặp

Phần kết luận

CSS cung cấp phương pháp nhắm mục tiêu rất hiệu quả bằng cách sử dụng nhiều bộ chọn lớp. Cách tiếp cận này cho phép dễ dàng tách biệt các kiểu cho các thành phần khác nhau trong khi sử dụng lại tên của các lớp. Điều này đặc biệt hữu ích nếu tên mong muốn đại diện cho một trạng thái chung chung (chẳng hạn như .selected trong ví dụ trên) nhưng các yêu cầu về kiểu dáng lại khác. Nó thậm chí còn tăng thêm giá trị khi chúng ta cần chia sẻ một số kiểu trên nhiều phần tử

Chia sẻ trên Twitter · Chia sẻ trên Facebook

UnusedCSS giúp chủ sở hữu trang web loại bỏ CSS không sử dụng của họ mỗi ngày. Đăng ký để xem bạn có thể loại bỏ bao nhiêu

Bạn có thể có bao nhiêu lớp trong CSS?

Không có giới hạn kỹ thuật (ngoại trừ dung lượng bộ nhớ mà trình duyệt có thể đang sử dụng), nhưng người ta nên cân nhắc kỹ lưỡng việc có nhiều lớp trên bất kỳ phần tử nào vì trình duyệt sẽ phải .

Bạn có thể có 2 lớp trong một div không?

Nhiều lớp . Để định nghĩa nhiều lớp, hãy phân tách các tên lớp bằng dấu cách, e. g.

. Phần tử sẽ được tạo kiểu theo tất cả các lớp được chỉ định. HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g.

. The element will be styled according to all the classes specified.

Bạn có thể có nhiều lớp có cùng tên CSS không?

Nếu bạn có hai tệp CSS chứa cùng tên lớp thì thuộc tính của cả hai sẽ được áp dụng theo kiểu kết hợp . Nếu cả hai khai báo lớp chia sẻ cùng một thuộc tính, thì thuộc tính cho tệp được liên kết cuối cùng sẽ được áp dụng. Bất kỳ thuộc tính nào chỉ được khai báo trong một trong các tệp CSS sẽ được áp dụng.

programming css

CSS có thể có hai lớp không?

Phần kết luận

Bạn có thể có bao nhiêu lớp trong CSS?

Bạn có thể có 2 lớp trong một div không?

Bạn có thể có nhiều lớp có cùng tên CSS không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội