Css chọn phần tử thứ hai. Cách chọn phần tử cha đầu tiên trong css

Lớp giả :nth-child được sử dụng để thêm kiểu cho các phần tử dựa trên việc đánh số trong cây phần tử.

Chỉ định

	Sự miêu tả	Ví dụ
<тип>	Cho biết loại giá trị.	<размер>
A && B	Các giá trị phải được xuất ra theo thứ tự được chỉ định.	<размер> && <цвет>
A | B	Cho biết rằng bạn chỉ cần chọn một giá trị trong số các giá trị được đề xuất (A hoặc B).	bình thường | vốn hóa nhỏ
Một || B	Mỗi giá trị có thể được sử dụng độc lập hoặc cùng với các giá trị khác theo bất kỳ thứ tự nào.	chiều rộng || đếm
	Các giá trị nhóm	[ cắt || đi qua ]
*	Lặp lại 0 hoặc nhiều lần.	[,<время>]*
+	Lặp lại một hoặc nhiều lần.	<число>+
?	Loại, từ hoặc nhóm được chỉ định là tùy chọn.	chèn vào?
(A, B)	Lặp lại ít nhất A, nhưng không quá B lần.	<радиус>{1,4}
#	Lặp lại một hoặc nhiều lần cách nhau bằng dấu phẩy.	<время>#

×

Giá trị

lẻ Tất cả các số phần tử lẻ. chẵn Tất cả các phần tử được đánh số chẵn.<число>Số thứ tự của phần tử con so với phần tử cha của nó. Đánh số bắt đầu từ 1, đây sẽ là phần tử đầu tiên trong danh sách.<выражение>Nó được chỉ định ở dạng an±b, trong đó a và b là số nguyên và n là bộ đếm tự động nhận giá trị 0, 1, 2...

Nếu a bằng 0 thì nó không được viết và mục nhập được viết tắt là b . Nếu b bằng 0 thì nó cũng không được chỉ định và biểu thức được viết dưới dạng an . a và b có thể là số âm, trong trường hợp này dấu cộng đổi thành dấu trừ, ví dụ: 5n-1.

Bằng cách sử dụng các giá trị a và b âm, một số kết quả cũng có thể âm hoặc bằng 0. Tuy nhiên, các phần tử chỉ bị ảnh hưởng bởi các giá trị dương do việc đánh số phần tử bắt đầu từ 1.

Trong bảng 1 hiển thị một số biểu thức và từ khóa có thể có, đồng thời chỉ ra số phần tử nào sẽ được sử dụng.

Bàn 1. Kết quả cho các giá trị giả lớp khác nhau

Nghĩa	Số mặt hàng	Sự miêu tả
1	1	Phần tử đầu tiên là từ đồng nghĩa với lớp giả :first-child.
5	5	Yếu tố thứ năm.
2n	2, 4, 6, 8, 10,…	Tất cả phần tử chẵn, tương tự của giá trị chẵn .
2n+1	1, 3, 5, 7, 9,…	Tất cả các phần tử lẻ, tương tự như giá trị lẻ.
3n	3, 6, 9, 12, 15,…	Mỗi yếu tố thứ ba.
3n+2	2, 5, 8, 11, 14,…	Mọi phần tử thứ ba, bắt đầu từ phần tử thứ hai.
n+4	4, 5, 6, 7, 8,…	Tất cả các phần tử ngoại trừ ba phần tử đầu tiên.
-n+3	3, 2, 1	Ba yếu tố đầu tiên.
5n-2	3, 8, 13, 18, 23,…	—
thậm chí	2, 4, 6, 8, 10,…	Tất cả các phần tử chẵn.
số lẻ	1, 3, 5, 7, 9,…	Tất cả các yếu tố lẻ.

Có thể kết hợp hai lớp giả :nth-child để chọn một loạt phần tử. Tất cả các phần tử từ hai đến năm sẽ được chọn ở đây.

:nth-child(n+2):nth-child(-n+5) ( … )

Ví dụ

	2134	2135	2136	2137	2138
Dầu	16	34	62	74	57
Vàng	4	69	72	56	47
Cây	7	73	79	34	86
Đá	23	34	88	53	103

TRONG trong ví dụ này Lớp giả :nth-child được sử dụng để thay đổi kiểu của hàng đầu tiên của bảng, cũng như để đánh dấu tất cả các hàng chẵn bằng màu sắc (Hình 1).

Cơm. 1. Áp dụng pseudo-class:nth-child cho các hàng của bảng

Sự chỉ rõ

Mỗi thông số kỹ thuật đều trải qua nhiều giai đoạn phê duyệt.

• Khuyến nghị - Thông số kỹ thuật đã được W3C phê duyệt và được khuyến nghị làm tiêu chuẩn.
• Đề xuất ứng viên ( Khuyến nghị có thể ) - nhóm chịu trách nhiệm về tiêu chuẩn hài lòng vì đã đáp ứng được mục tiêu của mình nhưng cần có sự trợ giúp từ cộng đồng phát triển để thực hiện tiêu chuẩn.
• Khuyến nghị đề xuất Khuyến nghị được đề xuất) - ở giai đoạn này, tài liệu được gửi tới Hội đồng tư vấn của W3C để phê duyệt lần cuối.
• Bản dự thảo đang hoạt động - Một phiên bản hoàn thiện hơn của bản dự thảo đã được thảo luận và sửa đổi để cộng đồng xem xét.
• Bản thảo của người biên tập ( bản thảo biên tập) - phiên bản dự thảo của tiêu chuẩn sau khi các biên tập viên dự án thực hiện các thay đổi.
• Bản nháp ( Thông số kỹ thuật dự thảo) - phiên bản dự thảo đầu tiên của tiêu chuẩn.

×

Tôi chào mừng bạn đến với blog của tôi. Hôm nay tôi muốn viết về chủ đề cách chọn phần tử cha đầu tiên trong CSS, vì điều này cho phép bạn sử dụng ít lớp kiểu hơn.

Lớp giả: con đầu lòng và loại đầu tiên, sự khác biệt là gì?

Để truy cập phần tử đầu tiên từ vùng chứa chính trong CSS, hai lớp giả đã được phát minh. Tôi ngay lập tức khuyên bạn nên xem xét mọi thứ bằng một ví dụ để bạn hiểu:

Giả sử chúng ta có đánh dấu sau. Mục tiêu là lấy đoạn đầu tiên và tạo kiểu cho nó tách biệt với các đoạn khác mà không cần thêm lớp vào đó. Điều này có thể được thực hiện như thế này:

#wrapper p:first-child( Màu: đỏ; )

Màu của đoạn đầu tiên sẽ chuyển sang màu đỏ, bạn có thể kiểm tra.

#wrapper p:loại đầu tiên( color: red; )

Điều tương tự sẽ xảy ra. Vậy sự khác biệt là gì? Và nó nằm ở chỗ lớp giả loại đầu tiên tìm kiếm và tìm thấy phần tử đầu tiên của lớp cha, có tính đến loại của nó, và lớp con đầu tiên không tìm kiếm bất cứ thứ gì - nó chỉ đơn giản lấy phần tử đầu tiên của cha mẹ bắt gặp và nếu đó là một đoạn văn thì áp dụng kiểu cho nó. Nếu không, sẽ không có gì được chọn hoặc áp dụng.

Bây giờ hãy nghĩ: liệu loại đầu tiên có hoạt động trong trường hợp này không? Có, bởi vì nó tính đến loại phần tử và sẽ chọn đoạn đầu tiên chứ không phải đoạn đầu tiên trong tất cả các phần tử. Con đầu lòng có làm việc được không? Hãy thử một lần. Nó sẽ không hoạt động vì đoạn văn không phải là phần tử đầu tiên trong phần gốc.

Cá nhân tôi chưa hiểu ngay sự khác biệt giữa các lớp giả này và đã bối rối trong một thời gian, nhưng bây giờ, tôi hy vọng rằng tôi đã giải thích rõ ràng cho bạn.

Một chi tiết quan trọng khác

Các phần tử được tính chính xác từ phần tử cha, vì vậy nếu bạn chỉ định như thế này:

Li:loại đầu tiên( … )

Sau đó, danh sách các mục đầu tiên trong thẻ cơ thể(nghĩa là trên toàn bộ trang). Vì vậy, trong bất kỳ danh sách nào, mục đầu tiên sẽ được định dạng khác nhau.
Nếu bạn viết nó như thế này:

#sidebar li:loại đầu tiên( … )

Sau đó, chỉ các mục đầu tiên của danh sách trong thanh bên, tức là cột bên trên trang web của chúng tôi, mới được chọn.

Bằng cách sử dụng các bộ chọn khác nhau mà tôi đã viết, bạn có thể tiếp cận hầu hết mọi thành phần trên trang web.

Nhân tiện, tôi đã quên đề cập đến các lớp giả ngược lại - con cuối cùng (và loại cuối cùng, tương ứng). Chúng cho phép bạn chọn phần tử cuối cùng từ vùng chứa chính.

Nó có thể được sử dụng ở đâu trong thực tế?

Chúng ta đang nói về các lớp giả này vì chúng được sử dụng tích cực trong bố cục với sử dụng css. Ví dụ: bạn có một khối trên trang của mình bài viết tương tự, hoặc nhận xét, hoặc điều gì khác. Và bạn đã có ý tưởng bằng cách nào đó thiết kế phần tử đầu tiên của nó theo một cách đặc biệt. Hoặc có thể là cái cuối cùng. Và nói chung, bất cứ ai cũng có thể.

Bạn chỉ cần tìm ra tên của khối nơi phần tử mong muốn được lưu trữ. Giả sử chúng ta đang xử lý các bài đăng phổ biến. Vùng chứa chính có một lớp phổ biến. Sau đó chúng ta viết như thế này:

Phổ biến li:first-of-type( Padding-top: 20px; )

Vậy là xong, mục danh sách đầu tiên trong đó có một vết lõm ở trên cùng, nhưng bạn có thể thêm bất cứ thứ gì bạn muốn vào kiểu đó.

Đây là một ví dụ khác. Tôi chỉ có ba khối màu xám giống hệt nhau trong thẻ body.
Hãy viết nó như thế này:

Div:loại đầu tiên( biến đổi: xoay(7deg); ) div:loại cuối cùng( biến đổi: xoay(-7deg); )

Khối đầu tiên nghiêng về bên phải và khối cuối cùng nghiêng về bên trái.

Và đây chỉ là những ví dụ về vị trí và cách thức các lớp giả của chúng tôi có thể được sử dụng.

Điểm mấu chốt

Đây là bài viết tôi nghĩ ra ngày hôm nay. Điều quan trọng là phải hiểu bản chất của việc lựa chọn phần tử và bạn sẽ có thể sử dụng những kỹ thuật này trong công việc của mình mà không gặp bất kỳ vấn đề gì.

Trong CSS có một bộ chọn, chính xác hơn là bộ chọn giả, được gọi là con thứ n. Một ví dụ về việc sử dụng nó:

Ul li:nth-child(3n+3) ( color: #ccc; )

CSS ở trên thực hiện như sau: Áp dụng kiểu dáng cho mọi mục thứ ba trong danh sách không có thứ tự. Cụ thể là thứ 3, thứ 6, thứ 9, thứ 12, v.v. Nhưng làm thế nào nó hoạt động? Ngoài ra, những lợi ích nào có thể đạt được từ việc sử dụng nth-child ?

Ý nghĩa chính là trong biểu thức trong ngoặc đơn. nth-child chấp nhận hai từ khóa: thậm chí(chẵn) và số lẻ(số lẻ). Ý nghĩa của chúng là hoàn toàn rõ ràng. Chẵn chọn phần tử chẵn (2, 4, 6), lẻ chọn phần tử lẻ (1, 3, 5).

Như trong ví dụ trên, nth-child có thể xử lý các biểu thức. Biểu thức đơn giản nhất có thể là gì? Chỉ là một con số. Nếu bạn viết bất kỳ số nào trong ngoặc, một phần tử sẽ được chọn. Ví dụ: hãy chọn phần tử thứ năm của danh sách:

Ul li:nth-child(5) ( color: #ccc; )

Hãy quay lại ví dụ đầu tiên, trong đó chúng ta sử dụng biểu thức (3n+3). Anh ấy làm việc như thế nào? Tại sao nó chọn mọi phần tử thứ ba? Toàn bộ điểm nằm trong biến n. Nó chấp nhận các giá trị số nguyên từ 0 trở lên. Chúng ta hãy xem xét kỹ hơn:

(3 x 0) + 3 = 3 = phần tử thứ 3 (3 x 1) + 3 = 6 = phần tử thứ 6 (3 x 2) + 3 = 9 = phần tử thứ 9, v.v.

Bây giờ hãy thử biểu thức sau: nth-child(2n+1) :

(2 x 0) + 1 = 1 = Phần tử thứ nhất (2 x 1) + 1 = 3 = Phần tử thứ 3 (2 x 2) + 1 = 5 = Phần tử thứ 5, v.v.

Kết quả là chúng ta thu được kết quả tương tự như trong trường hợp lẻ , vì vậy không cần phải sử dụng biểu thức như vậy thường xuyên. Hơn nữa, ví dụ đầu tiên của chúng ta cũng có thể được đơn giản hóa và sử dụng thay cho biểu thức gốc (3n+3), biểu thức (3n):

(3 x 0) + 0 = 0 = không khớp (3 x 1) + 0 = 3 = Phần tử thứ 3 (3 x 2) + 0 = 6 = Phần tử thứ 6, v.v.

Như bạn có thể thấy, kết quả vẫn như nhau nhưng bạn không cần phải viết “+3”. Chúng ta cũng có thể sử dụng các giá trị âm trong biểu thức. Ví dụ: 4n-1:

(4 x 0) - 1 = -1 = không khớp (4 x 1) - 1 = 3 = phần tử thứ 3 (4 x 2) - 1 = 7 = phần tử thứ 7, v.v.

Việc sử dụng giá trị âm cho hệ số của n có vẻ hơi lạ, vì nếu kết quả âm thì sẽ không tìm thấy kết quả trùng khớp. Bạn sẽ cần phải liên tục thay đổi biểu thức để thêm các yếu tố tích cực. Hóa ra, cách tiếp cận này rất thuận tiện cho việc chọn n phần tử đầu tiên. Hãy xem một ví dụ với "-n+3":

0 + 3 = 3 = phần tử thứ 3 -1 + 3 = 2 = phần tử thứ 2 -2 + 3 = 1 = phần tử thứ 1 -3 + 3 = 0 = không khớp

Khả năng tương thích trên nhiều trình duyệt

nth-child là một trong những thuộc tính không may là hoàn toàn có trên nhiều trình duyệt, ngoại trừ số 0 tuyệt đối trong IE, thậm chí cả phiên bản 8. Vì vậy, khi sử dụng nó, nếu kết quả mong đợi theo một cách nào đó hiệu ứng hình ảnh(ví dụ: tô màu các hàng của một bảng nhất định), thì đây là một cách tiếp cận lý tưởng. Nhưng có lẽ bạn không nên sử dụng nó cho mục đích quan trọng hơn có thể ảnh hưởng đến tính chính xác của bố cục, chẳng hạn như.

Tất nhiên, nếu bạn đang sử dụng jQuery thì bạn không phải lo lắng về điều này vì jQuery thậm chí còn hoạt động trong Internet Explorer.

Và cuối cùng

Bạn có thể chơi với các biểu thức bộ chọn khác nhau tại

Lớp giả con đầu tiên trong CSS được sử dụng để chọn phần tử đầu tiên trong vùng chứa. trong đó loại cụ thể phần tử không được tính đến, chỉ có vị trí của nó so với phần tử gốc là quan trọng. Có một số điều tinh tế về cách thức hoạt động của bộ chọn này mà bạn cần hiểu để sử dụng đúng.

Các lớp giả CSS

Cùng với mã định danh, lớp, thẻ và thuộc tính, lớp giả là một loại bộ chọn CSS. Điểm đặc biệt của chúng là không thể cài đặt trực tiếp bằng HTML.

Ví dụ về các lớp giả là "dòng đầu tiên trong vùng chứa", "chữ cái đầu tiên trong từ", "con đầu tiên của cha mẹ". Trình duyệt chỉ có thể phát hiện các phần tử như vậy sau khi nó đã phân tích trang và biên dịch cây DOM và trong một số trường hợp chỉ sau khi hiển thị.

Tính sẵn có trong CSS cơ chế tương tự cho phép bạn xác định một thiết kế không bị ràng buộc với mã HTML, điều này mở ra những khả năng thiết kế tuyệt vời.

Chọn phần tử đầu tiên

Lớp giả con đầu tiên trong CSS chịu trách nhiệm chọn phần tử đầu tiên trong vùng chứa gốc. Các nút văn bản bị bỏ qua, chỉ các thẻ chính thức mới được tính.

Hãy tìm các phần tử đầu tiên trong hai cấu trúc HTML đơn giản.

• Điểm đầu tiên
• Điểm thứ hai
• Điểm thứ ba

chỉ có hai lối sống cuộc sống của bạn. Đầu tiên- như thể phép màu không tồn tại. Thứ hai- như thể xung quanh chỉ có phép màu. Albert Einstein

Kết quả là mục danh sách đầu tiên và thẻ xác định phong cách táo bạo nét chữ.

Điểm đầu tiên

hai lối

Cú pháp

Tất cả các pseudo-class trong CSS đều được định nghĩa theo một mẫu nhất định. Đầu tiên, bộ chọn chính được chỉ định, sau đó là lớp giả mong muốn, được phân tách bằng dấu hai chấm.

B:con đầu lòng ( text-trang trí: gạch chân; )

Quy tắc này sẽ gạch chân văn bản của phần tử b đầu tiên bên trong mỗi vùng chứa.

• Mọi người đều muốn thay đổi thế giới riêng tôi. Lev Tolstoy
• Người biết cách anh ấy làm ai không biết làm thế nào - anh ấy dạy người khác. Bernard Hiện

Trong ảnh chụp màn hình, rõ ràng là chỉ các phần tử tương ứng với cả bộ chọn thẻ b và bộ chọn lớp giả: con đầu lòng mới được chọn. Phong cách này đã được áp dụng bên trong mỗi container, trong trong trường hợp này bên trong tất cả các mục danh sách.

Ngoài thẻ, bạn có thể sử dụng bất kỳ bộ chọn CSS nào khác làm bộ chọn chính, ví dụ:

Lớp:con đầu () :con đầu () *:con đầu ()

Lỗi thường gặp

Lớp giả con đầu tiên trong CSS chọn lọc nghiêm ngặt thẻ xuất hiện đầu tiên trong vùng chứa chính. Ngay cả khi một phần tử hoàn toàn khớp với bộ chọn nhưng không phải là phần tử con đầu tiên thì phần tử đó sẽ không được chọn.

Ví dụ: hãy lấy danh sách trích dẫn trước đó và chuyển tác giả về đầu.

• Lev Tolstoy Mọi người đều muốn thay đổi thế giới nhưng không ai muốn thay đổi riêng tôi.
• Bernard Hiện Người biết cách anh ấy làm ai không biết làm thế nào - anh ấy dạy người khác.

Mặc dù bộ chọn phần tử vẫn giữ nguyên nhưng kiểu CSS không được áp dụng vì phần tử đầu tiên trong vùng chứa hiện là i.

Một sai lầm khác là bỏ qua Đây là phần tử HTML giống như các phần tử khác. Nếu nó xuất hiện trong vùng chứa trước khối bạn đang tìm kiếm thì bộ chọn con đầu tiên của CSS sẽ không hoạt động.

Kế toán loại phần tử

Tránh tình huống tương tự, bạn có thể sử dụng loại giả đầu tiên. Nó hoạt động giống như bộ chọn con đầu tiên của CSS, nhưng có tính đến loại phần tử.

B:loại đầu tiên ( text-trang trí: gạch dưới; )

Bây giờ chỉ những phần tử khớp với bộ chọn b mới được tính.

Chọn phần tử cuối cùng

Ngoài ra còn có một lớp giả con cuối cùng hoạt động tương tự Bộ chọn CSS con đầu lòng, nhưng bắt đầu đếm các phần tử từ cuối vùng chứa.

CSS (Cascading Style Sheets) hoặc các biểu định kiểu xếp tầng, được dùng để mô tả vẻ bề ngoài tài liệu được viết bằng ngôn ngữ đánh dấu. Thông thường, các kiểu CSS được sử dụng để tạo và thay đổi kiểu của các thành phần trang web và giao diện người dùng viết vào Ngôn ngữ HTML và XHTML, nhưng cũng có thể được áp dụng cho bất kỳ loại tài liệu XML nào, bao gồm XML, SVG và XUL.

Các biểu định kiểu xếp tầng mô tả các quy tắc định dạng các thành phần bằng cách sử dụng các thuộc tính và giá trị chấp nhận được những tính chất này. Đối với mỗi yếu tố bạn có thể sử dụng bộ giới hạn thuộc tính, các thuộc tính khác sẽ không có bất kỳ ảnh hưởng nào đến nó.

Một khai báo kiểu bao gồm hai phần: phần tử trang web - bộ chọn và các lệnh định dạng - khối quảng cáo. Bộ chọn cho trình duyệt biết phần tử nào cần định dạng và khối khai báo (mã trong dấu ngoặc nhọn) liệt kê các lệnh định dạng - thuộc tính và giá trị của chúng.

Cơm. 1. Cấu trúc khai báo kiểu CSS

Các loại biểu định kiểu xếp tầng và thông số cụ thể của chúng

1. Các loại style sheet

1.1. Bảng kiểu dáng bên ngoài

Bảng kiểu dáng bên ngoàiđại diện tập tin văn bản với phần mở rộng .css, chứa một tập hợp các kiểu CSS cho các phần tử. Tệp được tạo trong trình chỉnh sửa mã, giống như trang HTML. Tệp chỉ có thể chứa các kiểu, không có đánh dấu HTML. Một biểu định kiểu bên ngoài được kết nối với một trang web bằng thẻ , nằm bên trong phần . Những kiểu này hoạt động cho tất cả các trang của trang web.

Bạn có thể đính kèm nhiều style sheet vào mỗi trang web bằng cách thêm nhiều thẻ theo thứ tự , cho biết mục đích của biểu định kiểu này trong thuộc tính thẻ phương tiện. rel="stylesheet" chỉ định loại liên kết (liên kết đến biểu định kiểu).

Thuộc tính type="text/css" không được yêu cầu bởi tiêu chuẩn HTML5 nên có thể bỏ qua. Nếu thuộc tính bị thiếu, giá trị mặc định là type="text/css" .

1.2. Phong cách nội bộ

Phong cách nội bộđược nhúng trong một phần Tài liệu HTML và được xác định bên trong thẻ. Kiểu bên trong được ưu tiên hơn kiểu bên ngoài, nhưng kém hơn kiểu nội tuyến (được chỉ định thông qua thuộc tính style).

...

1.3. Phong cách tích hợp

Khi chúng tôi viết kiểu nội tuyến, chúng tôi viết mã CSS vào tệp HTML, ngay bên trong thẻ phần tử bằng cách sử dụng thuộc tính phong cách:

Hãy chú ý đến văn bản này.

Các kiểu như vậy chỉ ảnh hưởng đến phần tử mà chúng được đặt.

1.4. quy tắc @import

quy tắc @import Cho phép bạn tải các biểu định kiểu bên ngoài. Để lệnh @import hoạt động, nó phải xuất hiện trong biểu định kiểu (bên ngoài hoặc bên trong) trước tất cả các quy tắc khác:

Quy tắc @import cũng được sử dụng để bao gồm các phông chữ web:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Các loại bộ chọn

Bộ chọn thể hiện cấu trúc của một trang web. Chúng giúp tạo ra các quy tắc để định dạng các thành phần trang web. Bộ chọn có thể là các phần tử, lớp và mã định danh của chúng, cũng như các lớp giả và phần tử giả.

2.1. Bộ chọn phổ quát

Phù hợp với bất kỳ phần tử HTML nào. Ví dụ: * (margin: 0;) sẽ đặt lại về 0 lề cho tất cả các thành phần của trang web. Bộ chọn cũng có thể được sử dụng kết hợp với lớp giả hoặc phần tử giả: *:after (kiểu CSS) , *:checked (kiểu CSS) .

2.2. Bộ chọn phần tử

Bộ chọn phần tử cho phép bạn định dạng tất cả các phần tử thuộc loại này trên tất cả các trang của trang web. Ví dụ: h1 (họ phông chữ: Tôm hùm, chữ thảo;) sẽ đặt phong cách chungđịnh dạng tất cả các tiêu đề h1.

2.3. Bộ chọn lớp

Bộ chọn lớp cho phép bạn chỉ định kiểu cho một hoặc nhiều phần tử với cùng tên lớp học nằm ở Những nơi khác nhau trang hoặc trên các trang khác nhauđịa điểm. Ví dụ: để tạo tiêu đề với lớp tiêu đề, bạn cần thêm thuộc tính lớp có tiêu đề giá trị vào thẻ mở

và đặt kiểu cho lớp được chỉ định. Các kiểu được tạo bằng cách sử dụng một lớp có thể được áp dụng cho các thành phần khác, không nhất thiết phải thuộc loại đó.

Hướng dẫn sử dụng máy tính cá nhân

.headline ( chuyển đổi văn bản: chữ hoa; màu: xanh nhạt; )

2.4. bộ chọn ID

Bộ chọn ID cho phép bạn định dạng một phần tử cụ thể. Id phải là duy nhất và chỉ có thể xuất hiện một lần trên một trang.

#sidebar ( chiều rộng: 300px; float: trái; )

2.5. Bộ chọn con cháu

Bộ chọn con cháu áp dụng kiểu cho các phần tử trong phần tử vùng chứa. Ví dụ: ul li (text-transform: chữ hoa;) - sẽ chọn tất cả các phần tử li là con của tất cả các phần tử ul.

Nếu bạn cần định dạng con cháu yếu tố cụ thể, phần tử này cần được cấp một lớp kiểu:

p.first a (màu: xanh lá cây;) — phong cách này sẽ áp dụng cho tất cả các liên kết con của một đoạn văn có lớp đầu tiên;

p .first a (color: green;) - nếu bạn thêm khoảng trắng, các liên kết nằm bên trong bất kỳ thẻ lớp .first nào là hậu duệ của phần tử sẽ được tạo kiểu

Đầu tiên a (color: green;) - kiểu này sẽ được áp dụng cho bất kỳ liên kết nào nằm bên trong một phần tử khác, được chỉ định bởi class.first .

2.6. Bộ chọn con

Phần tử con là phần tử con trực tiếp của phần tử chứa nó. Một phần tử có thể có nhiều phần tử phần tử con và mỗi phần tử chỉ có thể có một phần tử cha. Bộ chọn con chỉ cho phép bạn áp dụng kiểu nếu phần tử con xuất hiện ngay sau phần tử cha và không có phần tử nào khác giữa chúng, nghĩa là phần tử con không được lồng trong bất kỳ phần tử nào khác.
Ví dụ: p > strong sẽ chọn tất cả các phần tử mạnh là con của phần tử p.

2.7. Bộ chọn chị em

Tình chị em xảy ra giữa các phần tử có chung cha mẹ. Bộ chọn anh chị em cho phép bạn chọn các phần tử từ một nhóm các phần tử có cùng cấp độ.

h1 + p - sẽ chọn tất cả các đoạn đầu tiên ngay sau bất kỳ thẻ nào

, không ảnh hưởng đến các đoạn còn lại;

h1 ~ p - sẽ chọn tất cả các đoạn văn có quan hệ chị em với bất kỳ tiêu đề h1 nào và ngay sau nó.

2.8. Bộ chọn thuộc tính

Bộ chọn thuộc tính chọn các thành phần dựa trên tên thuộc tính hoặc giá trị thuộc tính:

[thuộc tính] - tất cả các phần tử chứa thuộc tính được chỉ định - tất cả các phần tử được chỉ định thuộc tính alt;

selector[attribute] - các phần tử thuộc loại này chứa thuộc tính được chỉ định, img - chỉ những hình ảnh được chỉ định thuộc tính alt;

selector[attribute="value"] - các phần tử thuộc loại này chứa thuộc tính được chỉ định với một giá trị cụ thể, img - tất cả các ảnh có tiêu đề chứa từ hoa;

selector[attribute~="value"] - các phần tử chứa một phần giá trị đã cho, ví dụ: nếu một số lớp được chỉ định cho một phần tử được phân tách bằng dấu cách, p - các đoạn văn có tên lớp chứa tính năng ;

selector[attribute|="value"] - các phần tử có danh sách giá trị thuộc tính bắt đầu bằng từ được chỉ định, p - các đoạn có tên lớp là feature hoặc bắt đầu bằng feature ;

selector[attribute^="value"] - các phần tử có giá trị thuộc tính bắt đầu bằng giá trị được chỉ định, a - tất cả các liên kết bắt đầu bằng http:// ;

selector[attribute$="value"] - các phần tử có giá trị thuộc tính kết thúc bằng giá trị được chỉ định, img - tất cả hình ảnh ở định dạng png;

selector[attribute*="value"] - các phần tử có giá trị thuộc tính chứa từ được chỉ định ở bất kỳ đâu, a - tất cả các liên kết có tên chứa book .

2.9. Bộ chọn lớp giả

Các lớp giả là các lớp không thực sự được gắn vào thẻ HTML. Chúng cho phép bạn áp dụng các quy tắc CSS cho các phần tử khi một sự kiện xảy ra hoặc tuân theo một quy tắc cụ thể. Các lớp giả mô tả các phần tử với các thuộc tính sau:

:hover - bất kỳ phần tử nào mà con trỏ chuột được di chuột qua;

:tập trung - yếu tố tương tác, được truy cập bằng bàn phím hoặc được kích hoạt bằng chuột;

:active - phần tử được người dùng kích hoạt;

:valid - các trường biểu mẫu có nội dung đã được kiểm tra trong trình duyệt xem có tuân thủ loại dữ liệu đã chỉ định hay không;

:invalid - các trường biểu mẫu có nội dung không khớp với kiểu dữ liệu đã chỉ định;

:enabled - tất cả các trường biểu mẫu đang hoạt động;

:disabled - các trường biểu mẫu bị chặn, tức là ở trạng thái không hoạt động;

:in-range - các trường biểu mẫu có giá trị nằm trong phạm vi được chỉ định;

:out-of-range - các trường biểu mẫu có giá trị không nằm trong phạm vi đã chỉ định;

:lang() - các phần tử có văn bản bằng ngôn ngữ được chỉ định;

:not(selector) - các phần tử không chứa bộ chọn được chỉ định - lớp, mã định danh, tên hoặc loại trường biểu mẫu - :not() ;

:target là một phần tử có ký hiệu # được tham chiếu trong tài liệu;

:checked - các phần tử biểu mẫu đã chọn (do người dùng chọn).

2.10. Bộ chọn lớp giả cấu trúc

Các lớp giả cấu trúc chọn các phần tử con theo tham số được chỉ định trong ngoặc đơn:

:nth-child(odd) - phần tử con lẻ;

:nth-child(even) - ngay cả các phần tử con;

:nth-child(3n) - mọi phần tử thứ ba trong số trẻ em;

:nth-child(3n+2) - chọn mọi phần tử thứ ba, bắt đầu từ phần tử con thứ hai (+2) ;

:nth-child(n+2) - chọn tất cả các phần tử bắt đầu từ phần tử thứ hai;

:nth-child(3) - chọn phần tử con thứ ba;

:nth-last-child() - trong danh sách các phần tử con, chọn phần tử có vị trí được chỉ định, tương tự như:nth-child() , nhưng bắt đầu từ cái cuối cùng, theo hướng ngược lại;

:first-child - cho phép bạn chỉ tạo kiểu cho phần tử con đầu tiên của thẻ;

:last-child - cho phép bạn định dạng phần tử con cuối cùng của thẻ;

:only-child - chọn một phần tử là phần tử con duy nhất;

:empty - chọn các phần tử không có phần tử con;

:root - chọn phần tử gốc trong tài liệu - phần tử html.

2.11. Bộ chọn lớp giả kiểu cấu trúc

Cho biết một loại thẻ con cụ thể:

:nth-of-type() - chọn các phần tử tương tự :nth-child() , nhưng chỉ tính đến loại phần tử;

:first-of-type - chọn con đầu tiên của một loại nhất định;

:last-of-type - chọn phần tử cuối cùng của loại này;

:nth-last-of-type() - chọn một phần tử thuộc loại đã cho trong danh sách các phần tử theo vị trí đã chỉ định, bắt đầu từ cuối;

:only-of-type - chọn phần tử duy nhất thuộc loại được chỉ định trong số các phần tử con của phần tử cha.

2.12. Bộ chọn phần tử giả

Các phần tử giả được sử dụng để thêm nội dung được tạo bằng thuộc tính nội dung:

:first-letter - chọn chữ cái đầu tiên của mỗi đoạn văn, chỉ áp dụng cho các thành phần khối;

:first-line - chọn dòng đầu tiên của văn bản phần tử, chỉ áp dụng cho các phần tử khối;

:trước - chèn nội dung được tạo trước phần tử;

:after - thêm nội dung được tạo sau phần tử.

3. Tổ hợp lựa chọn

Để chọn các thành phần định dạng chính xác hơn, bạn có thể sử dụng kết hợp các bộ chọn:

img:nth-of-type(even) - sẽ chọn tất cả các hình ảnh được đánh số chẵn có văn bản thay thế chứa từ css .

4. Nhóm bộ chọn

Cùng một phong cách có thể được áp dụng cho nhiều phần tử cùng một lúc. Để thực hiện việc này, bạn cần liệt kê các bộ chọn bắt buộc ở bên trái của phần khai báo, phân tách bằng dấu phẩy:

H1, h2, p, span ( màu: cà chua; nền: trắng; )

5. Kế thừa và xếp tầng

Kế thừa và phân tầng là hai khái niệm cơ bản trong CSS có liên quan chặt chẽ với nhau. Kế thừa là nơi các phần tử kế thừa các thuộc tính từ phần tử cha của chúng (phần tử chứa chúng). Dòng thác thể hiện ở chỗ các loại khác nhau các biểu định kiểu được áp dụng cho một tài liệu và cách các quy tắc xung đột ghi đè lên nhau.

5.1. Di sản

Di sản là cơ chế mà một số đặc tính nhất định được truyền từ tổ tiên sang con cháu của nó. Đặc tả CSS cho phép kế thừa các thuộc tính liên quan đến nội dung văn bản của trang, chẳng hạn như màu sắc, phông chữ, khoảng cách chữ, chiều cao dòng, kiểu danh sách, căn chỉnh văn bản, thụt lề văn bản, chuyển đổi văn bản, khả năng hiển thị, màu trắng -dấu cách và khoảng cách giữa các từ. Trong nhiều trường hợp, điều này thuận tiện vì bạn không phải đặt cỡ phông chữ và họ phông chữ cho mọi thành phần trên trang web.

Các thuộc tính liên quan đến định dạng khối không được kế thừa. Đó là nền , đường viền , màn hình hiển thị , float và rõ ràng , chiều cao và chiều rộng , lề , min-max-height và -width , phác thảo , tràn , phần đệm , vị trí , trang trí văn bản , căn chỉnh dọc và chỉ mục z .

Thừa kế cưỡng bức

Bằng cách sử dụng từ khóa kế thừa có thể buộc một phần tử kế thừa bất kỳ giá trị thuộc tính nào của phần tử cha của nó. Điều này hoạt động ngay cả đối với các thuộc tính không được kế thừa theo mặc định.

Cách thiết lập và hoạt động các kiểu CSS

1) Kiểu có thể được kế thừa từ phần tử cha (thuộc tính được kế thừa hoặc sử dụng giá trị kế thừa);

2) Các kiểu nằm trong biểu định kiểu bên dưới sẽ ghi đè các kiểu nằm trong bảng bên trên;

3) Có thể áp dụng kiểu từ một thành phần nguồn khác nhau. Bạn có thể kiểm tra kiểu nào được áp dụng trong chế độ nhà phát triển trình duyệt. Để thực hiện việc này, hãy nhấp vào phần tử click chuột phải chuột và chọn “Xem mã” (hoặc một cái gì đó tương tự). Cột bên phải sẽ liệt kê tất cả các thuộc tính được đặt trên phần tử này hoặc được kế thừa từ phần tử cha, cùng với các tệp kiểu mà chúng được chỉ định và số thứ tự của dòng mã.

Cơm. 2. Chế độ nhà phát triển trong trình duyệt Google Trình duyệt Chrome

4) Khi xác định kiểu, bạn có thể sử dụng bất kỳ kết hợp bộ chọn nào - bộ chọn phần tử, lớp giả phần tử, lớp hoặc mã định danh phần tử.

div (viền: 1px rắn #eee;) #wrap (chiều rộng: 500px;).box (float: left;).clear (clear: cả hai;)

5.2. Thác nước

Xếp tầng là cơ chế điều khiển kết quả cuối cùng trong trường hợp các quy tắc CSS khác nhau được áp dụng cho một phần tử. Có ba tiêu chí xác định thứ tự các thuộc tính được áp dụng—quy tắc quan trọng, tính cụ thể và thứ tự các biểu định kiểu được đưa vào.

Quy tắc!quan trọng

Trọng số của quy tắc có thể được chỉ định bằng từ khóa!important, được thêm ngay sau giá trị thuộc tính, ví dụ: span (font-weight: đậm!important;) . Quy tắc phải được đặt ở cuối phần khai báo, trước dấu ngoặc đóng, không có khoảng trắng. Thông báo như vậy sẽ được ưu tiên hơn tất cả các quy tắc khác. Quy tắc này cho phép bạn hủy giá trị thuộc tính và đặt giá trị mới cho một phần tử từ một nhóm phần tử trong trường hợp không có quyền truy cập trực tiếp vào tệp kiểu.

Tính đặc hiệu

Với mỗi quy tắc, trình duyệt sẽ tính toán độ đặc hiệu của bộ chọn và nếu một phần tử có các khai báo thuộc tính xung đột nhau thì quy tắc có tính đặc hiệu nhất sẽ được tính đến. Giá trị độ đặc hiệu có bốn phần: 0, 0, 0, 0. Độ đặc hiệu của bộ chọn được xác định như sau:

đối với id thì thêm 0, 1, 0, 0;
đối với lớp 0, 0, 1, 0 được thêm vào;
đối với mỗi phần tử và phần tử giả, 0, 0, 0, 1 được thêm vào;
đối với kiểu nội tuyến được thêm trực tiếp vào một phần tử - 1, 0, 0, 0 ;
Bộ chọn phổ quát không có tính đặc hiệu.

H1 (màu: xanh nhạt;) /*độ đặc hiệu 0, 0, 0, 1*/ em (màu: bạc;) /*độ đặc hiệu 0, 0, 0, 1*/ h1 em (màu: vàng;) /*độ đặc hiệu: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (màu: xanh lam;) /*độ đặc hiệu: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (màu: xám;) /*độ đặc hiệu 0, 0, 1, 0 */ #sidebar (màu: cam;) /*độ đặc hiệu 0, 1, 0, 0*/ li#sidebar (màu: nước;) /*độ đặc hiệu: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Do đó, những quy tắc cụ thể hơn sẽ được áp dụng cho phần tử. Ví dụ: nếu một phần tử có hai đặc tính với các giá trị 0, 0, 0, 2 và 0, 1, 0, 1 thì quy tắc thứ hai sẽ thắng.

Thứ tự các bảng được kết nối

Bạn có thể tạo nhiều biểu định kiểu bên ngoài và kết nối chúng với một trang web. Nếu ở các bảng khác nhau sẽ gặp những nghĩa khác nhau thuộc tính của một phần tử thì kết quả là quy tắc trong biểu định kiểu được liệt kê bên dưới sẽ được áp dụng cho phần tử đó.