2011-02-18 24 views
8

Tôi đang tìm kiếm here tại CSS: chọn hoạt động.Bối rối bởi CSS giả lớp: hoạt động

Các: phong cách chọn hoạt động liên kết đến trang hoạt động

mà tôi đã suy nghĩ, những gì heck là một 'trang tích cực' trong thuật ngữ HTML/CSS ...

Tại đây tôi đã đi đến phần w3docs Phần: 5.11.3 Các lớp giả động:: hover,: active, và: focus.

Các: hoạt động pseudo-class áp dụng trong khi một yếu tố đang được kích hoạt bởi người sử dụng . Ví dụ: giữa các lần người dùng nhấn nút chuột và sẽ giải phóng nó.

Vì vậy, tôi đã sử dụng một trong những w3shools try it pages và hack cùng một ví dụ, thay thế đoạn mã sau, mà bạn chỉ có thể cắt dán & và thử.

<html> 
<head> 
<style type="text/css"> 
:focus,:active 
{ 
outline-offset: 10px; 
outline: solid; 
} 
</style> 
</head> 

<body> 
<p>Click the links to see the background color become yellow:</p> 
<a href="http://www.w3schools.com">w3schools.com</a> 
<a href="http://www.wikipedia.org">wikipedia.org</a> 
<button type="button">Click Me!</button> 
<form> 
<input type="text"/> 
</form> 
</body> 
</html> 

Trường biểu mẫu hoạt động cho: lấy nét. Nhưng nút hoặc liên kết không hoạt động cho: hoạt động.

Tại sao lại như vậy? Có một cái gì đó về 'trang hoạt động' Tôi không hiểu rằng w3schools nói về.

Tôi đã thấy số này nice tip khi Googling cho nó, nhưng tôi không nghĩ rằng nó có liên quan.

Trả lời

25

Không có khái niệm về "trang hoạt động" trong CSS. Trong thực tế, đã bóc trần SitePoint Reference này bằng cách nói:

Các pseudo-class không không biểu thị một liên kết đến các hoạt động, hoặc hiện tại, trang đó là một quan niệm sai lầm phổ biến trong người mới bắt đầu CSS.

gì spec nói là đúng: :active chỉ đơn giản là phong cách nhân tố này đang kích hoạt, ví dụ được nhấp (như trong ví dụ đã cho) hoặc theo cách khác được kích hoạt sao cho trình duyệt bắt đầu điều hướng đến mục tiêu của liên kết.

Lưu ý rằng nó không chỉ áp dụng cho các yếu tố <a>; nó có thể áp dụng cho bất kỳ phần tử không phải là hình thức đầu vào nào được nhấp vào. Ví dụ: bạn có thể làm điều này:

p:active { 
    color: red; 
} 

Và bất kỳ đoạn nào bạn nhấp vào sẽ nhấp nháy văn bản màu đỏ. Tuy nhiên,

Lưu ý rằng định nghĩa và triển khai chính xác được để lại cho trình duyệt, nhưng nói chung là, bạn có thể dựa vào các yếu tố có trạng thái được kích hoạt <a>.

1

:active là kiểu được gán cho một phần tử (ví dụ: a hoặc nút) khi chuột được giữ trên nó.Bạn có thể đã nhìn thấy nó hiển thị trên một số trang web khi bạn nhấp vào một nút theo kiểu; khi bạn thực sự nhấp vào nút, nút này có thể thay đổi. Đây là lớp học giả :active.

+0

Tôi đã hiểu điều đó rồi. Đó là trang hoạt động gây hiểu lầm mà w3schools đến với điều đó đã ném tôi. Đã được đề cập ở trên bởi @zzzBov & @ BoltClock – JGFMK

0

Tôi đã luôn sử dụng :active cho các liên kết. Việc phân chia thứ hai trước khi trình duyệt sẽ đưa bạn đến trang bạn vừa nhấp vào, văn bản sẽ chuyển sang màu mà bạn gọi a:active{ ... }

Ví dụ:

a:active { color:pink; font-weight:bold; } 

Hầu hết các trình duyệt hỗ trợ nó, nhưng nó thực sự không đáng thời gian của bạn để tạo kiểu cho nó. Quay lại trong ngày 56k quay số nó là một điều tốt đẹp để có trực quan cho thấy rằng liên kết người dùng nhấp vào đã được tải.

Các vấn đề liên quan