Bộ chọn css là gì và nó hoạt động như thế nào?
Bộ chọn CSS là một trong những phần quan trọng nhất của CSS. Chúng cung cấp cho bạn khả năng nhắm mục tiêu các phần tử HTML trên trang web của bạn mà bạn muốn tạo kiểu Show
Nếu không có bộ chọn CSS, bạn sẽ không thể định kiểu trang của mình theo cách bạn muốn Rất may, bộ chọn CSS đã xuất hiện được một thời gian và bạn có thể tạo kiểu cho các thành phần trên trang của mình theo bất kỳ cách nào bạn muốn Nhưng nếu bạn thực sự muốn mở khóa sức mạnh của CSS và tạo ra các yếu tố tuyệt vời, thì bạn cần hiểu những gì bạn có thể làm với bộ chọn CSS. Cụ thể, bạn cần hiểu các bộ chọn CSS cơ bản trước khi tìm đến các bộ chọn CSS nâng cao Bài đăng này sẽ xem xét cả hai. Cuối cùng, nó sẽ giúp bạn khám phá sức mạnh của bộ chọn CSS để tạo ra các yếu tố đáng kinh ngạc của riêng bạn. Vì vậy, hãy bắt đầu bằng cách xem bộ chọn CSS là gì Bộ chọn CSS là gì?Nếu bạn đã từng viết bất kỳ CSS nào trước đây thì có thể bạn đã thấy bộ chọn CSS. Chúng là phần đầu tiên của quy tắc CSS. Bạn sử dụng bộ chọn CSS để chọn các phần tử HTML mà bạn muốn tạo kiểu Trong CSS, bộ chọn được xác định bởi đặc tả bộ chọn CSS. Điều này có nghĩa là mỗi bộ chọn phải được trình duyệt hỗ trợ để nó thực sự hoạt động Bộ chọn CSS có xu hướng được chia thành năm loại khác nhau. Bài đăng này sẽ xem xét chúng theo hai loại chính là cơ bản và nâng cao. Dưới đây là năm loại
Để giỏi một thứ gì đó, bạn phải hiểu những điều cơ bản, vì vậy hãy bắt đầu từ đó Bộ chọn CSS cơ bảnBạn có thể đã thấy nhiều loại bộ chọn CSS – bộ chọn CSS cơ bản đủ để giúp bạn xây dựng các trang web phong cách. Hãy xem xét từng bộ chọn CSS cơ bản để đảm bảo chúng ta hiểu chức năng của chúng Bộ chọn (loại) phần tử CSSBộ chọn phần tử CSS chọn các phần tử HTML dựa trên tên phần tử. Trong các tên phần tử HTML là những thứ như 1, 2 hoặc tên ngữ nghĩa như 3 hoặc 4. Do đó, bộ chọn phần tử chọn tất cả các phần tử HTML có tên bạn chọnHãy xem ví dụ về bộ chọn CSS cho bộ chọn phần tử
Trong ví dụ trên, chúng tôi đã chọn tất cả các thành phần trên trang thuộc loại 5 và 3 và áp dụng kiểu cho các thành phần đóBộ chọn phần tử giúp bạn giữ cho mã của mình đơn giản bằng cách áp dụng kiểu dáng cho tất cả các phần tử trên một trang thuộc loại đó. Điều này có nghĩa là bạn chỉ phải theo dõi phong cách của mình cho các thành phần đó ở một nơi Bộ chọn id CSSBộ chọn id chọn các thành phần HTML có thuộc tính id phù hợp với bộ chọn. Vì bạn không thể có nhiều phần tử có cùng id trong tài liệu HTML, bộ chọn này cho phép bạn chọn một phần tử riêng lẻ. Điều này có nghĩa là kiểu dáng trên phần tử được chọn sẽ là duy nhất Để chọn một phần tử có id cụ thể, bạn sử dụng ký tự 7 (băm) theo sau là id của phần tử HTML. Trong trường hợp này, nó sẽ giống như thế này 8Hãy xem một ví dụ về bộ chọn CSS cho bộ chọn id
Trong ví dụ trên, chúng tôi đã chọn phần tử HTML riêng lẻ có id 9 và áp dụng kiểu dáng cho phần tử đó. Kiểu dáng này sẽ chỉ áp dụng cho phần tử riêng lẻ đóTuy nhiên, một điều cần lưu ý là bạn nên cẩn thận khi sử dụng bộ chọn id. Vì bộ chọn id không thể được sử dụng lại trên các phần tử khác, bạn nên tự hỏi liệu bạn có cần sử dụng bộ chọn id để nhắm mục tiêu phần tử không Bộ chọn lớp CSSBộ chọn lớp chọn các phần tử HTML có thuộc tính lớp khớp với bộ chọn. Bộ chọn lớp rất hữu ích để nhắm mục tiêu nhiều yếu tố, những thứ như thẻ hoặc hình ảnh mà bạn muốn có kiểu phù hợp Để chọn một phần tử với một lớp cụ thể, bạn sử dụng ký tự 10 (dấu chấm) và sau đó nhập tên lớpHãy xem một ví dụ về bộ chọn CSS cho bộ chọn lớp
Trong ví dụ trên, chúng tôi đã chọn tất cả các phần tử có tên lớp 11 bằng cách sử dụng bộ chọn lớp CSS. Tất cả các phần tử có lớp 11 sẽ được áp dụng các kiểu được liệt kê cho chúngbộ chọn chungBộ chọn phổ quát chọn tất cả các phần tử HTML. Điều này có nghĩa là mọi yếu tố trên trang của bạn, từ tiêu đề đến chân trang. Bạn sẽ thường sử dụng nó để làm cho lề và phần đệm của trang nhất quán hoặc để thực hiện những gì được biết là bỏ không Cú pháp của bộ chọn chung là ký tự 13 (dấu sao) 1Trong ví dụ trên, nó đã loại bỏ lề và phần đệm cho toàn bộ trang bằng cách sử dụng bộ chọn chung Cách nhóm các bộ chọn CSSTrước khi tìm hiểu các bộ chọn CSS nâng cao, chúng ta cần xem nhanh các bộ chọn CSS nhóm. Đây là một thực tế phổ biến mà bạn sẽ thấy trong tự nhiên và nó giúp làm cho mã của bạn rõ ràng và dễ đọc Nhóm cho phép bạn chọn nhiều phần tử HTML cùng một lúc và chỉ nêu định nghĩa kiểu của chúng một lần Hãy xem một ví dụ về bộ chọn nhóm để giải thích 7Trong mã CSS ở trên, chúng ta có ba phần tử 1, 15 và 5 và mỗi phần tử này có định nghĩa kiểu giống nhau. Kết quả là chúng ta có thể làm sạch mã của mình bằng cách nhóm các bộ chọnĐể nhóm các bộ chọn, chúng tôi tách từng bộ chọn bằng ký tự 17 (dấu phẩy) 2Bởi vì định nghĩa phong cách của họ là như nhau, bây giờ chúng ta chỉ phải viết nó một lần Lưu ý rằng các bộ chọn nhóm có thể được sử dụng cho tất cả các bộ chọn được đề cập trong bài viết này, nghĩa là các bộ chọn không nhất thiết phải khớp với nhau Chúng tôi có thể nhóm bộ chọn lớp với bộ chọn id nếu chúng tôi muốn chúng chia sẻ định nghĩa kiểu. Và chúng ta có thể nhóm các thuộc tính style và các giá trị phù hợp và sau đó xác định các định nghĩa khác nhau trên từng phần tử Hãy mở rộng ví dụ của chúng tôi để hiểu khái niệm này 3Bạn đã có nó, đây là tất cả các bộ chọn CSS cơ bản. Nếu bạn muốn giỏi CSS, bạn cần hiểu mỗi thứ này làm gì. Với kiến thức đã có, bây giờ bạn đã sẵn sàng để làm điều đó Nếu bạn muốn nâng cấp CSS của mình, thì bạn sẽ muốn hiểu các bộ chọn CSS nâng cao Bộ chọn CSS nâng caoBộ chọn CSS nâng cao cho phép bạn mở rộng ranh giới của CSS. Chúng giúp bạn có được những yếu tố cụ thể mà bạn muốn nhắm mục tiêu và trạng thái của yếu tố đó khi nhắm mục tiêu nó Hãy đi thẳng vào một số bộ chọn CSS nâng cao bằng cách xem các bộ chọn thuộc tính Bộ chọn thuộc tính CSSBộ chọn thuộc tính cho phép bạn chọn các phần tử dựa trên việc có hay không một thuộc tính nhất định. Nói cách khác, bộ chọn CSS này sẽ khớp với bất kỳ phần tử nào trên trang của bạn nếu phần tử đó có một thuộc tính nhất định Thuộc tính là nội dung được thêm vào thẻ mở của phần tử HTML. Nó có thể là những thứ như 18, 19 hoặc 70 7Tiêu đề là một thuộc tính của phần tử aCó bảy bộ chọn thuộc tính, mỗi bộ chọn cho phép bạn tìm các phần tử dựa trên việc có thuộc tính hay không và giá trị có thể chứa gì
Cú pháp phổ biến cho các bộ chọn này là bộ chọn theo sau bởi 77 (dấu ngoặc vuông) trong đó bạn nêu rõ những gì bạn đang tìm kiếm. Bộ chọn có thể là bất kỳ thứ gì như bộ chọn lớp hoặc thậm chí là bộ chọn phổ quát 5Hôm nay chúng ta sẽ xem xét năm bộ chọn thuộc tính phổ biến nhất. Để hiểu năm bộ chọn thuộc tính này, hãy xem xét từng bộ chọn trong số chúng bằng các ví dụ Bộ chọn thuộc tính hiện tạiBộ chọn thuộc tính này tìm bất kỳ phần tử nào dựa trên vị trí chứa thuộc tính Hãy xem một ví dụ về bộ chọn hiện tại để giải thích 6Trong ví dụ trên, bộ chọn hiện tại của chúng ta sẽ tìm bất kỳ phần tử 78 nào có thuộc tính 79 và áp dụng định nghĩa kiểu cho chúng. Tất cả các phần tử 78 khác không có thuộc tính tiêu đề sẽ không được tạo kiểu như trênBộ chọn thuộc tính bằngBộ chọn thuộc tính này tìm một phần tử có giá trị thuộc tính khớp chính xác. Để sử dụng bộ chọn này, bạn nhập tên thuộc tính theo sau là 71 (bằng) để tìm giá trị khớp chính xácHãy xem một ví dụ về bộ chọn bằng để giải thích 0Trong ví dụ trên, bộ chọn bằng sẽ tìm bất kỳ phần tử 78 nào có thuộc tính 23 với giá trị chính xác là "https. //peterlunch. com/"Bắt đầu với bộ chọn thuộc tínhBộ chọn thuộc tính này tìm bất kỳ phần tử nào bắt đầu bằng một giá trị mà bạn chỉ định. Để sử dụng bộ chọn này, bạn nêu rõ thuộc tính mà bạn đang tìm kiếm, theo sau là các ký tự 72 và 71, sau đó là giá trị mà bạn muốn khớpHãy xem một ví dụ về bộ chọn started with để giải thích 1Trong ví dụ trên, bộ chọn started with tìm bất kỳ phần tử 78 nào có thuộc tính 23 và bắt đầu bằng "https"Kết thúc với bộ chọn thuộc tínhGiống như bộ chọn bắt đầu bằng, bộ chọn thuộc tính này làm ngược lại và tìm bất kỳ phần tử nào kết thúc bằng giá trị bạn chỉ định Để sử dụng bộ chọn này, bạn nêu rõ thuộc tính mà bạn đang tìm kiếm, theo sau là các ký tự 73 và 71, sau đó là giá trị mà bạn muốn khớpHãy xem một ví dụ về bộ chọn kết thúc bằng để giải thích 2Trong ví dụ trên, bộ chọn kết thúc bằng tìm bất kỳ phần tử 30 nào có kết thúc 31 bằng "/blog-imgs". Đây là một trong những tôi thực sự sử dụng cho trang web của tôiChứa bộ chọn thuộc tínhBộ chọn thuộc tính này tìm thấy bất kỳ phần tử nào chứa giá trị bạn đang tìm kiếm ở đâu đó trong giá trị thuộc tính. Điều này có nghĩa là giá trị phải chứa ít nhất một lần xuất hiện của giá trị Để sử dụng bộ chọn này, bạn nêu thuộc tính mà bạn đang tìm kiếm, theo sau là các ký tự 13 và 71, sau đó là giá trị bạn đang tìm kiếm một lần xuất hiện củaHãy xem một ví dụ về bộ chọn chứa để giải thích 3Trong ví dụ trên, bộ chọn thuộc tính chứa tìm thấy bất kỳ phần tử 78 nào có 23 chứa giá trị "peterlunch"Đó là bộ chọn thuộc tính, hãy chuyển sang bộ chọn CSS nâng cao tiếp theo bộ chọn kết hợpBộ chọn CSS nâng cao tiếp theo là bộ chọn kết hợp. Các bộ chọn này có thể kết hợp nhiều bộ chọn CSS. Có bốn loại bộ chọn kết hợp trong CSS
Để hiểu cách thức hoạt động của các bộ chọn này, trước tiên bạn phải hiểu rằng HTML tuân theo hệ thống phân cấp cây gia đình. Điều này có nghĩa là có một phần tử cha có thể chứa phần tử con và phần tử con có thể có phần tử con, v.v. 4Trong ví dụ trên, 36 là cha, các phần tử con của nó là các phần tử 3 và các mạo từ là cha của các phần tử con 1 và 2Với kiến thức đó, chúng ta hãy lần lượt khám phá từng bộ chọn kết hợp này với các ví dụ để hiểu cách chúng hoạt động Bộ chọn kết hợp con cháuBộ chọn kết hợp hậu duệ khớp với tất cả các phần tử là hậu duệ của một phần tử đã chỉ định Hãy xem xét một ví dụ về sự kết hợp hậu duệ để giải thích 5Ví dụ trên chọn tất cả các phần tử 2 bên trong các phần tử 36Bộ chọn kết hợp conBộ chọn kết hợp con khớp với tất cả các phần tử là phần tử con của một phần tử cụ thể. Điều này khác với bộ chọn kết hợp con cháu, vì nó chỉ chọn phần tử con trực tiếp của phần tử cha Bộ chọn con được biểu thị bằng ký tự 72Hãy xem một ví dụ về bộ chọn kết hợp con để giải thích 6Đề cập đến ví dụ phân cấp HTML của chúng tôi ở trên, bộ chọn này sẽ chỉ tìm thấy thẻ 2 đầu tiên chứ không phải thẻ 2 trong thẻ 3. Nó thực hiện điều này vì chúng không phải là con trực tiếp của phần tử cha mẹ 36Bộ chọn kết hợp anh chị em liền kềCác bộ chọn Anh chị em liền kề được biểu thị bằng cách sử dụng 77 phân tách hai bộ chọn và chỉ khớp với phần tử bộ chọn thứ hai nếu nó ngay sau phần tử đầu tiênMột ví dụ điển hình trong thế giới thực về điều này là có văn bản ngay sau một hình ảnh được tạo kiểu giống như chú thích 7Trong ví dụ trên, bất kỳ phần tử 2 nào theo sau hình ảnh sẽ được tạo kiểu theo định nghĩa trênBộ chọn kết hợp anh chị em chungBộ chọn anh chị em chung chọn bất kỳ phần tử nào là anh chị em của một phần tử. Bộ chọn anh chị em chung được biểu thị bằng ký tự 75Hãy xem xét một ví dụ về bộ chọn anh chị em chung để giải thích 8Trong ví dụ trên, nó chọn tất cả các phần tử 1 là anh chị em của các phần tử 3bộ chọn giảBộ chọn giả rơi vào hai nhóm. Đầu tiên là bộ chọn lớp giả và thứ hai là bộ chọn phần tử giả Các bộ chọn này rất phức tạp và có nhiều tùy chọn. Để hiểu chúng, bạn nên đọc một số bài viết riêng về chúng vì bản thân chúng là những chủ đề phức tạp. Nhưng, tôi sẽ chạm nhẹ vào cả hai ở đây Đầu tiên bộ chọn lớp giả chọn các phần tử dựa trên một trạng thái nhất định. Bạn có thể đã thấy những thứ như 52 hoặc 53. Đây là những trạng thái của các yếu tố trên trang của bạn. Bạn có thể chọn các phần tử dựa trên việc phần tử đó có ở trạng thái được chỉ định hay khôngMột ví dụ nhanh sẽ là 9Trong ví dụ trên, khi người dùng di chuột qua một nút, màu nền sẽ chuyển sang màu đỏ Nếu bạn muốn hiểu rõ hơn về bộ chọn lớp giả, tôi khuyến khích bạn đọc bài đăng này của Nash Vail, người đã giải thích chúng rất tuyệt vời Tiếp theo là bộ chọn phần tử giả mà tôi đã viết ở đây. Các bộ chọn này chọn các phần của một phần tử. Một phần của phần tử có thể là chữ cái đầu tiên của phần tử hoặc nội dung trước và sau phần tử Với bộ chọn phần tử giả, điều quan trọng cần lưu ý là chúng sử dụng 54 (dấu hai chấm) so với. 55 (dấu hai chấm đơn) như các lớp giả 0Bản tóm tắtBây giờ bạn đã hiểu rõ về bộ chọn CSS và cách bạn có thể sử dụng chúng để tìm các thành phần HTML trên trang web của mình Tôi hy vọng bạn thích đọc bài viết này. Nếu bạn đã học được điều gì đó từ bài đăng này thì hãy xem phần còn lại của các bài đăng của tôi tại đây hoặc đăng ký nhận bản tin của tôi để nhận nội dung dành cho người mới cực kỳ hay và siêu độc quyền QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Tôi là nhà phát triển web người Úc. Tôi hiện đang làm việc ở một số công việc phụ trên con đường trở thành một nhà phát triển và hacker độc lập giỏi hơn Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Ví dụ về bộ chọn phần tử CSS là gì?Bộ chọn cơ bản
. * sẽ khớp với tất cả các thành phần của tài liệu . Chọn tất cả các phần tử có tên nút đã cho. Thí dụ. đầu vào sẽ khớp với bất kỳ phần tử
5 bộ chọn CSS là gì?Có một số loại bộ chọn khác nhau trong CSS. . Bộ chọn phần tử CSS Bộ chọn Id CSS Bộ chọn lớp CSS Bộ chọn chung CSS Bộ chọn nhóm CSS Bộ chọn HTML hoạt động như thế nào?Bộ chọn loại chọn tất cả các phần tử HTML có tên nút đã cho . Ví dụ: “a” sẽ chọn tất cả các phần tử
4 bộ chọn CSS là gì?Bộ chọn loại, bộ chọn phổ quát, bộ chọn thuộc tính, bộ chọn lớp, bộ chọn ID hoặc lớp giả là một bộ chọn đơn giản |