CSS3 Bộ chọn lựa - núm vú

Một phần của CSS3 Dành cho người mới bắt đầu Cheat Sheet

CSS3 cung cấp truy cập vào nhiều bộ chọn bạn sử dụng để xác định phần tử nào định dạng trên một trang. Bộ chọn lựa định nghĩa định dạng; phong cách định nghĩa làm thế nào để định dạng nó. Tuy nhiên, rất dễ dàng để đi vào quá tải bộ chọn. Hầu hết các nhà phát triển sử dụng một sự kết hợp của bộ chọn từ khóa và thuộc tính để thực hiện tất cả các tác vụ liên quan đến bộ chọn. Đây là các công cụ chọn thẻ thông dụng, cung cấp phương pháp lựa chọn tổng thể.

, Thẻ : Việc tách hai thẻ bằng dấu phẩy có nghĩa là chọn cả hai thẻ, bất kể vị trí chúng xuất hiện trong tài liệu. Ví dụ: bằng cách sử dụng p, div sẽ chọn tất cả và các thẻ trong tài liệu.

Thẻ >>

Thẻ : Việc tách hai thẻ với dấu lớn hơn (>) nói với trình duyệt chọn một thẻ có một thẻ khác làm cha mẹ. Ví dụ: nếu bạn có và sử dụng div> p, trình duyệt sẽ chọn thẻ .

Thẻ

Thẻ

: Việc tách hai thẻ theo dấu cách cho phép trình duyệt chọn một thẻ xuất hiện trong một thẻ khác. Bộ chọn này khác với sử dụng dấu hiệu lớn hơn mà thẻ đầu tiên không cần phải trực tiếp xuất hiện ngay trước thẻ thứ hai. Ví dụ: nếu bạn có và sử dụng div> p, trình duyệt sẽ không chọn bất cứ điều gì. Tuy nhiên, nếu bạn sử dụng div p, trình duyệt sẽ chọn thẻ .

+

Thẻ

: Việc tách hai thẻ với dấu cộng (+) cho trình duyệt chọn một thẻ xuất hiện ngay sau thẻ khác. Ví dụ: nếu bạn có và sử dụng div + p, trình duyệt sẽ chọn thẻ . Lưu ý rằng thẻ không xuất hiện bên trong thẻ, nó xuất hiện sau thẻ.

Thẻ

~

Thẻ

: Việc tách hai thẻ với dấu ngã (~) nói với trình duyệt chọn mỗi thẻ xuất hiện sau một thẻ khác. Ví dụ: nếu bạn có và sử dụng div ~ p, trình duyệt sẽ chọn cả hai thẻ . Điều này khác với div + p (trong đó trình duyệt sẽ chỉ chọn thẻ đầu tiên đi theo thẻ).

: root

:

Chọn phần tử gốc của tài liệu. Phần tử gốc phụ thuộc vào loại tài liệu. Bộ chọn này thường được sử dụng với các tài liệu XML, nhưng bạn có thể sử dụng nó với bất kỳ loại tài liệu nào.

Để có thể lựa chọn tốt các yếu tố đúng, các nhà phát triển thường sử dụng các bộ chọn thuộc tính thay cho các công cụ chọn thẻ. Dưới đây là các bộ chọn thuộc tính mà các nhà phát triển thường sử dụng. . ClassName :

Chọn bất kỳ đối tượng nào có giá trị thuộc tính lớp với tên đã cho. Ví dụ,. StdPara sẽ chọn tất cả các đối tượng có thuộc tính class = "StdPara" mà không quan tâm đến loại đối tượng.

• #Id : Chọn bất kỳ đối tượng nào có giá trị thuộc tính id với tên đã cho. Ví dụ: #ThirdHeader sẽ chọn mọi đối tượng có thuộc tính id = "ThirdHeader" mà không quan tâm đến loại đối tượng.

• : lang (Language Identifier) ​​: Chọn bất kỳ đối tượng nào có giá trị ngôn ngữ được chỉ định. Ví dụ: lang (en) sẽ chọn bất kỳ đối tượng nào sử dụng tiếng Anh làm ngôn ngữ của nó. Dưới đây là danh sách các định danh ngôn ngữ chung.

• [Thuộc tính ]

• : Chọn tất cả các đối tượng sử dụng một thuộc tính cụ thể bất kể giá trị của thuộc tính. Ví dụ, [lang] sẽ chọn tất cả các đối tượng sử dụng thuộc tính lang. Thuộc tính =

• Giá trị > : Chọn tất cả các đối tượng có thuộc tính với một giá trị cụ thể. Giá trị phải khớp chính xác. Ví dụ, [lang = "en-us"] sẽ chọn mọi đối tượng có thuộc tính ngôn ngữ có giá trị bằng tiếng Anh. Thuộc tính ~ =

• Giá trị > : Chọn tất cả các đối tượng có thuộc tính chứa giá trị cụ thể. Giá trị tìm kiếm chỉ cần xuất hiện ở một nơi nào đó trong giá trị tổng thể. Ví dụ: [title ~ = "Trung học"] chọn tất cả các đối tượng có thuộc tính tiêu đề có chứa từ Thứ cấp như một từ rời rạc. Công cụ chọn này hoạt động với toàn bộ từ. Thuộc tính | =

• Giá trị : Chọn tất cả các đối tượng có thuộc tính bắt đầu bằng một giá trị cụ thể. Giá trị tìm kiếm cần xuất hiện ở đầu giá trị như một tổng thể, nhưng không phải là toàn bộ giá trị. Ví dụ, [title | = "Sub"] chọn tất cả các đối tượng có thuộc tính tiêu đề bắt đầu bằng từ Sub. Bộ chọn này hoạt động với các thuật ngữ phân cách. Giá trị ^ =

• Giá trị > : Chọn tất cả các đối tượng có thuộc tính bắt đầu bằng một giá trị cụ thể. Ví dụ, [title | = "Sub"] chọn tất cả các đối tượng có thuộc tính tiêu đề bắt đầu bằng từ Sub. Biểu mẫu này của bộ chọn ít hạn chế hơn thuộc tính [Thuộc tính | = Giá trị]. Sử dụng mẫu này sẽ chọn title = "SubHeader", title = "Tiêu đề phụ" hoặc title = "Tiêu đề phụ" với độ tin cậy bằng. Thuộc tính $ =

• Giá trị : Chọn tất cả các đối tượng có thuộc tính kết thúc bằng một giá trị cụ thể. Ví dụ: [title $ = "Trung học"] chọn tất cả các đối tượng có thuộc tính tiêu đề kết thúc bằng từ Thứ Hai. Hình thức thuộc tính này là không giới hạn - nó không yêu cầu định dạng đặc biệt. Thuộc tính * =

• Giá trị > : Chọn tất cả các đối tượng có thuộc tính có chứa một giá trị cụ thể. Ví dụ: [title $ = "Trung học"] chọn tất cả các đối tượng có thuộc tính tiêu đề có chứa từ Khoá phụ. Biểu mẫu này của bộ chọn ít hạn chế hơn thuộc tính Thuộc tính ~ = Giá trị ]. Sử dụng mẫu này sẽ chọn title = "SecondaryParagraph", title = "Secondary Paragraph", hoặc title = "Secondary-Paragraph" với độ tin cậy bằng. Một bộ chọn đặc biệt not () sẽ hoàn thành mảng selectors chung.Để cho trình duyệt không chọn một thẻ hoặc thuộc tính cụ thể, nhưng để chọn mọi thứ khác thay vào đó, bạn sử dụng bộ chọn: not (). Ví dụ:: không (p) sẽ chọn tất cả mọi thứ trừ các thẻ đoạn văn trên trang.