Thí dụ
Chọn và tạo kiểu liên kết hoạt động:
A: Hoạt động {& nbsp; Màu nền: Vàng; }
background-color: yellow;
}
Hãy tự mình thử »
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
Bộ chọn :active
được sử dụng để chọn và tạo kiểu liên kết hoạt động.
Một liên kết sẽ hoạt động khi bạn nhấp vào nó.
Mẹo: Bộ chọn hoạt động có thể được sử dụng trên tất cả các yếu tố, không chỉ các liên kết. The :active selector can be used on all elements, not only links.
Mẹo: Sử dụng bộ chọn liên kết: Liên kết kiểu đến các trang không được biết đến,: Bộ chọn đã truy cập đến các liên kết kiểu đến các trang đã truy cập và: Bộ chọn Hover để liên kết kiểu khi bạn chuột qua chúng. Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.
Lưu ý :: Hoạt động phải đến sau: Di chuột [nếu có] trong định nghĩa CSS để có hiệu quả! :active MUST come after :hover [if present] in the CSS definition in order to be effective!
CSS1 |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn bộ chọn.
:tích cực | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS Cú pháp
: Active {& nbsp; & nbsp; css khai báo;}
css declarations;
}
Nhiều ví dụ hơn
Thí dụ
Chọn và tạo kiểu A và phần tử khi bạn nhấp vào nó:
P: Active, H2: Active, A: Active {& nbsp; Màu nền: Vàng; }
background-color: yellow;
}
Hãy tự mình thử »
Thí dụ
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
a:link {
color: green;
}
Bộ chọn :active
được sử dụng để chọn và tạo kiểu liên kết hoạt động.
a:visited {
color: green;
}
Một liên kết sẽ hoạt động khi bạn nhấp vào nó.
a:hover {
color: red;
}
Mẹo: Bộ chọn hoạt động có thể được sử dụng trên tất cả các yếu tố, không chỉ các liên kết.
a:active {
color: yellow;
}
Hãy tự mình thử »
Thí dụ
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
color: red;
}
Bộ chọn :active
được sử dụng để chọn và tạo kiểu liên kết hoạt động.
font-size: 150%;
}
Hãy tự mình thử »
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
Bộ chọn :active
được sử dụng để chọn và tạo kiểu liên kết hoạt động.
DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!
Bộ chọn giả :active
thay đổi sự xuất hiện của một liên kết trong khi nó được kích hoạt [được nhấp vào hoặc được kích hoạt khác]. Nó thường chỉ được nhìn thấy trong một giây và cung cấp phản hồi trực quan rằng phần tử thực sự được nhấp. Nó thường được sử dụng nhất trên các liên kết neo [].
Chẳng hạn, ở đây, CS CS sẽ tạo ra các liên kết neo hạ xuống một pixel [tạo ấn tượng về việc bị đẩy trong không gian ba chiều] ở trạng thái hoạt động:
:active
cũng có thể áp dụng cho bất kỳ yếu tố nào. Trong bút bên dưới, nhấp vào bất cứ nơi nào trên trang sẽ làm cho toàn bộ trang màu vàng:
Đó là cách thực hành tốt nhất để bao quát tất cả các quốc gia trên mạng, đặc biệt là đối với các liên kết. Một cách dễ dàng để làm điều đó là "tình yêu ghét" hoặc
- L
:link
:link
- O
- V
:visited
:visited
- E
- H
p:active { background-color: #aaa; }
0p:active { background-color: #aaa; }
0 - A
:active
:active
- T
- E
H
p:active { background-color: #aaa; }0
a:link { /* Essentially means a[href], or that the link actually goes somewhere */
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}
A :active
T
Trình duyệt Chrome | Trình duyệt Chrome | Trình duyệt Chrome | Trình duyệt Chrome | Trình duyệt Chrome | Trình duyệt Chrome |
Trình duyệt Chrome | Trình duyệt Chrome | Trình duyệt Chrome | Trình duyệt Chrome | Trình duyệt Chrome |
Pseudo-Class :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 đó.: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;
}
7] giữa thời gian nó được nhấp vào và thời gian nó được phát hành.active [as the name suggests]. More specifically, it targets an element [usually an anchor link
p:active {
background-color: #aaa;
}
7] between the time it is clicked on and the time it is released.
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; }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 trong khi chúng đang được nhấp vào:
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; }0. 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ụ.
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; }0 và
:active
. Ví dụ: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 }6 được sử dụng. Và để ghi nhớ thứ tự, bạn có thể thêm Fur Fur ở giữa câu trước: Mũ Fur Fur cuối cùng có sẵn. Bạn có thể đọc thêm về lớp giả pseudo trong mục nhập của nó.Last Vintage Fur Hat Available”. You can read more about the
a:active { background-color: black; color: white; } p:active { border: 2px dotted BlanchedAlmond; } body:active { border: 5px solid }6 pseudo-class in its entry.
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; }7 được hỗ trợ trong tất cả các trình duyệt chính: Chrome, Firefox, Safari, Opera, Internet Explorer và On Android và iOS.
Á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.