Các loại bộ chọn css

CSS là một trong những công cụ mạnh nhất có sẵn cho các nhà thiết kế web (nếu không muốn nói là mạnh nhất). Với nó, chúng tôi hoàn toàn có thể biến đổi giao diện của một trang web chỉ trong vài phút – ngay cả khi không cần thiết phải chạm vào dấu. Nhưng mặc dù chúng ta đều nhận thức rõ về tính hữu ích của nó, các bộ chọn CSS vẫn chưa được sử dụng hết khả năng của chúng và đôi khi chúng ta có xu hướng phân tán HTML của mình với các lớp và id, div và

Các bài viết liên quan

  • ID và Class trong CSS, điều khác biệt
  • CSS là gì?
  • ✔ Nội dung độc đáo
  • Cách kiếm backlink bằng cách tạo công cụ miễn phí
  • Phần mềm SEO(SEO Software) là gì
  • Kiểm tra lỗi bảo mật CSS Injection
  • Selenium IDE- xác định phần tử html cho trang web thử nghiệm

Cách tốt nhất để tránh những lỗi này trong CSS của bạn và giữ cho nó sạch sẽ và có nghĩa là sử dụng các bộ chọn CSS phức tạp hơn, những lựa chọn này có thể nhắm vào mục tiêu của các phần tử công cụ mà không cần lớp hoặc lớp

Tóm tắt nội dung

  • Đặc tính CSS #
    • Thuộc tính bộ chọn #
    • Bộ chọn Con #
    • Sectors connect#
    • Bộ chọn kết hợp chung #
    • LỚP PSEUDO NĂNG ĐỘNG
    • CON ĐẦU TIÊN
    • LỚP PSEUDO NGÔN NGỮ #
    • Lớp giả CSS 3. MỤC TIÊU
    • Trạng thái phần tử PSEUDO-CLASSES
    • Cấu trúc lớp giả cấu trúc CSS 3. NTH-CON#
    • NTH-CUỐI-Đứa con
    • LOẠI NTH
    • NTH-CUỐI CÙNG-LOẠI
    • CON CUỐI CÙNG
    • LOẠI ĐẦU TIÊN và. LOẠI CUỐI CÙNG
    • CON MỘT
    • CHỈ CÓ LOẠI
    • TRỐNG RỖNG
    • Lớp phủ giả #
    • DÒNG ĐẦU TIÊN
    • CHỮ ĐẦU TIÊN
  • CSS SElectors Kết luận #

Đặc tính CSS #

Trước khi đi sâu vào lĩnh vực nâng cao của các bộ chọn CSS, điều quan trọng là phải hiểu cách thức hoạt động của công cụ CSS tính toán, để chúng tôi biết cách sử dụng đúng các bộ chọn của mình và tránh mất hàng giờ để giải quyết lỗi

Khi viết CSS, chúng ta phải lưu ý rằng một số bộ chọn sẽ xếp hạng cao hơn những bộ chọn khác trong luồng, bộ chọn mới nhất mà chúng tôi đã viết sẽ không đồng thời ghi đè những bộ chọn trước đó mà chúng tôi đã viết cho

Vì vậy, làm thế nào để bạn có thể tính toán cụ thể của một bộ chọn cụ thể? . 1, 1, 1, 1 hoặc 0, 2, 0, 1

  • First number (a) luôn bằng 0, ngoại trừ khi có một kiểu thuộc tính được áp dụng cho phần tử đó trong phần đánh dấu chính
  • Number thứ hai (b) is ID ID in selectors that
  • Chữ số thứ ba © là tổng của các thuộc tính bộ chọn khác nhau và các lớp giả trong bộ chọn đó. Các lớp (. ví dụ) và các thuộc tính bộ chọn (ví dụ. li [id=red]) được bao gồm ở đây
  • Chữ số thứ tư (d) đếm các phần tử (như bảng, p, div, v. v. ) và các phần tử giả (như. first line)
  • selector 'Phổ biến (*)' có đặc hiệu bằng 0
  • Nếu hai bộ chọn có cùng tính năng cụ thể, thì bộ chọn đứng cuối cùng trên biểu loại kiểu sẽ được áp dụng

Hãy xem một số ví dụ để dễ hiểu hơn

#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2

Từ các bộ chọn sau, bộ chọn đầu tiên là bộ chọn sẽ được áp dụng cho phần tử, vì nó có mức độ đặc biệt cao hơn

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

Điều quan trọng là bạn phải hiểu ít nhất về cơ bản về cách hoạt động của công cụ máy tính, nhưng các công cụ như Firebug rất hữu ích để cho chúng tôi biết các bộ chọn đang được áp dụng cho một phần công cụ điện tử bằng cách nào đó

Các loại bộ chọn css

Firebug cho phép bạn dễ dàng xem các bộ chọn đang được áp dụng cho một phần tử

Thuộc tính bộ chọn #

các thuộc tính bộ chọn cho phép bạn nhắm mục tiêu một phần tử dựa trên các thuộc tính của nó. Bạn chỉ có thể xác định các thuộc tính của phần tử, vì vậy tất cả các phần tử có thuộc tính đó – bất kể giá trị nào – trong HTML sẽ được nhắm mục tiêu hoặc cụ thể hơn và nhắm mục tiêu các phần tử có giá trị cụ thể trên

Có 6 loại thuộc tính bộ chọn khác nhau

  1. [att = giá trị]

các thuộc tính phải có giá trị chính xác được chỉ định

  1. [att ~ = giá trị]

giá trị của các thuộc tính cần phải là một danh sách các từ được phân tách bằng khoảng trắng (ví dụ:. class = “title feature home”) and a in the words are the main value was only

  1. [att. = giá trị]

giá trị của các thuộc tính chính xác là “giá trị” hoặc bắt đầu bằng từ “giá trị” và ngay sau đó là “-”, vì vậy nó sẽ là “giá trị-”

  1. [att ^ = giá trị]

giá trị của các thuộc tính bắt đầu bằng giá trị được chỉ định

  1. [att $ = giá trị]

giá trị của các thuộc tính kết thúc bằng giá trị được chỉ định

  1. [att * = giá trị]

giá trị của các thuộc tính chứa giá trị được chỉ định

Ví dụ. Nếu bạn muốn thay đổi màu nền của tất cả các phần tử div là bài đăng trên blog của mình, bạn có thể sử dụng công cụ chọn thuộc tính nhắm mục tiêu mọi div có lớp thuộc tính chứa lớp “bài đăng”

div[class*="post"] {
  background-color: #333;
  }

Một cách sử dụng các thuộc tính hữu ích khác của bộ chọn là nhắm mục tiêu các loại phần tử đầu vào khác nhau. Ví dụ. nếu bạn muốn bắt đầu vào văn bản của mình có chiều rộng khác với các đầu vào khác, bạn có thể sử dụng công cụ chọn thuộc tính đơn giản

input[type="text"] {
  width: 200px;
  }

Điều này sẽ nhắm mục tiêu tất cả các phần tử đầu vào có thuộc tính kiểu chính xác là “văn bản”

Bây giờ, giả sử bạn muốn thêm một biểu tượng khác bên cạnh mỗi loại tệp khác nhau mà trang web của bạn đang liên kết đến để khách truy cập trang web của bạn biết khi nào họ sẽ nhận được hình ảnh, tệp PDF, tài liệu . v. Điều này có thể được thực hiện bằng cách sử dụng công cụ chọn thuộc tính

a[href$=".jpg"] {
  background: url(jpeg.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
  }

a[href$=".pdf"] {
  background: url(pdf.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
  }

a[href$=".doc"] {
  background: url(word.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
  }

Trong ví dụ này, chúng tôi đã sử dụng công cụ chọn thuộc tính sẽ nhắm mục tiêu tất cả các liên kết (a) có thuộc tính href kết thúc ($) bằng. jpg,. pdf hoặc. tài liệu

Lưu ý về trình hỗ trợ duyệt ngoài Internet Explorer 6, tất cả các thuộc tính bộ chọn hỗ trợ của trình duyệt đều được hỗ trợ. Điều này có nghĩa là khi bạn đang sử dụng các thuộc tính bộ chọn trên bảng định dạng của mình, bạn nên đảm bảo rằng người dùng IE6 sẽ vẫn được cung cấp một trang web có thể sử dụng được. Get ví dụ thứ ba của tôi. Thêm một biểu tượng vào các liên kết của bạn sẽ thêm một mức độ khả dụng khác cho trang web của bạn, nhưng trang web sẽ vẫn có thể sử dụng được nếu các liên kết không hiển thị bất kỳ biểu tượng nào

Bộ chọn Con #

Bộ chọn con được biểu thị bằng dấu “>”. Nó cho phép bạn nhắm mục tiêu các phần tử là con trực tiếp của một phần tử có thể

Ví dụ. nếu bạn muốn khớp tất cả các phần tử h2 là phần tử con trực tiếp của div thanh bên của bạn, nhưng không phải phần tử h2 cũng có thể nằm trong div, nhưng đó là cháu (hoặc con cháu sau này) của bạn

div#sidebar > h2 {
  font-size: 20px;
  }

Bạn cũng có thể sử dụng kết hợp cả bộ chọn con và con Ví dụ. nếu bạn chỉ muốn nhắm mục tiêu các phần tử blockquote nằm trong div là cháu trực tiếp của phần tử phần tử (bạn có thể muốn đối sánh các blockquote bên trong div nội dung chính, nhưng không phải nếu chúng nằm bên ngoài nó)

body > div > div blockquote {
  margin-left: 30px;
  }

Lưu ý về trình hỗ trợ duyệt Giống như thuộc tính bộ chọn, bộ chọn con không được hỗ trợ bởi Internet Explorer 6. Nếu hiệu quả mà bạn đang cố gắng đạt được bằng cách sử dụng nó là rất quan trọng đối với khả năng sử dụng hoặc tính thẩm định tổng thể của trang web, thì bạn có thể cân nhắc việc sử dụng bộ chọn lớp với nó hoặc trên biểu loại

Sectors connect#

Có hai loại tổ hợp anh em. tổ hợp anh em phụ thuộc và tổ hợp anh em chung

Bộ chọn này sử dụng dấu cộng, “+”, để kết hợp hai bộ chọn chuỗi đơn giản. Các phần tử trong bộ chọn có cùng một phần tử gốc và phần tử thứ hai phải đến ngay sau phần tử đầu tiên

Ví dụ, bộ tổ hợp anh chị em kế cận có thể rất hữu ích khi xử lý văn bản. Giả sử bạn muốn thêm lề cho tất cả các thẻ h2 theo một đoạn văn (bạn không cần phải thêm lề nếu tiêu đề đứng sau thẻ h1 hoặc nếu đó là phần tử đầu tiên trên trang đó)

p + h2 {
  margin-top: 10px;
  }

Bạn có thể cụ thể hơn nữa và nói rằng bạn chỉ muốn áp dụng quy tắc này nếu các phần tử nằm trong một div cụ thể

________số 8

Hoặc bạn có thể thêm một mức độ phức tạp khác. giả sử bạn muốn dòng đầu tiên của các đoạn văn của mỗi trang được viết hoa nhỏ

.post h1 + p:first-line {
  font-variant: small-caps;
  }

Vì bạn biết đoạn đầu tiên của mỗi bài đăng ngay sau thẻ h1 nên bạn có thể tham khảo h1 trên bộ chọn của mình

Bộ chọn kết hợp chung #

Bộ hợp anh chị em chung hoạt động khá giống với bộ hợp anh chị em liền kề, nhưng với sự khác biệt là bộ chọn thứ hai không phải ngay sau bộ chọn đầu tiên

Vì vậy, nếu bạn cần nhắm mục tiêu tất cả các thẻ p nằm trong một div cụ thể và theo sau thẻ h1 (bạn có thể muốn những thẻ p đó lớn hơn những thẻ đứng trước tiêu đề bài đăng của bạn), bạn có

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
0

Lưu ý về việc hỗ trợ trình duyệt, Internet Explorer 6 không hiểu các tổ hợp của anh chị em, nhưng đối với các trường hợp khác, nếu các đối tượng của bạn bao gồm một tỷ lệ nhỏ người dùng IE6 và nếu bố cục của trang web không

Selectors Pseudo-Classes

LỚP PSEUDO NĂNG ĐỘNG

Chúng được gọi là các Pseudo-classes động vì chúng thực sự không tồn tại trong HTML. chúng chỉ hiện diện khi người dùng đã sử dụng hoặc đang tương tác với trang web

Có hai loại pseudo-class. link and user action of user. Linked is. link and. thăm, trong khi hành động của người dùng là. bay lượn,. active and. trọng điểm

Từ tất cả các bộ chọn CSS đã được đề cập trong bài đăng này, đây có thể là những bộ chọn được sử dụng phổ biến nhất

Pseudo-classes

input[type="text"] {
  width: 200px;
  }
9 áp dụng cho các liên kết chưa được người dùng truy cập, trong khi lớp giả. Áp dụng truy cập đã được áp dụng cho các liên kết đã được truy cập, vì vậy chúng loại trừ nhau

lớp giả. hover áp dụng khi người dùng di chuyển con trỏ qua phần tử mà không cần phải kích hoạt hoặc nhấp vào phần tử đó. lớp giả.

a[href$=".jpg"] {
  background: url(jpeg.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
  }

a[href$=".pdf"] {
  background: url(pdf.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
  }

a[href$=".doc"] {
  background: url(word.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
  }
0 áp dụng khi người dùng thực sự nhấp vào phần tử. And the end of the same as.
a[href$=".jpg"] {
  background: url(jpeg.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
  }

a[href$=".pdf"] {
  background: url(pdf.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
  }

a[href$=".doc"] {
  background: url(word.gif) no-repeat left 50%;
  padding: 2px 0 2px 20px;
  }
1 áp dụng khi phần tử đó nằm trong tiêu điểm – ứng dụng biến phổ biến nhất là trên biểu mẫu phần tử

Bạn có thể sử dụng nhiều hơn một lớp giả hành động của người dùng trong các biểu thức kiểu của mình, vì vậy, bạn có thể có, ví dụ:. nền khác cho trường nhập liệu tùy thuộc vào công việc con trỏ của màu người dùng chỉ di chuột qua nó hoặc di chuột qua nó khi đang lấy nét

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
1

Lưu ý về trình hỗ trợ duyệt Các động được hỗ trợ bởi tất cả các trình duyệt hiện đại, ngay cả IE6. Nhưng hãy nhớ rằng IE6 chỉ cho phép ứng dụng. hover pseudo-class cho các phần tử liên kết (a) và chỉ IE8 chấp nhận trạng thái. hoạt động trên các phần tử không phải là liên kết

CON ĐẦU TIÊN

lớp giả. con đầu lòng cho phép bạn nhắm mục tiêu một phần tử là phần tử con đầu tiên của một phần tử khác. Ví dụ. nếu bạn muốn thêm một lề vào phần tử đầu tiên của danh sách không có thứ tự của mình, bạn có thể có

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
2

Please get a other ví dụ. bạn muốn tất cả các thẻ h2 trong thanh bên của mình có lề trên cùng, để tách chúng ra khỏi bất kỳ thứ gì đứng trước chúng, nhưng thẻ đầu tiên không cần phải lề. You can use after code

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
3

Ghi chú về hỗ trợ trình duyệt IE6 không hỗ trợ. con đầu lòng. Tùy thuộc vào thiết kế mà lớp đang được áp dụng, nó có thể không phải là nguyên nhân chính đáng sợ. Ví dụ. nếu bạn đang sử dụng. bộ chọn con đầu tiên để xóa các dấu gạch ngang trên hoặc bên dưới khỏi các tiêu đề hoặc đoạn văn, bố cục cục bộ của bạn có thể sẽ không bị phá vỡ trong IE6, nó sẽ trông khác lạ. Nhưng nếu bạn đang sử dụng. bộ chọn con đầu tiên để xóa các lề trái và lề phải, ví dụ, một chuỗi div nổi, điều này có thể gây ra nhiều gián đoạn hơn cho thiết kế của bạn

LỚP PSEUDO NGÔN NGỮ #

Ngôn ngữ lớp giả,. lang(), allow you somatch a element based on language of it

Ví dụ. giả sử bạn muốn một liên kết cụ thể trên trang web của mình có màu nền khác, tùy thuộc vào ngôn ngữ của trang đó

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
4

Bộ chọn sẽ khớp với liên kết cụ thể nếu ngôn ngữ của trang bằng “en” hoặc “fr” hoặc nếu nó bắt đầu bằng “en” hoặc “fr” và ngay sau đó là “-”

Lưu ý khi trình hỗ trợ duyệt Không có gì ngạc nhiên khi phiên bản Internet Explorer duy nhất hỗ trợ bộ chọn này là 8. Tất cả các trình duyệt chính khác đều hỗ trợ bộ chọn ngôn ngữ giả

Lớp giả CSS 3. MỤC TIÊU

Khi bạn đang sử dụng các liên kết có số nhận dạng phân đoạn #comments, trong đó “#comments” là phân đoạn định danh), bạn có thể tạo kiểu cho mục tiêu bằng cách sử dụng. lớp giả đích

Ví dụ. hãy tưởng tượng bạn có một trang dài với nhiều văn bản và tiêu đề h2, và có một mục tiêu của những tiêu đề đó ở đầu trang. Người dùng sẽ dễ dàng hơn nhiều nếu, khi nhấp vào một công cụ liên kết có thể trong danh mục, tiêu đề đó sẽ được đánh dấu theo bất kỳ cách nào, khi trang cuộn xuống. đẹp

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
5

Lưu ý khi hỗ trợ trình duyệt Lần này, Internet Explorer thực sự khó khăn và không hỗ trợ gì cho. lớp giả đích. Một bộ đệm khác là Opera không hỗ trợ các bộ chọn này khi sử dụng các nút quay lại và chuyển tiếp. Ngoài ra, nó có hỗ trợ từ các trình duyệt chính khác

Trạng thái phần tử PSEUDO-CLASSES

Một số phần tử HTML có trạng thái bật hoặc tắt (ví dụ:. trường nhập) và trạng thái được chọn hoặc không được kiểm tra (nút radio và hộp kiểm). Các trạng thái này có thể được nhắm mục tiêu theo các lớp giả tương ứng. đã kiểm tra ,. has been disable or. đã kiểm tra

Vì vậy, bạn có thể nói rằng bất kỳ đầu vào nào là vô hiệu hóa phải có nền màu xám nhạt và đường viền chấm.

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
6

Bạn cũng có thể nói rằng tất cả các hộp kiểm được chọn phải có lề bên trái (có thể dễ dàng nhìn thấy trong một danh sách dài các hộp kiểm)

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
7

Lưu ý về hỗ trợ trình duyệt Tất cả các trình duyệt chính, ngoại trừ nghi ngờ thông thường của chúng tôi, Internet Explorer, Hỗ trợ phần tử giao diện người dùng trạng thái Pseudo-class. Nếu bạn cho rằng bạn chỉ đang bổ sung thêm một mức độ chi tiết bổ sung và cải thiện khả năng sử dụng cho khách truy cập của mình, thì đây vẫn có thể là một lựa chọn tốt

Cấu trúc lớp giả cấu trúc CSS 3. NTH-CON#

lớp giả. nth-child() cho phép bạn nhắm mục tiêu một hoặc nhiều phần cụ thể của phần tử con

Bạn có thể nhắm mục tiêu vào một phần tử con, bằng cách xác định giá trị của nó dưới dạng số nguyên

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
8

Thao tác này sẽ chuyển văn bản vào mục li 3 trong phần tử ul thành màu đỏ. Hãy nhớ rằng nếu một phần tử khác nằm bên trong ul (không phải là li), thì nó cũng sẽ được tính là con của nó

Bạn có thể nhắm mục tiêu con cái của cha mẹ bằng cách sử dụng các biểu thức. Ví dụ. biểu thức sau sẽ khớp với mọi phần tử li thứ ba bắt đầu từ phần tử thứ tư

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
9

Trong trường hợp trước, phần tử màu vàng đầu tiên sẽ là phần tử thứ tư. Nếu bạn chỉ muốn bắt đầu đếm từ phần tử đầu tiên, bạn có thể sử dụng một biểu thức đơn giản hơn

div[class*="post"] {
  background-color: #333;
  }
0

Trong trường hợp này, phần tử màu vàng đầu tiên sẽ là phần tử thứ ba và mọi phần tử thứ ba khác sau nó. Bây giờ, hãy tưởng tượng bạn chỉ muốn nhắm mục tiêu bốn phần tử li đầu tiên trong danh sách

div[class*="post"] {
  background-color: #333;
  }
1

giá trị của. n-child cũng có thể được định nghĩa là “chẵn” hoặc “lẻ”, giống như cách sử dụng “2n” (Mọi con thứ hai) hoặc “2n + 1” (Mọi con thứ hai bắt đầu từ con thứ nhất)

NTH-CUỐI-Đứa con

lớp giả. nth-last-child về cơ bản hoạt động như một Pseudo-class. con thứ n, nhưng nó bắt đầu đếm các phần tử từ lớp cuối cùng

Use a in the example on

div[class*="post"] {
  background-color: #333;
  }
1

Thay vì khớp với bốn phần tử li đầu tiên trong danh sách, bộ chọn này sẽ khớp với bốn phần tử cuối cùng

Bạn có thể sử dụng các giá trị “chẵn” hoặc “lẻ”, với sự khác biệt là trong trường hợp này, chúng tôi sẽ tính các giá trị bắt đầu từ giá trị cuối cùng

div[class*="post"] {
  background-color: #333;
  }
3

LOẠI NTH

lớp giả. nth-of-type activity same as. con thứ n, với sự khác biệt là nó chỉ đếm các phần tử đối sánh với phần tử trong bộ chọn

Điều này có thể rất hữu ích nếu chúng ta muốn nhắm mục tiêu các phần tử có thể chứa các phần tử khác nhau bên trong chúng. Ví dụ. hãy tưởng tượng chúng ta muốn chuyển mỗi đoạn thứ hai thành một khối văn bản màu xanh lam, nhưng chúng ta muốn bỏ qua các yếu tố khác như hình ảnh hoặc trích dẫn

div[class*="post"] {
  background-color: #333;
  }
4

Bạn có thể sử dụng các giá trị tương tự như bạn sẽ sử dụng cho Pseudo-class. con thứ n

NTH-CUỐI CÙNG-LOẠI

You don't it. lớp giả. nth-last-of-type may be used precision as Pseudo-class đã nói ở trên. nth-last-child, nhưng lần này, nó sẽ chỉ nhắm mục tiêu các phần tử phù hợp với bộ chọn của chúng tôi

div[class*="post"] {
  background-color: #333;
  }
5

Chúng ta có thể khéo léo hơn nữa và kết hợp nhiều lớp giả này với nhau trên một bộ chọn lớn. Giả sử tất cả các hình ảnh trong bài đăng div sẽ nổi bên trái, ngoại trừ hình ảnh đầu tiên và hình ảnh cuối cùng (giả sử hình ảnh này sẽ có chiều rộng đầy đủ, vì vậy chúng sẽ không bị nổi)

div[class*="post"] {
  background-color: #333;
  }
6

Vì vậy, trong phần đầu tiên của bộ chọn này, chúng tôi đang nhắm mục tiêu mọi hình ảnh bắt đầu từ hình ảnh thứ hai. Trong phần thứ hai, chúng tôi đang nhắm mục tiêu mọi hình ảnh ngoại trừ cuối cùng. Bởi vì các bộ chọn không loại trừ lẫn nhau, chúng tôi có thể sử dụng cả hai trên một bộ chọn, do đó loại trừ cả các phần tử đầu tiên và cuối cùng một lúc

CON CUỐI CÙNG

lớp giả. con cuối cùng hoạt động giống như. Pseudo-class con first, but instead of that target target item to the end of the end of the death section

Hãy để hình ảnh bạn không muốn ở đoạn cuối trong div bài đăng của mình có bên dưới

div[class*="post"] {
  background-color: #333;
  }
7

bộ chọn này sẽ nhắm mục tiêu đoạn cuối cùng là đoạn trực tiếp và là đoạn con cuối cùng của một phần tử có lớp “bài đăng”

LOẠI ĐẦU TIÊN và. LOẠI CUỐI CÙNG

lớp giả. first-of-type được sử dụng để nhắm mục tiêu một phần tử là phần tử đầu tiên của loại nó bên trong cha của nó

Ví dụ. bạn có thể nhắm mục tiêu đoạn đầu tiên là con trực tiếp của một div cụ thể và viết hoa dòng đầu tiên của nó

div[class*="post"] {
  background-color: #333;
  }
8

Với bộ chọn này, bạn chắc chắn rằng bạn chỉ nhắm mục tiêu các đoạn là con trực tiếp của div “bài đăng” và đó là đoạn đầu tiên phù hợp với phần tử p của chúng tôi.

lớp giả. last-of-type active giống nhau, nhưng thay vào đó, nhắm mục tiêu đến con cuối cùng của loại nó

CON MỘT

lớp giả. đứa con duy nhất đại diện cho một phần tử là phần tử con duy nhất của lớp cha của nó

Giả sử bạn có một hộp số (“tin tức”) với các đoạn văn bản bên trong chúng. Khi bạn có nhiều hơn một đoạn văn, bạn muốn văn bản nhỏ hơn so với khi bạn chỉ có một đoạn văn

div[class*="post"] {
  background-color: #333;
  }
9

Đầu tiên, trong bộ chọn, chúng tôi đang xác định kích thước tổng thể của p phần tử là con trực tiếp của div “tin tức”. Ở phần thứ hai, chúng tôi đang ghi đè kích thước phông chữ trước đó bằng cách nói, nếu phần tử p là phần tử con duy nhất của div “tin tức”, thì kích thước phông chữ của nó phải lớn hơn

CHỈ CÓ LOẠI

lớp giả. only-of-type đại diện cho một phần tử là phần tử con duy nhất của lớp cha của nó với cùng một phần tử

Làm thế nào điều này có thể hữu ích? . Một số người trong số họ có nhiều hơn một hình ảnh, nhưng những người khác chỉ có một hình ảnh. Bạn muốn hình ảnh trong những hình ảnh sau này được căn chỉnh vào giữa, khi hình ảnh trên các bài đăng có nhiều hình ảnh sẽ nổi. Điều đó sẽ khá dễ dàng để thực hiện với bộ chọn này

input[type="text"] {
  width: 200px;
  }
0

TRỐNG RỖNG

lớp giả. trống đại diện cho một phần tử không có nội dung bên trong nó

Nó có thể hữu ích theo một số cách. Ví dụ. nếu bạn có nhiều ô trong div “thanh bên” của mình, nhưng không muốn các ô trống xuất hiện trên trang

input[type="text"] {
  width: 200px;
  }
1

Hãy lưu ý rằng ngay cả khi có một khoảng trống trong div “hộp”, nó sẽ không được coi là CSS trống và do đó sẽ không khớp với các bộ chọn

Ghi chú về hỗ trợ trình duyệt Internet Explorer (cho đến phiên bản 8) không hỗ trợ cấu trúc Pseudo-class. Firefox, Safari và Opera hỗ trợ các Pseudo-class này trên các bản phát hành mới nhất của họ. Điều này có nghĩa là nếu những gì nó đang được thực hiện với các bộ chọn này là cơ sở cho khả năng sử dụng và khả năng truy cập của trang web hoặc nếu phần lớn khả năng giả mạo của trang web đang sử dụng IE và bạn không muốn . Nếu không, bạn chỉ có thể phát điên

Lớp phủ giả #

Phủ định lớp giả,. not (), cho phép bạn nhắm mục tiêu các phần tử không khớp với các bộ chọn được đại diện bởi các đối số của nó

Ví dụ. điều này có thể hữu ích nếu bạn cần tạo kiểu cho tất cả các phần tử đầu vào trong một biểu mẫu, nhưng bạn không muốn các phần tử đầu vào của mình có kiểu gửi được tạo kiểu – bạn muốn chúng được tạo theo một kiểu

input[type="text"] {
  width: 200px;
  }
2

Một ví dụ khác. bạn muốn tất cả các đoạn trong div bài đăng của mình có kích thước phông chữ lớn hơn, ngoại trừ kích thước phông chữ cho biết ngày và giờ

input[type="text"] {
  width: 200px;
  }
3

Bạn có thể xác định dung lượng khả năng mà các bộ chọn này mang lại và số lượng bộ chọn vô dụng mà bạn có thể loại bỏ các tệp CSS của mình có được hỗ trợ rộng rãi không?

Lưu ý về trình hỗ trợ duyệt Internet Explorer là kẻ phá đám thông thường của chúng tôi ở đây. không hỗ trợ gì cả, thậm chí không có trên IE8. Điều này có thể có nghĩa là bộ chọn này vẫn sẽ phải đợi một khoảng thời gian trước khi một số nhà phát triển không còn lo sợ về việc thêm chúng vào bảng định dạng của chúng

Phần tử giả #

Phần tử giả cho phép bạn truy cập các phần tử không thực sự tồn tại trong HTML, chẳng hạn như dòng đầu tiên của khối văn bản hoặc chữ cái đầu tiên của nó

Giả mạo phần tử tồn tại trong CSS 2. 1, nhưng CSS đặc tả 3 nói rằng chúng nên được sử dụng với dấu hai chấm “. ”, để phân biệt chúng với Pseudo-class. Trong CSS 2. 1, chúng chỉ được sử dụng với một dấu hai chấm, “. ”. Trình duyệt phải có thể chấp nhận cả hai định dạng, ngoại trừ trường hợp phần tử giả chỉ có thể được giới thiệu trong CSS 3

DÒNG ĐẦU TIÊN

FIRST-LINE sẽ khớp với dòng đầu tiên của khối phần tử, khối nội tuyến, bảng chú thích hoặc bảng phần tử cấp

Điều này đặc biệt hữu ích để thêm các chi tiết kiểu chữ tinh tế vào các khối văn bản của bạn, chẳng hạn như chuyển dòng đầu tiên của một bài báo thành các chữ hoa nhỏ

input[type="text"] {
  width: 200px;
  }
4

Nếu bạn đã chú ý, bạn sẽ biết rằng điều này có nghĩa là đoạn văn xuất hiện ngay sau thẻ h1 (“+”) phải có dòng đầu tiên được viết hoa nhỏ

Bạn cũng có thể tham chiếu đến dòng đầu tiên của một div cụ thể mà không cần phải tham chiếu đến đoạn thẻ thực tế

input[type="text"] {
  width: 200px;
  }
5

Hoặc đi xa hơn một bước và nhắm mục tiêu vào đoạn đầu tiên của mục tiêu có thể trong một div cụ thể

input[type="text"] {
  width: 200px;
  }
6

Tại đây, biểu tượng “>” cho biết rằng bạn đang nhắm mục tiêu đến con trực tiếp của div bài đăng, vì nếu đoạn văn nằm bên trong div thứ hai, thì đoạn văn đó sẽ không khớp với bộ chọn này

CHỮ ĐẦU TIÊN

FIRST-LETTER sẽ khớp với chữ cái đầu tiên của một khối, ngoại trừ khi nó đứng trước một số nội dung khác, như hình ảnh, trên cùng một dòng

Same as. DÒNG ĐẦU TIÊN ,. FIRST-LETTER thường được sử dụng để thêm chi tiết kiểu chữ vào các phần tử của văn bản, chẳng hạn như chữ cái đầu hoặc chữ cái đầu

Đây là cách bạn có thể sử dụng

input[type="text"] {
  width: 200px;
  }
7

Hãy nhớ rằng nếu bạn sử dụng cả hai. dòng đầu tiên và. chữ cái đầu tiên trong cùng một phần tử, các thuộc tính. chữ cái đầu tiên sẽ ghi đè các thuộc tính tương tự được kế thừa từ. dòng đầu tiên

Phần tử này kép khi có thể tạo ra kết quả không mong muốn, nếu bạn không biết về thông số kỹ thuật W3C. nó thực sự là công cụ chọn CSS có thông số kỹ thuật dài nhất. Vì vậy, bạn nên đọc kỹ chúng nếu bạn định sử dụng nó (đối với tất cả các bộ chọn khác)

T. TRƯỚC VÀ. SAU

TRƯỚC VÀ. SAU KHI được sử dụng để chèn nội dung vào trước hoặc sau nội dung của phần tử, hoàn toàn thông qua CSS

Các phần tử này sẽ kế thừa nhiều thuộc tính của các phần tử mà chúng được gắn vào

Hình ảnh bạn muốn chọn từ “Số đồ họa x. ” trước phần mô tả đồ thị và biểu đồ trên trang của bạn. Bạn có thể đạt được điều này mà không cần phải viết các từ “Số đồ họa”, hoặc con số chính

input[type="text"] {
  width: 200px;
  }
8

CSS SElectors Kết luận #

Nói chuyện chán quá đủ rồi, giờ là lúc bạn lấy thông tin về bài viết này và tự mình thử nó. bắt đầu bằng cách tạo một trang thử nghiệm và kiểm tra tất cả các bộ chọn này, quay lại đây khi nghi ngờ và chắc chắn luôn tham khảo ý kiến ​​với các thông số kỹ năng của W3C, nhưng đừng chỉ ngồi đó mà nghĩ rằng vì các bộ chọn đó có kỹ thuật

Nếu bạn thích thú lưu hơn một chút hoặc nếu bạn không ngại bỏ qua quá khứ bao gồm đầy đủ các lớp và id vô dụng và không có ngữ nghĩa, tại sao không đưa một hoặc hai bộ chọn CSS mạnh mẽ này vào dự án tiếp theo của bạn