Hướng dẫn how do i select all 3 elements in css? - làm cách nào để chọn cả 3 phần tử trong css?

Phong cách thực tế Part3

Chương này trong loạt StyleFacts là về cách bạn có thể chọn phần tử của mình-sự 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 đè lên các bộ chọn và cách áp dụng các bộ chọn trên phần tử gián tiếp bởi các lựa chọn giả. Chúng ta có thể chọn các yếu tố. Chúng ta có thể chọn hành vi của các yếu 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 mà bạn sẽ đạt đến cấp độ cuối cùng của bộ chọn phần tử giả. Chúng ta hãy xem mức độ lựa chọn nào phù hợp nhất để áp dụng các kiểu của bạn: bộ chọn, bộ chọn giả hoặc bộ chọn giả.

Giống như hầu hết các bạn có thể đã trải nghiệm, các 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 phong cách quá cụ thể (chỉ nhắm mục tiêu một điều) và các bộ chọn quá toàn cầu (làm rối tung mọi thứ họ đạt được.)

.page-container div

Điều 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 'div' ngẫu nhiên trong một lớp toàn cầu, sẽ nhắm mục tiêu vào 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à một 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 kiểu dáng đồ sộ mà nhắm mục tiêu rất ít mỗi lần.

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

Vậy có loại người chọn nào? Trong kiểu dáng, chúng tôi có 5 loại bộ chọn. Tôi đã liệt kê chúng cho bạn theo thứ tự sử dụng thích hợp hơn:

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 yếu tố với lớp được chỉ định sau dấu chấm.

Yếu tố

element-selector {}

Phần tử phần tử yếu hơn sau đó sử dụng trực tiếp các loại phần tử của bộ phận và mục tiêu.

Thuộc tính

element[attribute="selector"] {}

Nó yếu hơn (ít cụ thể hơn) sau đó sử dụng một phần 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 để sử dụng theo cách toàn cầu. Nó được trình bày bởi một Asterix.

TÔI

#idSelector {}

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

Combinators:

Khi bạn kết hợp các lớp học, 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 bạn, mà không ảnh hưởng đến các yếu tố khác. Có bốn cách để kết hợp các bộ chọn thành một bộ kết hợp: bằng cách đi xuống, trẻ em, anh chị em và anh chị em chung. Được biết đến nhiều nhất và được sử dụng nhiều nhất là bộ kết hợp hạ nguồn:

Hậu duệ

.parent-class .descendant-class

Đây là nơi một phần tử (cha mẹ) và một phần tử trong một (một vài) mức lồng nhau đượ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à một phần tử con của phần tử được nhắm mục tiêu bởi bộ chọn cha mẹ. Đây là cách bạn có thể bỏ qua các cấp độ chọn lọc rõ ràng để truy cập bộ chọn mục tiêu của bạn, thông qua các địa danh 'độc đáo' trong mẫu của bạn.
The nested level selector does not necessarily need to be a child element of the element targeted by the parent selector. This is how you can skip levels of explicit selectors to get to your target selector, through 'unique' landmarks within your template.

Đứa trẻ

.parent-class > .child-class

Mặc dù không cần thiết phải chỉ định các yếu tố trẻ em trực tiếp là bộ chọn, nhưng điều này có thể được thực thi trong CSS bằng cách chuỗi kết hợp với một chevron (mũi tên) sang 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

.parent-class + .sibling-class

Kể từ khi CSS2 đến, chúng tôi có thể nhắm mục tiêu các yếu tố anh chị em và anh chị em chung với các tổ hợp. Bộ chọn anh chị em, với '+' 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 nói chung

.parent-class ~ .general-sibling-class

Chúng tôi đã học những loại bộ chọn có: lớp, phần tử, thuộc tính, phổ quát và id-selector. Chúng tôi biết cách kết hợp chúng: thông qua hậu duệ, trẻ em hoặc chung chung. 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 yếu tố không thể thay đổi. Cái gọi là người chọn giả.

Bộ chọn giả

Bộ chọn giả cho phép bạn chọn phần tử không phù hợp dựa trên trạng thái hoặc vị trí. Ví dụ: nếu bạn muốn đứa con thứ hai của một yếu tố có bộ chọn nhất định. Một ví dụ khác là chỉ chọn một phần tử khi lơ lửng. Có nhiều bộ chọn giả và mỗi tháng mới được thêm vào dưới dạng bộ chọn CSS3 thử nghiệm. Để kiểm tra tính khả dụng, hãy truy cập www.caniuse.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ợ nó chưa.

tiểu bang

Chúng ta có thể chia các lựa chọn giả trong 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 cho nhóm trạng thái, chúng ta có thể xem phần tử liên kết giả trong hành động. Xem những gì tôi đã làm ở đó? :) Dưới đây bạn có thể thấy một ví dụ về một vài lựa chọn giả liên kết phổ biến, ': Hover', ': link', ': đã truy cập':
Below you can see an example of a few common link pseudo-selectors, ':hover', ':link', ':visited':

.class-selector {}

Trong de the Codepen, bạn có thể thấy điều này trong hành động bằng cách nhấp, lơ lửng hoặc truy cập liên kết. Tất cả các màu sắc và diện mạo khác nhau 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 đi kèm với 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à không thể nhìn thấy. Nhiều người lựa chọn giả có sẵn để xác định trạng thái của một phần tử. Ví dụ: ': Focus'-state Khi bạn nhấp vào trường nhập hoặc trạng thái': đã kiểm tra 'nếu bạn chọn nút kiểm tra 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 thứ hai của Pseudo (-Class) -Selector là bộ chọn để chỉ định vị trí của phần tử. Bạn có thể biết 'Pseudo-selector': con đầu tiên '. Điều này nhắm mục tiêu là đứa con đầu tiên của một yếu tố được chọn. Vì vậy, nếu bạn có:

.class-selector {}

Điều này sẽ chọn đứa trẻ đầu tiên trong phần tử với lớp [lớp]. 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 cái cuối cùng'. Đối với mỗi đứa trẻ ở giữa một người chọn giả mới đã được tạo ra. Cái gọi là ': nth-con'-selector. 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 khác nhau của các phần tử con. Hãy để tôi làm rõ điều này bằng một ví dụ:

.class-selector {}

Loại lựa chọn này có thể tiện dụng trong danh sách hoặc bảng trong đó tất cả các yếu tố và hàng có cùng yếu tố. Không quan trọng nếu các yếu tố được chỉ định với một lớp. Bạn có thể nhắm mục tiêu chúng bằng một trong hai cách. Trong codepen, bạn có thể tìm thấy một ví dụ về mục tiêu con con thứ n. Tôi đã làm cho bạn một loại trò chơi bộ nhớ lơ lửng thứ n-con cái :). Bạn có thể tìm thấy tất cả các màu của Duo bằng cách xem các 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 'con con thứ n'. Ví dụ, chúng ta hãy lấy '4n + 1'. Bạn có thể nhận ra điều này từ lớp toán học ở trường trung học. Nó tương tự như 4x +1. Nó chọn từng đứa trẻ thứ tư và sau đó chuyển 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à một blog chi tiết về 'con-con nth-con-selector.
I mentioned that you can add a mathematical equation into the 'nth-child'-selector. Let's take '4n + 1' for example. You might recognize this from math-class at high school. It is similar to 4x +1. It selects each fourth child and then shifts the selection by one. Selecting the next element. This means 1 (4 x 0 +1), 5 (4 x 1 +1), 9 (4 x 2 +1) and so on… here's a detailed blog about the 'nth-child'-selector.

Các yếu tố giả

Hãy chuyển sang các yếu tố giả. Chúng được giới thiệu trong CSS3 để thêm trang trí cho các yếu tố chính xác về mặt ngữ nghĩa. Ví dụ, thêm một biểu tượng vào một nút mà không cần thêm một 'i'-tag trống hoặc thêm nhắm mục tiêu một phần tử trình giữ chỗ là một phần tử vô hình thuộc về phần tử' đầu vào '. Bạn có thể thấy bộ chọn này là 'chọn một phần của một phần tử.' Thông thường bạn sẽ tạo một yếu 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 yếu tố ban đầu của nó. Hãy xem phần tử giả hoạt động:
Let's see the pseudo-element in action:

.class-selector {}

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

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

Giống như với việc lái xe, viết CSS-Selector thanh lịch đến trải nghiệm trong các phong cách viết và chơi xung quanh với thương hiệu. Mẫu sẽ là khung vẽ của bạn. Cố gắng sử dụng các bộ chọn trong những cách đã học mới để xem những khả năng bạn có. Bạn sẽ khám phá ra nhiều điều bạn thường sẽ giải quyết với 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 các ý kiến! Cảm ơn vì đã đọc. Blog tiếp theo sẽ là về thiết kế đáp ứng.

3 cách chính chúng ta có thể chọn một mục thông qua CSS là gì?

Làm thế nào bạn có thể chọn một nhóm các yếu tố khác nhau trong CSS?