Computer >> Máy Tính >  >> Lập trình >> CSS

:lớp giả hoạt động trong CSS

Lớp giả là hiển thị trạng thái khác nhau của một phần tử hoặc một bộ chọn css. Lớp giả hoạt động là để hiển thị 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 tình huống khác nhau, như sau -

Ví dụ

<html>
<head>
   <style>
      a:active { color:green;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

Giải thích

Khi bạn nhìn thấy liên kết lần đầu, 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.

Ví dụ

<html>
<head>
   <style>
      a:active {font-size:20px;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

Giải thích

Thao tác này sẽ thay đổi kích thước phông chữ của liên kết thành 20px khi bạn nhấp vào liên kết.

Ví dụ

<html>
<head>
   <style>
      body:active {
         background: seagreen;
      }
      </style>
</head>
<body>
<div>click anywhere in this window</div>
</body>
</html>

Giải thích

Khi bạn nhấp vào bất kỳ đâu trên màn hình, màu nền sẽ thay đổi thành màu xanh lam.

Ví dụ

<html>
<head>
   <style>
      #thisButton:active { color: red}
   </style>
</head>
<body>
   <button id="thisButton">Click Me!!</button>
</body>
</html>

Giải thích

Màu phông chữ của văn bản nút sẽ thay đổi thành màu đỏ khi bạn nhấp vào nút.

Khả năng tương thích của trình duyệt

Chrome Firefox Cạnh IE Safari Opera
1 1 4 1 5