Các lớp giả CSS với các kiểu nội tuyến

Có thể có các lớp giả sử dụng các kiểu nội tuyến không?

Thí dụ:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Tôi biết HTML ở trên sẽ không hoạt động nhưng có cái gì đó tương tự sẽ không?

PS Tôi biết tôi nên sử dụng một biểu định kiểu bên ngoài, và tôi làm. Tôi chỉ tò mò nếu điều này có thể được thực hiện bằng cách sử dụng phong cách nội tuyến.

Không, điều này là không thể. Trong các tài liệu sử dụng CSS, một stylethuộc tính nội tuyến chỉ có thể chứa các khai báo thuộc tính; cùng một tập hợp các câu lệnh xuất hiện trong mỗi bộ quy tắc trong biểu định kiểu. Từ thông số Thuộc tính Kiểu :

Giá trị của thuộc tính style phải khớp với cú pháp của nội dung của khối khai báo CSS (không bao gồm dấu ngoặc phân cách), có ngữ pháp chính thức được đưa ra dưới đây trong các điều khoản và quy ước của ngữ pháp lõi CSS :

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

Không được phép chọn (bao gồm các phần tử giả), cũng không theo quy tắc, cũng không được phép xây dựng CSS nào khác.

Hãy nghĩ về các kiểu nội tuyến như các kiểu được áp dụng cho một số bộ chọn ID siêu cụ thể ẩn danh: các kiểu đó chỉ áp dụng cho một phần tử đó với stylethuộc tính. (Chúng cũng được ưu tiên hơn so với bộ chọn ID trong biểu định kiểu, nếu phần tử đó có ID đó.) Về mặt kỹ thuật, nó không hoạt động như thế; điều này chỉ để giúp bạn hiểu tại sao thuộc tính không hỗ trợ các kiểu phần tử giả hoặc lớp giả (nó có liên quan nhiều hơn đến cách các lớp giả và các phần tử giả cung cấp sự trừu tượng của cây tài liệu không thể biểu thị trong ngôn ngữ tài liệu).

Lưu ý rằng các kiểu nội tuyến tham gia vào cùng một tầng với các bộ chọn trong các bộ quy tắc và được ưu tiên cao nhất trong các tầng ( !importantmặc dù). Vì vậy, họ được ưu tiên ngay cả trên các tiểu bang giả. Cho phép các lớp giả hoặc bất kỳ bộ chọn nào khác trong các kiểu nội tuyến có thể sẽ đưa ra một mức độ tầng mới và với nó là một loạt các biến chứng mới.

Cũng lưu ý rằng các bản sửa đổi rất cũ của thông số Kiểu Thuộc tính ban đầu đã đề xuất cho phép điều này , tuy nhiên nó đã bị loại bỏ, có lẽ vì lý do nêu trên hoặc vì việc triển khai nó không phải là một lựa chọn khả thi.

Không phải CSS, mà là nội tuyến:

<a href="#" 
   onmouseover = "this.style.textDecoration = 'none'"
   onmouseout  = "this.style.textDecoration = 'underline'">Hello</a>

Xem ví dụ →

Thay vì cần nội tuyến, bạn có thể sử dụng CSS nội bộ

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Bạn có thể có:

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>

Bạn có thể thử https://hacss.io :

<a href="http://www.google.com" class=":hover{text-decoration:none;}">Google</a>

Bản giới thiệu