Tidadigi Logo

CSS ::selection Selector

CSS pseudo-element ::selection cho phép bạn tạo kiểu cho phần trang web được bôi đen. Người dùng thường bôi đen khi kéo chuột qua văn bản. Đây là cách đơn giản để tùy chỉnh giao diện văn bản, cải thiện trải nghiệm người dùng. Tuy nhiên, chỉ một vài thuộc tính CSS được dùng với ::selection như color background cursor và outline.

::selection Selector là gì?

Pseudo-element ::selection áp dụng các kiểu cụ thể cho phần trang web mà người dùng chọn. Điều này đặc biệt hữu ích để tăng tính dễ đọc và hấp dẫn của văn bản được bôi đen.

Cú pháp

::selection {
    // CSS Property
}

Ví dụ về CSS ::selection Selector

Ví dụ: Ví dụ này minh họa cách ::selection được dùng để đổi màu chữ thành trắng. Đồng thời đổi nền thành xanh lá khi người dùng bôi đen bất kỳ văn bản nào trên trang.

html 
<!DOCTYPE html>
<html>

<head>
    <title>::selection Selector</title>
    <style>
        h1 {
            color: green;
        }

        body {
            text-align: center;
        }

        /* CSS property for Firefox */
        ::-moz-selection {
            color: white;
            background: green;
        }

        ::selection {
            color: white;
            background: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>::selection selector</h2>
    <p>A Computer Science portal for geeks </p>
</body>

</html>

Đầu ra:

 css-selection-selector

Trình duyệt được hỗ trợ

::selection selector được hỗ trợ bởi các trình duyệt sau:

  • Apple Safari 1.1 trở lên
  • Google Chrome 1.0 trở lên
  • Edge 12.0 trở lên
  • Firefox 62.0 trở lên
  • Opera 9.5 trở lên

Lưu ý: Với các phiên bản Firefox cũ, hãy dùng ::-moz-selection selector để đảm bảo tính năng hoạt động tốt.


Last Updated : 21/07/2025