Loại nút trong CSS là gì?

Có rất nhiều điều cần biết về các liên kết và các nút trong HTML. Có triển khai đánh dấu và các thuộc tính liên quan, các cách thực hành tốt nhất về kiểu dáng, những điều cần tránh và các mối quan hệ họ hàng thậm chí còn nhiều sắc thái hơn của liên kết. các nút và đầu vào giống như nút

Chúng ta hãy xem toàn bộ thế giới của các liên kết và nút cũng như tất cả các cân nhắc về các lớp HTML, CSS, JavaScript, thiết kế và khả năng truy cập đi kèm với chúng. Có rất nhiều cạm bẫy và thực hành xấu để tránh trên đường đi. Bằng cách bao phủ nó, chúng tôi sẽ có một triển khai UX hoàn chỉnh tốt cho cả hai yếu tố

Hướng dẫn nhanh về thời điểm sử dụng từng

• Bạn có đang cung cấp cho người dùng một cách để đi đến một trang khác hoặc một phần khác của cùng một trang không?
• Bạn có đang thực hiện một hành động có thể nhấp được hỗ trợ bởi JavaScript không?
• Bạn đang gửi biểu mẫu?

liên kết

Liên kết là một trong những khối xây dựng nền tảng và cơ bản sâu sắc nhất của web. Nhấp vào một liên kết và bạn chuyển sang một trang khác hoặc được chuyển đến một nơi khác trong cùng một trang

Mục lục

• triển khai HTML
• Cân nhắc về kiểu dáng và CSS
• Cân nhắc về JavaScript
• cân nhắc về khả năng tiếp cận

triển khai HTML

Liên kết cơ bản

CSS-Tricks

Đó là một liên kết đến một URL "đủ điều kiện" hoặc "tuyệt đối"

Liên kết tương đối

Bạn cũng có thể liên kết “tương đối”

About

Điều đó có thể hữu ích, chẳng hạn như trong quá trình phát triển khi tên miền có thể khác với trang sản xuất, nhưng bạn vẫn muốn có thể nhấp vào liên kết. URL tương đối hữu ích nhất cho những thứ như điều hướng, nhưng hãy cẩn thận khi sử dụng chúng trong nội dung — như bài đăng trên blog — nơi nội dung đó có thể được đọc bên ngoài trang web, chẳng hạn như trong ứng dụng hoặc nguồn cấp dữ liệu RSS

Một liên kết nhảy

Các liên kết cũng có thể là "liên kết băm" hoặc "liên kết nhảy" bằng cách bắt đầu bằng một số

a:not[[href]] {
  /* style a "disabled" link */
}

0

Section Two

Nhấp vào liên kết đó sẽ "nhảy" [cuộn] đến phần tử đầu tiên trong DOM có ID khớp, giống như phần tử phần ở trên

💥 Mẹo nhỏ. Sử dụng một liên kết băm [e. g.

a:not[[href]] {
  /* style a "disabled" link */
}

1] trong quá trình phát triển có thể hữu ích để bạn có thể nhấp vào liên kết mà không bị đưa trở lại đầu trang giống như khi nhấp vào liên kết

a:not[[href]] {
  /* style a "disabled" link */
}

0. Nhưng hãy cẩn thận, các liên kết không liên kết ở bất cứ đâu sẽ không bao giờ được đưa vào sản xuất

💥 Mẹo nhỏ. Liên kết nhảy đôi khi có thể được hưởng lợi từ việc cuộn mượt mà để giúp mọi người hiểu rằng trang đang di chuyển từ nơi này sang nơi khác

Việc nhìn thấy liên kết “Trở lại đầu trang” trên các trang web là một điều khá phổ biến, đặc biệt khi các điều khiển điều hướng quan trọng ở trên cùng nhưng có khá nhiều nội dung để cuộn [hoặc điều hướng] qua. Để tạo một liên kết nhảy, hãy liên kết đến ID của một phần tử ở đầu trang nơi có thể gửi tiêu điểm trở lại

Back to Top

Liên kết nhảy đôi khi cũng được sử dụng để liên kết đến các phần tử neo [

a:not[[href]] {
  /* style a "disabled" link */
}

3] khác không có thuộc tính

a:not[[href]] {
  /* style a "disabled" link */
}

4. Chúng được gọi là các liên kết “giữ chỗ”

About

0

Chỉ cần nhìn ở trên, bạn có thể thấy có bao nhiêu công việc giả mạo một liên kết và đó là trước khi bạn xem xét đó là lỗi nhấp chuột phải, không cho phép mở trong tab mới, không hoạt động với Chế độ tương phản cao của Windows và trình đọc khác . Khá xấu

Vai trò ARIA hữu ích để chỉ ra trang hiện tại, như

About

1

Bạn có nên sử dụng thuộc tính

a:not[[href]] {
  /* style a "disabled" link */
}

22 không?

Chắc là không. Lưu phần này để đặt cho

a:not[[href]] {
  /* style a "disabled" link */
}

23 một tiêu đề ngắn gọn, mang tính mô tả

About

2

a:not[[href]] {
  /* style a "disabled" link */
}

22 cung cấp cửa sổ bật lên giao diện người dùng được kích hoạt khi di chuột hiển thị văn bản bạn đã viết. Bạn không thể tạo kiểu cho nó và nó không thực sự dễ truy cập

Kích hoạt di chuột là cụm từ khóa ở đây. Nó không sử dụng được trên mọi thiết bị chỉ cảm ứng. Nếu một liên kết cần thêm thông tin theo ngữ cảnh, hãy cung cấp thông tin đó trong nội dung thực xung quanh liên kết hoặc sử dụng văn bản mô tả chính liên kết đó [trái ngược với nội dung như “Nhấp vào đây”]

Liên kết chỉ có biểu tượng

Nếu một liên kết chỉ có một biểu tượng bên trong nó, như

About

3

Đó là không đủ thông tin theo ngữ cảnh về liên kết, đặc biệt là vì lý do truy cập, nhưng có khả năng cho bất kỳ ai. Liên kết với văn bản hầu như luôn rõ ràng hơn. Nếu bạn hoàn toàn không thể sử dụng văn bản, bạn có thể sử dụng một mẫu như

About

4

a:not[[href]] {
  /* style a "disabled" link */
}

25 là một lớp được sử dụng để ẩn trực quan văn bản nhãn bằng CSS

About

5

Không giống như

a:not[[href]] {
  /* style a "disabled" link */
}

26, văn bản ẩn trực quan có thể được dịch và sẽ hiển thị tốt hơn trong các chế độ duyệt chuyên dụng

Liên kết xung quanh hình ảnh

Hình ảnh có thể là liên kết nếu bạn bọc chúng trong một liên kết. Không cần sử dụng văn bản thay thế để nói rằng hình ảnh là một liên kết, vì công nghệ hỗ trợ sẽ làm điều đó rồi

About

6

Liên kết xung quanh khối nội dung lớn hơn

Bạn có thể liên kết toàn bộ khu vực nội dung, như

About

7

Nhưng tất nhiên, có những hàm ý về trải nghiệm người dùng. Ví dụ: có thể khó chọn văn bản hơn và toàn bộ phần tử cần kiểu dáng khá phức tạp để tạo trạng thái di chuột và tiêu điểm rõ ràng. Ngoài ra còn có ý nghĩa về khả năng truy cập, chẳng hạn như nội dung của toàn bộ thẻ được đọc trước khi thông báo dưới dạng liên kết

Đây là một ví dụ với hai cách tiếp cận. Đầu tiên bao bọc toàn bộ thẻ trong một liên kết. Điều này là hợp lệ, nhưng hãy nhớ những hàm ý. Cái thứ hai có một liên kết bên trong tiêu đề và liên kết đó có một phần tử giả trên đó bao phủ toàn bộ thẻ. Điều này cũng có ý nghĩa [chẳng hạn như hơi khó chọn văn bản], nhưng có lẽ được mong đợi nhiều hơn đối với công nghệ hỗ trợ

Dự phòng nhúng CodePen

Ví dụ thứ hai cũng mở ra khả năng bao gồm nhiều liên kết. Bạn không thể lồng các liên kết, vì vậy mọi thứ sẽ hơi rắc rối nếu bạn cần. Tuy nhiên, có thể thực hiện được bằng cách đặt các liên kết riêng lẻ phía trên liên kết phủ thẻ bằng chỉ mục z

Cân nhắc về kiểu dáng và CSS

Đây là giao diện mặc định của một liên kết

About8

Đôi khi việc chọn và tạo kiểu cho tất cả các liên kết trên một trang hơi nặng tay, vì các liên kết trong điều hướng có thể được xử lý hoàn toàn khác với các liên kết trong văn bản. Bạn luôn có thể chọn phạm vi bộ chọn để nhắm mục tiêu các liên kết trong các khu vực cụ thể như

About

9

Hoặc chọn liên kết trực tiếp để tạo kiểu

Section Two

0

trạng thái liên kết

Liên kết là các yếu tố có thể tập trung. Nói cách khác, chúng có thể được chọn bằng cách sử dụng phím

a:not[[href]] {
  /* style a "disabled" link */
}

27 trên bàn phím. Liên kết có lẽ là yếu tố phổ biến nhất mà bạn sẽ thiết kế các trạng thái khác nhau một cách có ý thức, bao gồm cả trạng thái

a:not[[href]] {
  /* style a "disabled" link */
}

28

• a:not[[href]] {
    /* style a "disabled" link */
  }

  29. Để tạo kiểu khi con trỏ chuột qua liên kết

• 
  About

  00. Để tạo kiểu khi liên kết đã được theo dõi, tốt nhất là trình duyệt có thể nhớ. Nó có khả năng tạo kiểu hạn chế do bảo mật

• 
  About

  01. Để tạo kiểu khi một liên kết chưa được truy cập

• 
  About

  02. Để tạo kiểu khi nhấn liên kết [e. g. nút chuột bị hỏng hoặc phần tử đang được gõ trên màn hình cảm ứng]

• a:not[[href]] {
    /* style a "disabled" link */
  }

  28. Rất quan trọng. Liên kết phải luôn có kiểu tập trung. Nếu bạn chọn xóa đường viền màu lam mặc định mà hầu hết các trình duyệt đều áp dụng, hãy cũng sử dụng bộ chọn này để áp dụng lại kiểu tiêu điểm rõ ràng về mặt trực quan

Chúng có thể xâu chuỗi giống như bất kỳ lớp giả nào, vì vậy bạn có thể làm điều gì đó như thế này nếu nó hữu ích cho thiết kế/UX của bạn

Section Two

1

Bạn có thể tạo kiểu cho một liên kết trông giống như nút

Có lẽ một số nhầm lẫn giữa liên kết và nút là những thứ như thế này

About04. Nhưng mà. Một thứ mà bạn có thể nhấp vào có nội dung “Tìm hiểu thêm” thực chất là một liên kết chứ không phải một nút. Điều đó hoàn toàn ổn, đó chỉ là một lời nhắc khác để sử dụng thành phần đúng về mặt ngữ nghĩa và chức năng

Độ tương phản màu

Vì chúng ta thường tạo kiểu cho các liên kết có màu riêng biệt nên điều quan trọng là sử dụng màu có đủ độ tương phản màu để dễ tiếp cận. Có rất nhiều dạng khiếm thị [xem công cụ WhoCanUse để mô phỏng các kết hợp màu sắc với các dạng khiếm thị khác nhau] và độ tương phản cao hỗ trợ gần như tất cả các dạng này

Có lẽ bạn đặt màu xanh lam cho các liên kết

Section Two

2

Tạo kiểu liên kết cho bản in

CSS có một “quy tắc” để khai báo các kiểu chỉ có hiệu lực trên phương tiện in [e. g. in ra một trang web]. Bạn có thể đưa chúng vào bất kỳ CSS nào như thế này

Section Two

3

Đặt lại kiểu

Nếu bạn cần loại bỏ tất cả các kiểu dáng khỏi một liên kết [hoặc thực sự là bất kỳ yếu tố nào khác cho vấn đề đó], CSS cung cấp một cách để loại bỏ tất cả các kiểu dáng bằng cách sử dụng thuộc tính

About

06

Section Two

4

Bạn cũng có thể xóa các kiểu riêng lẻ bằng từ khóa. [Một lần nữa, điều này không thực sự độc đáo đối với các liên kết, nhưng nói chung là hữu ích]

Section Two

5

Cân nhắc về JavaScript

Giả sử bạn muốn ngăn việc nhấp vào liên kết thực hiện những gì nó thường làm. đi đến liên kết đó hoặc nhảy xung quanh trang. Trong JavaScript, bạn có thể sử dụng

About

07 để tránh nhảy xung quanh

Section Two

6

Loại điều này là cốt lõi của cách thức hoạt động của “Ứng dụng một trang” [SPA]. Chúng chặn các nhấp chuột để trình duyệt không tiếp quản và xử lý điều hướng

Các SPA xem nơi bạn đang cố gắng truy cập [trong trang web của riêng bạn], tải dữ liệu họ cần, thay thế những gì họ cần trên trang và cập nhật URL. Rất nhiều việc phải làm để sao chép miễn phí những gì trình duyệt làm, nhưng bạn có khả năng thực hiện những việc như tạo hiệu ứng động giữa các trang

Một mối quan tâm khác của JavaScript với các liên kết là khi một liên kết đến một trang khác được nhấp vào, trang đó sẽ bị bỏ lại và một trang khác sẽ tải. Điều đó có thể có vấn đề đối với những thứ như trang chứa biểu mẫu mà người dùng đang điền nhưng chưa hoàn thành. Nếu họ nhấp vào liên kết và rời khỏi trang, họ sẽ mất việc. Cơ hội duy nhất của bạn để ngăn người dùng rời đi là sử dụng sự kiện

About

08

Section Two

7

Một liên kết đã bị xóa hành vi mặc định sẽ không thông báo điểm đến mới. Điều này có nghĩa là một người sử dụng công nghệ hỗ trợ có thể không biết họ bị thương ở đâu. Bạn sẽ phải làm những việc như cập nhật tiêu đề của trang và di chuyển tiêu điểm trở lại đầu tài liệu

khung JavaScript

Trong khung JavaScript, như React, đôi khi bạn có thể thấy các liên kết được tạo từ thứ gì đó giống như thành phần

About

09 thay vì thành phần

a:not[[href]] {
  /* style a "disabled" link */
}

3 gốc. Thành phần tùy chỉnh có thể tạo một phần tử

a:not[[href]] {
  /* style a "disabled" link */
}

3 gốc nhưng có chức năng bổ sung, chẳng hạn như cho phép bộ định tuyến JavaScript hoạt động và thêm các thuộc tính như

About

12 nếu cần, đây là một điều tốt

Cuối cùng, một liên kết là một liên kết. Khung JavaScript có thể cung cấp hoặc khuyến khích một số mức độ trừu tượng, nhưng bạn luôn được tự do sử dụng các liên kết thông thường

cân nhắc về khả năng tiếp cận

Chúng tôi đã đề cập đến một số khả năng truy cập trong các phần trên [tất cả đều liên quan. ], nhưng đây là một số điều khác để suy nghĩ về

• Bạn không cần văn bản như “Liên kết” hoặc “Đi tới” trong chính văn bản liên kết. Làm cho văn bản có ý nghĩa [“tài liệu” thay vì “bấm vào đây”]
• Các liên kết đã có vai trò ARIA theo mặc định [

  
  About

  13] vì vậy không cần thiết lập nó một cách rõ ràng
• Cố gắng không sử dụng chính URL làm văn bản [______414]
• Các liên kết thường có màu xanh lam và thường được gạch dưới và điều đó nói chung là tốt
• Dù sao thì tất cả các hình ảnh trong nội dung đều phải có văn bản

  
  About

  15, nhưng đặc biệt là khi hình ảnh được bao bọc trong một liên kết mà không có văn bản nào khác

Tên duy nhất có thể truy cập

Một số công nghệ hỗ trợ có thể tạo danh sách các yếu tố tương tác trên trang. Hãy tưởng tượng một nhóm gồm bốn thẻ bài viết đều có “Đọc thêm”, danh sách các yếu tố tương tác sẽ như thế nào

• Đọc thêm
• Đọc thêm
• Đọc thêm
• Đọc thêm

Không hữu ích lắm. Bạn có thể sử dụng lớp

About

16 mà chúng tôi đã đề cập để làm cho các liên kết giống như

Section Two

8

Bây giờ mỗi liên kết là duy nhất và rõ ràng. Nếu thiết kế có thể hỗ trợ nó, hãy làm điều đó mà không có lớp ẩn trực quan để loại bỏ sự mơ hồ cho mọi người

nút

Các nút là để kích hoạt các hành động. Khi nào bạn sử dụng phần tử

About

17? . ” Đây là một cách khác để nghĩ về điều đó. nếu nhấp vào nó không làm được gì nếu không có JavaScript, thì đó phải là ________ 417

Theo mặc định, một

About

17 nằm trong một

About

21 sẽ gửi biểu mẫu đó. Nhưng bên cạnh đó, các phần tử nút không có bất kỳ hành vi mặc định nào và bạn sẽ kết nối tương tác đó với JavaScript

Mục lục

• triển khai HTML
• Cân nhắc về kiểu dáng và CSS
• Cân nhắc về JavaScript
• cân nhắc về khả năng tiếp cận

triển khai HTML

Section Two

9

Các nút bên trong

About

21 làm điều gì đó theo mặc định. họ gửi biểu mẫu. Họ cũng có thể đặt lại nó, giống như các đối tác đầu vào của họ. Thuộc tính

About

23 quan trọng

Back to Top

0

Nói về biểu mẫu, các nút có một số thủ thuật gọn gàng giúp chúng có thể ghi đè lên các thuộc tính của chính

About

21

Back to Top

1

lấy nét tự động

Vì các nút là phần tử có thể đặt tiêu điểm nên chúng tôi có thể tự động lấy tiêu điểm cho chúng khi tải trang bằng thuộc tính

About

25

Back to Top

2

Có lẽ bạn sẽ làm điều đó bên trong hộp thoại phương thức trong đó một trong các hành động là hành động mặc định và nó giúp ích cho UX [e. g. bạn có thể nhấn

About

26 để loại bỏ phương thức]. Tự động lấy nét sau hành động của người dùng có lẽ là cách thực hành tốt duy nhất ở đây, việc di chuyển tiêu điểm của người dùng mà không có sự cho phép của họ, như thuộc tính

About

25 có khả năng, có thể là một vấn đề đối với người dùng trình đọc màn hình và kính lúp

Lưu ý rằng ____425 có thể không hoạt động nếu phần tử nằm trong

About

29 vì lý do bảo mật

Vô hiệu hóa các nút

Để ngăn nút tương tác, bạn có thể sử dụng thuộc tính

About

30

Back to Top

3

Lưu ý rằng chúng tôi đã bao gồm văn bản mô tả bên cạnh nút đã tắt. Có thể rất khó chịu khi tìm thấy một nút bị vô hiệu hóa và không biết tại sao nó bị vô hiệu hóa. Cách tốt hơn để làm điều này có thể là để ai đó gửi biểu mẫu, sau đó giải thích lý do tại sao nó không hoạt động trong thông báo phản hồi xác thực

Bất kể, bạn có thể tạo kiểu cho nút bị vô hiệu hóa theo cách này

Back to Top

4

Chúng tôi sẽ đề cập đến các trạng thái khác và kiểu dáng sau trong hướng dẫn này

Các nút có thể chứa các phần tử con

Nút gửi và đầu vào gửi [______431] giống hệt nhau về chức năng, nhưng khác ở chỗ đầu vào không thể chứa các phần tử con trong khi nút có thể

Back to Top

5

Lưu ý thuộc tính

About

32 trên phần tử SVG ở trên. Trong trường hợp đó, do biểu tượng mang tính chất trang trí, điều này sẽ giúp công nghệ hỗ trợ chỉ thông báo nhãn của nút

Cân nhắc về kiểu dáng và CSS

Các nút thường được tạo kiểu trông rất giống nút. Họ nên nhìn có thể nhấn. Nếu bạn đang tìm cảm hứng về các kiểu nút lạ mắt, bạn nên xem Chủ đề CodePen về Nút

About33 vào các nút tương tự như trên và chúng tôi có các kiểu hoàn toàn khác nhau

Mặc dù có một số sự thật về trải nghiệm người dùng khi để mặc định các thành phần biểu mẫu để chúng phù hợp với phong cách của trình duyệt/nền tảng đó và bạn có được một số khả năng chi trả miễn phí, nhưng các nhà thiết kế thường không thích các phong cách mặc định, đặc biệt là những phong cách khác nhau giữa các trình duyệt

Đặt lại kiểu nút mặc định

Xóa tất cả các kiểu khỏi một nút dễ dàng hơn bạn nghĩ. Bạn sẽ nghĩ, với tư cách là một công cụ kiểm soát biểu mẫu,

About

34 sẽ hữu ích, nhưng đừng tin vào điều đó. Trên thực tế,

About

35 là lựa chọn tốt hơn để xóa sạch phiến đá

Bạn có thể thấy nhiều loại thuộc tính có liên quan như thế nào

Và đó không phải là tất cả. Đây là một đoạn hợp nhất về những gì Chuẩn hóa thực hiện với các nút

Back to Top

6

Một lớp

About

36 nhất quán

Ngoài việc sử dụng CSS đặt lại hoặc CSS cơ sở, bạn có thể muốn có một lớp dành cho các nút giúp bạn có nền tảng vững chắc để tạo kiểu và hoạt động trên cả liên kết và nút

Back to Top

7

Kiểm tra Bút này để biết lý do tại sao cần có tất cả các thuộc tính này để đảm bảo bút hoạt động chính xác giữa các phần tử

trạng thái nút

Cũng giống như với các liên kết, bạn sẽ muốn định kiểu trạng thái của các nút

Back to Top

8

Bạn cũng có thể muốn sử dụng các thuộc tính ARIA để tạo kiểu, đây là một cách gọn gàng để khuyến khích sử dụng chúng đúng cách

Back to Top

9

Các nút kiểu liên kết

Luôn có những ngoại lệ. Ví dụ: một trang web mà bạn cần một hành động được kích hoạt bằng nút trong một câu

About

37] kết hợp các kiểu đặt lại ở trên và nếu không thì phù hợp với những gì bạn làm cho các liên kết neo

nút đột phá

Bạn có nhớ trước đó khi chúng ta nói về khả năng gói toàn bộ phần tử trong liên kết không? . Bạn có thể sử dụng phần tử giả được định vị tuyệt đối trên nút để mở rộng khu vực có thể nhấp ra toàn bộ khu vực. Mến

Dự phòng nhúng CodePen

Cân nhắc về JavaScript

Ngay cả khi không có JavaScript, các phần tử nút có thể được kích hoạt bằng các phím

About

38 và

About

26 trên bàn phím. Đó là một phần khiến chúng trở thành những yếu tố hấp dẫn và hữu ích. chúng có thể khám phá, có thể tập trung và tương tác với công nghệ hỗ trợ theo cách có thể dự đoán được

Có lẽ bất kỳ

About

17 nào trong tình huống đó nên được chèn vào DOM bằng JavaScript. Một trật tự cao. Thức ăn cho suy nghĩ. 🤔

Người xử lý “một lần”

Giả sử một nút thực hiện điều gì đó khá quan trọng, chẳng hạn như gửi thanh toán. Sẽ khá đáng sợ nếu nó được lập trình sao cho việc nhấp vào nút nhiều lần sẽ gửi nhiều yêu cầu thanh toán. Trong những tình huống như thế này, bạn sẽ đính kèm trình xử lý nhấp chuột vào một nút chỉ chạy một lần. Để làm rõ điều đó với người dùng, chúng tôi cũng sẽ tắt nút khi nhấp

About

41 đảm bảo nút sẽ có lớp

About

42 và xử lý lớp hoạt động giống như chuyển đổi

cân nhắc về khả năng tiếp cận

Việc xem xét khả năng truy cập lớn nhất với các nút thực sự là sử dụng các nút. Đừng cố sao chép một nút có

About

43 hoặc

a:not[[href]] {
  /* style a "disabled" link */
}

7, thật không may, điều này phổ biến hơn bạn nghĩ. Nó rất có khả năng sẽ gây ra vấn đề. [Bạn đã xử lý khả năng lấy nét chưa? Bạn đã xử lý các sự kiện bàn phím chưa? Tuyệt vời. Có lẽ vẫn còn nhiều thứ bạn đang quên. ]

kiểu lấy nét

Giống như tất cả các thành phần có thể đặt tiêu điểm, trình duyệt áp dụng kiểu tiêu điểm mặc định, thường là đường viền màu xanh lam

About45 để loại bỏ nó. Nếu bạn đã từng xóa một kiểu tiêu điểm như vậy, hãy đặt nó trở lại cùng một lúc

About

46 mà chúng cần [

About

47]. Nhưng có một số thuộc tính ARIA khác có liên quan đến các nút

• 
  About

  48. Biến một nút thành một chuyển đổi giữa

  
  About

  49 và

  
  About

  50. Tìm hiểu thêm về chuyển đổi nút, điều này cũng có thể được thực hiện với

  
  About

  51 và

  
  About

  52

• 
  About

  53. Nếu nút kiểm soát trạng thái mở/đóng của phần tử khác [chẳng hạn như menu thả xuống], bạn áp dụng thuộc tính này để chỉ ra điều đó như

  
  About

  54

• a:not[[href]] {
    /* style a "disabled" link */
  }

  26. Ghi đè văn bản trong nút. Điều này hữu ích cho việc gắn nhãn các nút không có văn bản, nhưng có lẽ bạn vẫn nên sử dụng lớp

  a:not[[href]] {
    /* style a "disabled" link */
  }

  25 để có thể dịch nó

• 
  About

  57. Trỏ tới một phần tử sẽ đóng vai trò là nhãn cho nút

Cho cái cuối cùng đó

About

26 hoặc nhấn phím

About

38 [khi được đặt tiêu điểm]. Ngay cả khi bạn thêm

About

47 vào một liên kết hoặc div, bạn sẽ không nhận được chức năng của phím cách, vì vậy, trước nguy cơ đánh một con ngựa chết, hãy sử dụng

About

17 trong những trường hợp đó

Có bao nhiêu loại nút trong CSS?

Các loại nút là gì?

Các nút CSS là gì?

Các loại nút trong HTML là gì?