CSS lớp đang hoạt động

Lớp giả là hiển thị trạng thái khác nhau của một phần tử hoặc bộ chọn css. Lớp giả hoạt động là để chỉ ra rằng phần tử đang ở trạng thái hoạt động

Lớp giả này chủ yếu được liên kết với liên kết và nút hoặc bất kỳ phần tử nào khác có thể hoạt động

Ví dụ: nếu nó được liên kết với liên kết thì liên kết đó đang hoạt động

cú pháp

a:active { color:green;}

Hãy kiểm tra việc sử dụng thực tế của. lớp giả đang hoạt động với các kịch bản khác nhau, như sau -

Ví dụ

Bản thử trực tiếp

   


   Click here to learn

Giải trình

Khi bạn nhìn thấy liên kết lần đầu tiên, nó sẽ được hiển thị với màu liên kết bình thường (Xanh lam) và liên kết sẽ chuyển sang màu xanh lục nếu liên kết này đã được truy cập một lần

   


   Click here to learn

5 là một lớp giả CSS. Nó chỉ định và chọn một phần tử dựa trên một trạng thái—trạng thái hoạt động—và được sử dụng để áp dụng các kiểu cho một phần tử khi nó khớp với trạng thái đó

Lớp giả

   


   Click here to learn

5 là một lớp động áp dụng khi một phần tử đang được kích hoạt bởi người dùng. Nó thường được sử dụng để nhắm mục tiêu và tạo kiểu cho một phần tử khi nó đang hoạt động (như tên gợi ý). Cụ thể hơn, nó nhắm mục tiêu một phần tử (thường là một liên kết neo

   


   Click here to learn

7) giữa thời điểm nó được nhấp vào và thời điểm nó được giải phóng

Tạo kiểu cho một phần tử ở trạng thái hoạt động cho phép trải nghiệm người dùng tốt hơn vì trang sẽ đưa ra phản hồi cho người dùng khi nhấp vào một phần tử. Nếu không có loại phản hồi này, người dùng có thể cho rằng hành động của mình không thành công, vì họ sẽ không có dấu hiệu trực quan nào để xác nhận liệu nhấp chuột có thành công hay không và cuối cùng có thể nhấp vào thành phần nhiều lần liên tiếp

Lớp giả

   


   Click here to learn

5 chủ yếu được sử dụng để tạo kiểu cho các liên kết neo, nhưng nó cũng có thể được sử dụng để tạo kiểu cho bất kỳ phần tử nào khác trên trang, ngay cả phần tử gốc (

   


   Click here to learn

9). Ví dụ: ví dụ sau sẽ áp dụng nền màu xám nhạt cho tất cả các đoạn văn bản khi chúng được nhấp vào

p:active {
    background-color: #aaa;
}
                

Khi

   


   Click here to learn

5 được sử dụng để tạo kiểu cho các liên kết, nó được ưu tiên sử dụng cùng với ba lớp giả khác cũng được sử dụng để tạo kiểu cho các trạng thái liên kết khác nhau.

p:active {
    background-color: #aaa;
}
                

1,

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

0 và

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

1. Tham khảo các mục riêng lẻ của từng lớp giả để biết thêm thông tin và ví dụ

Câu đố & Ghi chú

Một phần tử có thể là cả

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

0 và

   


   Click here to learn

5 (hoặc

p:active {
    background-color: #aaa;
}
                

1 và

   


   Click here to learn

5)

Khi bốn lớp giả kiểu liên kết được sử dụng, chúng tốt nhất nên được sử dụng theo thứ tự sau.

p:active {
    background-color: #aaa;
}
                

1,

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

0,

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

1 và

   


   Click here to learn

5. Ví dụ

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

Có thể dễ dàng ghi nhớ thứ tự trên bằng cách sử dụng các thuật nhớ như “Có sẵn chiếc mũ cổ điển cuối cùng”. Bạn có thể tạo cái của riêng mình tại spacefm. com

Thứ tự này được ưu tiên vì nếu không, một số kiểu trạng thái có thể ghi đè lên các kiểu trạng thái khác, do đó khiến chúng không hoạt động như mong đợi. Ví dụ: nếu bạn định kiểu trạng thái

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

0 sau cùng, nó sẽ ghi đè trạng thái

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

1 và

   


   Click here to learn

5 của liên kết và kiểu

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

0 sẽ áp dụng bất kể liên kết đang được di chuột hay nhấp vào

Ngoài bốn trạng thái đã đề cập, bạn có thể (đọc. nên, để có khả năng truy cập tốt hơn) cũng tạo kiểu cho các liên kết khi chúng được tập trung. Để làm điều đó, lớp giả

   


   Click here to learn

24 được sử dụng. Và để nhớ thứ tự, bạn có thể thêm “fur” vào giữa câu trước. “Mũ lông cổ điển cuối cùng có sẵn”. Bạn có thể đọc thêm về lớp giả

   


   Click here to learn

24 trong mục nhập của nó

Trên các hệ thống có nhiều hơn một nút chuột,

   


   Click here to learn

5 chỉ áp dụng cho nút kích hoạt chính (thường là nút chuột “trái”) và bất kỳ bí danh nào của chúng

ví dụ

Phần sau đặt kiểu trạng thái

   


   Click here to learn

5 cho các liên kết neo và các thành phần khác trên trang web. Bạn có thể áp dụng bất kỳ loại phong cách nào cho

   


   Click here to learn

5 trạng thái

   


   Click here to learn

2

Bản thử trực tiếp

Xem bản demo này trên Codrops Playground

Hỗ trợ trình duyệt

Hỗ trợ cho lớp giả

   


   Click here to learn

5 khác nhau tùy thuộc vào phần tử mà nó được áp dụng

Áp dụng

   


   Click here to learn

5 cho phần tử neo

   


   Click here to learn

7 được hỗ trợ trong tất cả các trình duyệt chính. Chrome, Firefox, Safari, Opera, Internet Explorer và trên Android và iOS

Áp dụng

   


   Click here to learn

5 cho bất kỳ phần tử nào trên trang được hỗ trợ trong. Chrome, Firefox, Opera, Internet Explorer 8+ và trên Android

Lớp học tích cực là gì?

Tại sao nên sử dụng CSS hoạt động?

Đâu là sự khác biệt giữa activevà. CSS đang hoạt động?

Làm cách nào để có được lớp đang hoạt động trong JavaScript?