Làm cách nào để bạn chọn tất cả trừ phần tử cuối cùng trong css?

Chương này trong loạt bài StyleFacts nói về cách bạn có thể chọn nguyên tố của mình-'vũ khí lựa chọn'. bộ chọn. Bạn sẽ thấy cách các bộ chọn có thể được chỉ định cho hiệu ứng xếp tầng phù hợp. Bạn sẽ tìm hiểu cách ghi đè bộ chọn và cách áp dụng bộ chọn trên phần tử một cách gián tiếp bằng bộ chọn giả. Chúng ta có thể chọn các phần tử. Chúng ta có thể chọn hành vi của các phần tử, bằng cách chọn trạng thái. Chúng tôi thậm chí có thể chọn các yếu tố không thực sự ở đó. Đó là nơi bạn sẽ đạt đến cấp bộ chọn cuối cùng là phần tử giả. Hãy xem mức độ lựa chọn nào phù hợp nhất để áp dụng phong cách của bạn. bộ chọn, bộ chọn giả hoặc bộ chọn phần tử giả

Giống như hầu hết các bạn có thể đã trải qua, phong cách viết là một hành động cân bằng giữa việc viết các bộ chọn kiểu quá cụ thể (chỉ nhắm mục tiêu một thứ) và các bộ chọn quá toàn cầu (làm rối tung mọi thứ chúng chạm vào). )

.page-container div

cái này chẳng hạn. Trong đó 'div' là phần tử được sử dụng rộng rãi nhất nhắm mục tiêu một 'div' ngẫu nhiên trong lớp toàn cầu, sẽ nhắm mục tiêu mọi phần tử 'div' trên trang của bạn. Chọn mọi lớp và phần tử trên đường đến mục tiêu, sẽ là kịch bản ngược lại. Đây không phải là cách hiệu quả để nhắm mục tiêu mục được tạo kiểu. Nó cung cấp cho bạn các biểu định kiểu lớn nhắm mục tiêu rất ít mỗi lần

Các loại bộ chọn

Vậy có những loại bộ chọn nào? . Tôi đã liệt kê chúng cho bạn theo thứ tự ưu tiên sử dụng

Lớp

.class-selector {}

Theo tôi, bộ chọn thích hợp nhất, nó nhắm mục tiêu các phần tử có lớp được chỉ định sau dấu chấm

Thành phần

element-selector {}

Bộ chọn phần tử yếu hơn thì việc sử dụng trực tiếp bộ chọn lớp và loại phần tử đích

Thuộc tính

element[attribute="selector"] {}

Nó yếu hơn (ít cụ thể hơn) sau đó sử dụng bộ chọn phần tử và được viết giữa các dấu ngoặc '[]'

Phổ quát

element > * {} /* universal selector*/

Không được chỉ định cho một phần tử hoặc một lớp. Đó là một bộ chọn mạnh mẽ, vì vậy hãy cẩn thận khi sử dụng theo cách toàn cầu. nó được trình bày bởi một dấu hoa thị

TÔI

#idSelector {}

Bộ chọn mạnh nhất hiện có có thể được sử dụng. Đây cũng là vấn đề. Nếu bạn sử dụng bộ chọn ID trong lựa chọn kết hợp. Nó có thể chế ngự rất nhiều lựa chọn gốc tổ hợp tương tự. Đây là một cây cầu tốt đẹp để kết hợp. Đó là kết hợp các loại bộ chọn ở trên thành một vùng chọn

Bộ kết hợp

Khi bạn kết hợp các lớp, chúng sẽ trở nên cụ thể hơn. Bằng cách này, bạn có thể nhắm mục tiêu các lớp được lồng sâu hơn trong mẫu của mình mà không ảnh hưởng đến các phần tử khác. Có bốn cách để kết hợp các bộ chọn thành một tổ hợp. Bởi Con cháu, Con cái, Anh chị em ruột và Tổng hợp Anh chị em ruột. Được biết đến nhiều nhất và được sử dụng nhiều nhất là Descendent Combinator

hậu duệ

.parent-class .descendant-class

Đây là nơi một phần tử (cha) và một phần tử ở một (vài) cấp lồng nhau hơn được kết hợp trong một bộ chọn.
Bộ chọn mức lồng nhau không nhất thiết phải là phần tử con của phần tử được nhắm mục tiêu bởi bộ chọn cấp độ cha. Đây là cách bạn có thể bỏ qua các cấp của bộ chọn rõ ràng để đến bộ chọn mục tiêu của mình, thông qua các mốc 'duy nhất' trong mẫu của bạn.

Trẻ em

.parent-class > .child-class

Mặc dù không cần thiết phải chỉ định các phần tử con trực tiếp làm bộ chọn, nhưng điều này có thể được thực thi trong CSS bằng cách xâu chuỗi bộ kết hợp với một chữ V (mũi tên) ở bên phải. Điều này sẽ nhắm mục tiêu tất cả trẻ em với các chi tiết cụ thể của bộ chọn thứ hai của bạn

Anh em ruột

Kể từ khi CSS2 xuất hiện, chúng tôi có thể nhắm mục tiêu các phần tử anh chị em và anh chị em chung bằng các bộ kết hợp. Bộ chọn anh chị em, với dấu '+' trong ví dụ trên, là nhắm mục tiêu phần tử anh chị em tiếp theo trực tiếp của bộ chọn chuỗi trước đó (phần tử). Để nhắm mục tiêu tất cả anh chị em với bộ chọn chuỗi tiếp theo, có thể sử dụng '~'. Giống như trong ví dụ dưới đây

anh chị em chung

.parent-class ~ .general-sibling-class

Chúng tôi đã biết có những loại bộ chọn nào. lớp, phần tử, thuộc tính, phổ quát và bộ chọn ID. Chúng tôi biết cách kết hợp chúng. thông qua con cháu, con cái hoặc chung-/anh chị em. Vì vậy, chúng tôi đã sẵn sàng chuyển sang các bộ chọn có thể nhắm mục tiêu các phần tử không rõ ràng. Cái gọi là bộ chọn giả

bộ chọn giả

Bộ chọn giả cho phép bạn chọn phần tử không rõ ràng dựa trên trạng thái hoặc vị trí. Ví dụ. nếu bạn muốn con thứ hai của một phần tử với một bộ chọn nhất định. Một ví dụ khác là chỉ chọn một phần tử khi được di chuột qua. Có nhiều bộ chọn giả và hàng tháng những bộ chọn mới được thêm vào dưới dạng bộ chọn CSS3 thử nghiệm. Để kiểm tra phòng trống, hãy truy cập www. chó săn. com và nhập bộ chọn bạn muốn sử dụng để kiểm tra xem các trình duyệt được sử dụng nhiều nhất đã hỗ trợ chưa

tiểu bang

Chúng ta có thể chia bộ chọn giả thành 2 nhóm. dựa trên vị trí nhắm mục tiêu hoặc dựa trên trạng thái cụ thể của một phần tử. Để minh họa nhóm trạng thái, chúng ta có thể xem các bộ chọn giả trong phần tử liên kết hành động ''. Xem những gì tôi đã làm ở đó?. )Dưới đây, bạn có thể xem ví dụ về một vài bộ chọn giả liên kết phổ biến, '. bay lượn', '. liên kết', '. thăm'.
Below you can see an example of a few common link pseudo-selectors, ':hover', ':link', ':visited':

.class-selector {}

Trong de codepen, bạn có thể thấy điều này đang hoạt động bằng cách nhấp, di chuột hoặc truy cập vào liên kết. Tất cả các màu sắc khác nhau và sự xuất hiện của liên kết được chỉ định riêng. Hầu hết các yếu tố tương tác này trong html đều có kiểu dáng mặc định của trình duyệt. Nếu không có kiểu dáng, chúng sẽ có màu trắng trên nền trắng và do đó không nhìn thấy được. nhiều bộ chọn giả hơn có sẵn để xác định trạng thái của một phần tử. Ví dụ: '. tiêu điểm'-trạng thái khi bạn nhấp vào trường nhập hoặc '. đã chọn' nếu bạn chọn hộp kiểm hoặc nút radio. Danh sách đầy đủ các lớp giả có thể được tìm thấy ở đây

địa điểm

Nhóm bộ chọn giả (-class) thứ hai là bộ chọn để chỉ định vị trí của phần tử. Bạn có thể biết '. bộ chọn giả con đầu lòng. Điều này nhắm mục tiêu con đầu tiên của một phần tử được chọn. Vì vậy, nếu bạn có

.class-selector {}

Thao tác này sẽ chọn phần tử con đầu tiên trong phần tử có lớp [class]. Có thể nhắm mục tiêu đứa trẻ cuối cùng theo cách tương tự. Bạn có thể làm điều này bằng cách xác định '. con cuối cùng'. Đối với mỗi đứa trẻ ở giữa một bộ chọn giả mới đã được tạo. Cái gọi là '. bộ chọn thứ n. Bộ chọn này cung cấp cho bạn khả năng chọn một hoặc nhiều phần tử con. Bạn thậm chí có thể viết các phương trình trong các thuộc tính để chọn các chuỗi phần tử con khác nhau. Hãy để tôi làm rõ điều này với một ví dụ

.class-selector {}

Kiểu chọn này có thể hữu ích trong danh sách hoặc bảng trong đó tất cả các phần tử và hàng đều có cùng phần tử. Không thành vấn đề nếu các phần tử được chỉ định với một lớp. Bạn có thể nhắm mục tiêu họ theo một trong hai cách. Trong codepen, bạn có thể tìm thấy một ví dụ về nhắm mục tiêu con thứ n. Tôi đã làm cho bạn một loại trò chơi trí nhớ lơ lửng của đứa trẻ thứ n. ). Bạn có thể tìm thấy tất cả các bộ đôi màu bằng cách nhìn vào bộ chọn không?
Tôi đã đề cập rằng bạn có thể thêm một phương trình toán học vào bộ chọn 'con thứ n'. Hãy lấy '4n + 1' làm ví dụ. Bạn có thể nhận ra điều này từ lớp học toán ở trường trung học. Nó tương tự như 4x +1. Nó chọn từng đứa trẻ thứ tư và sau đó thay đổi lựa chọn theo một. Chọn phần tử tiếp theo. Điều này có nghĩa là 1 (4 x 0 +1), 5 (4 x 1 +1), 9 (4 x 2 +1), v.v… đây là blog chi tiết về bộ chọn 'con thứ n'.

Các phần tử giả

Hãy chuyển sang phần tử giả. Những nơi được giới thiệu trong CSS3 để thêm trang trí cho các phần tử đúng ngữ nghĩa. Ví dụ: thêm biểu tượng vào nút mà không thêm thẻ 'i' trống hoặc thêm nhắm mục tiêu phần tử giữ chỗ là phần tử vô hình thuộc phần tử 'đầu vào'. Bạn có thể xem bộ chọn này là 'chọn một phần của phần tử. ' Thông thường bạn sẽ tạo một phần tử mới để làm điều này nhưng bây giờ bạn có thể nhắm mục tiêu nó là một phần của phần tử gốc của nó.
Hãy xem hoạt động của phần tử giả.

.class-selector {}

Bạn có thể tìm thấy một bộ đầy đủ các bộ chọn phần tử giả tại đây. Còn điều kỳ diệu nào bạn có thể làm với các phần tử giả mà chúng ta sẽ thảo luận trong chương sau của blog này

Bây giờ bạn biết bạn có thể sử dụng bộ chọn nào trong tình huống nào. Nơi sử dụng loại bộ chọn, nơi sử dụng tổ hợp, nơi sử dụng phần tử giả và nơi bạn có thể sử dụng phần tử giả. Bạn biết tính đặc hiệu của bộ chọn. Bộ chọn phần tử là mạnh nhất. Sau đó các lớp học. Sau đó giả và thuộc tính. Bây giờ bạn đã sẵn sàng để chọn bất kỳ thành phần nào trên trang

Giống như việc lái xe ô tô, việc viết các bộ chọn CSS trang nhã dựa trên kinh nghiệm về phong cách viết và thử nghiệm với việc xây dựng thương hiệu. Mẫu sẽ là canvas của bạn. Cố gắng sử dụng các bộ chọn theo những cách mới đã học để xem bạn có những khả năng nào. Bạn sẽ khám phá ra nhiều điều mà bạn thường giải quyết bằng Javascript

StyleFacts phần 1

StyleFacts phần 2

Nếu bạn có câu hỏi về bộ chọn hoặc bạn có một bổ sung tuyệt vời cho blog này, vui lòng cho tôi biết trong phần nhận xét. Cảm ơn vì đã đọc. Blog tiếp theo sẽ là về thiết kế đáp ứng

Làm cách nào bạn có thể chọn phần tử cuối cùng bằng CSS?

Làm cách nào để áp dụng CSS cho tất cả các phần tử ngoại trừ một phần tử?

Làm cách nào để áp dụng CSS cho tất cả các phần tử con ngoại trừ phần tử đầu tiên?