Hướng dẫn what does active in css mean? - hoạt động trong css nghĩa là gì?

:active là một lớp giả CSS. Nó chỉ định và chọn một phần tử dựa trên trạng thái 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ó phù hợp với trạng thái đó.

Pseudo-Class :active là một lớp động được áp dụng khi một phần tử đang được người dùng kích hoạt. Nó thường được sử dụng để nhắm mục tiêu và tạo kiểu cho một yếu tố khi nó hoạt động (như tên cho thấy). 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

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

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

Kiểu một phần tử ở trạng thái hoạt động của nó cho phép trải nghiệm người dùng tốt hơn, vì trang sẽ cung cấp 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 cô không thành công, vì cô sẽ không có tín hiệu trực quan để 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 phần tử nhiều lần liên tiếp.

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

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

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

Khi :active được sử dụng để tạo kiểu liên kết, người ta ưa thích rằng nó được 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: :link, :visited và

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

Trivia & ghi chú

Một yếu tố có thể là cả :visited và :active (hoặc :link và :active).

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

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

a:link {
    /* style links */
}

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

a:hover {
    /* hover styles */
}

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

Thứ tự trên có thể dễ dàng ghi nhớ bằng cách sử dụng mnemonics như chiếc mũ cổ điển cuối cùng có sẵn. Bạn có thể tạo một cái của riêng bạn tại SpaceFM.com.Last Vintage Hat Available”. You can create your own one over at spacefm.com.

Thứ tự này được ưa thích vì nếu không một số phong cách trạng thái có thể ghi đè các phong cách trạng thái khác, do đó làm cho chúng không hoạt động như mong đợi. Ví dụ: nếu bạn định kiểu trạng thái :visited cuối cùng, nó sẽ ghi đè lên các trạng thái ____10 và :active của liên kết và các kiểu :visited sẽ được áp dụng bất kể liên kết có được lơ lửng hay nhấp chuột hay không.

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

a:active {
    background-color: black;
    color: white;
}

p:active {
    border: 2px dotted BlanchedAlmond;
}

body:active {
    border: 5px solid
}
                

a:active {
    background-color: black;
    color: white;
}

p:active {
    border: 2px dotted BlanchedAlmond;
}

body:active {
    border: 5px solid
}
                

Trên các hệ thống có nhiều nút chuột, :active chỉ áp dụng cho nút kích hoạt chính (thường là nút chuột trái bên trái) và bất kỳ bí danh nào của chúng.

Ví dụ

Sau đây đặt các kiểu trạng thái :active cho các liên kết neo và các yếu tố khác trên một trang web. Bạn có thể áp dụng bất kỳ loại kiểu cho các tiểu bang :active.

a:active {
    background-color: black;
    color: white;
}

p:active {
    border: 2px dotted BlanchedAlmond;
}

body:active {
    border: 5px solid
}
                

Hỗ trợ trình duyệt

Hỗ trợ cho lớp giả pseudo khác nhau tùy thuộc vào phần tử mà nó được áp dụng.

Áp dụng :active cho phần tử neo

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

Áp dụng :active cho bất kỳ yếu tố nào trên trang được hỗ trợ trong: Chrome, Firefox, Opera, Internet Explorer 8+ và trên Android.any element on the page is supported in: Chrome, Firefox, Opera, Internet Explorer 8+, and on Android.