Selectors CSS. loại selectors

, mỗi trong số đó bạn muốn thiết lập một màu cụ thể. Làm thế nào để làm điều đó? selectors CSS tiêu chuẩn không phù hợp với thẻ, họ chỉ ra các tham số cho tất cả các khối cùng một lúc. Giải pháp là đơn giản. Phân công thành viên lớp. Ví dụ, người đầu tiên nhận div class = 'đỏ', thứ hai - class = 'xanh', thứ ba - class = 'xanh'. Bây giờ họ có thể được lựa chọn sử dụng các bảng CSS.

Cú pháp như sau: Chỉ ra một điểm ( ""), tiếp theo là viết tên của lớp. Để quản lý các đơn vị đầu tiên, sử dụng xây dựng .red. Thứ hai - .blue và vân vân.

Quan trọng! Đó là khuyến cáo sử dụng các giá trị có ý nghĩa của các thuộc tính lớp. Nó được coi là hình thức xấu để sử dụng phiên âm (ví dụ, krasiviy-blok) hoặc sự kết hợp ngẫu nhiên của các chữ cái / số (ojfh834871). Trong mã này, bạn chắc chắn sẽ bị lẫn lộn, chưa kể đến những khó khăn mà sẽ phải đối mặt với những người sẽ được tham gia vào các dự án sau khi bạn. Lựa chọn tốt nhất - sử dụng bất kỳ phương pháp, chẳng hạn như BEM.

Ưu điểm - linh hoạt tương đối cao.

Nhược điểm - các nhiều yếu tố có thể là một và cùng lớp, có nghĩa là họ sẽ được chỉnh sửa cùng một lúc. Vấn đề được giải quyết bằng cách sử dụng phương pháp cũng như kế thừa preprocessors. Hãy chắc chắn để có được bàn tay của bạn ít hơn, sass hoặc một số tiền xử lý khác, họ rất đơn giản hóa công việc.

selector ID

Về phiên bản này lập trình ý kiến và lập trình viên là mơ hồ. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Một số hướng dẫn CSS không khuyến cáo sử dụng ID, bởi vì trong ứng dụng không chính xác họ có thể gây ra vấn đề với thừa kế. Tuy nhiên, nhiều chuyên gia đang tích cực sắp xếp chúng trong suốt bố trí. Bạn quyết định. # »), затем имя блока. Cú pháp như sau: dấu thăng ( "#"), sau đó tên của khối. #red. Ví dụ, #red.

отличается от класса по нескольким параметрам. ID là khác nhau từ lớp bằng nhiều cách. ID. Đầu tiên, trang web không thể có hai ID giống hệt nhau. Chúng được gán một tên duy nhất. Thứ hai, một selector đó có ưu tiên cao hơn. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Điều này có nghĩa rằng nếu bạn chỉ định một lớp đơn vị màu đỏ và ghi rõ trong bảng CSS đỏ màu nền, và sau đó gán cho nó id cùng màu xanh và xác định màu sắc xanh, đơn vị sẽ chuyển sang màu xanh.

Ưu điểm - bạn có thể kiểm soát các yếu tố cụ thể, bỏ qua phong cách của các thẻ và các lớp học.

ID и class. Nhược điểm - dễ bị lạc trong một số lượng lớn các ID và class.

Quan trọng! ID вам, в общем-то, не нужны. Nếu bạn đang sử dụng phương pháp BEM (hoặc tương tự của nó), ID cho bạn, nói chung, không cần thiết. Kỹ thuật này liên quan đến việc sử dụng bố trí các lớp học duy nhất thuận tiện hơn nhiều.

chọn phổ biến

{}. Cú pháp: Starlets dấu ( "*") và niềng răng, tức là {*} ...

Sử dụng để gán thuộc tính nhất định khi tất cả các yếu tố của trang. Khi điều này có thể hữu ích? box-sizing: border-box. Ví dụ, nếu bạn muốn thiết lập thuộc tính trang hộp cỡ: border-hộp. div *{}. Không chỉ có thể được sử dụng để quản lý tất cả các thành phần của tài liệu, mà còn để kiểm soát tất cả các trẻ em của khối nhất định, ví dụ, div * {}.

Ưu điểm - bạn có thể kiểm soát một số lượng lớn các mặt hàng tại một thời điểm.

Nhược điểm - không đủ tùy chọn linh hoạt. Bên cạnh đó, việc sử dụng bộ chọn này, trong một số trường hợp làm chậm công việc trang.

bởi các thuộc tính

Làm cho nó có thể để kiểm soát các phần tử với một thuộc tính cụ thể. Ví dụ, bạn có một số lượng thẻ đầu vào với một loại thuộc tính khác nhau. Một trong số đó - văn bản, thứ hai - mật khẩu, thứ ba - số. Tất nhiên, bạn có thể thiết lập mỗi lớp hoặc ID, nhưng nó không phải lúc nào cũng thuận tiện. selectors CSS các thuộc tính làm cho nó có thể để xác định giá trị đối với một số thẻ với độ chính xác tối đa. Ví dụ, như thế này:

đầu vào [type = 'text'] {}

chọn này sẽ chọn tất cả các thuộc tính với các loại văn bản đầu vào.

Công cụ này là khá linh hoạt và có thể được sử dụng với bất kỳ thẻ, trong đó có thể có các thuộc tính. Nhưng đó không phải là tất cả! Các đặc điểm kỹ thuật CSS có khả năng kiểm soát các yếu tố với sự tiện lợi nhiều hơn!

Hãy tưởng tượng rằng trang của bạn có đầu vào với placeholder thuộc tính = "Nhập tên" và đầu vào placeholder = "Nhập mật khẩu". Họ cũng có thể được lựa chọn sử dụng bộ chọn! Để làm điều này, sử dụng cấu trúc sau:

đầu vào [placeholder = "Nhập tên"] {} hoặc đầu vào [placeholder = "Nhập mật khẩu"]

Có lẽ công việc linh hoạt hơn với các thuộc tính. Hãy nói rằng bạn có một số lượng thẻ với các thuộc tính tiêu đề tương tự (ví dụ, "Caspian" và "Caspian"). Để chọn cả hai, sử dụng các lựa chọn sau:

[Title * = "Kaspiysk"]

CSS sẽ chọn tất cả các mục trong tiêu đề trong đó có biểu tượng của "Caspian", tức là. E., Và "Caspian" và "Caspian".

Bạn cũng có thể chọn thẻ mà bắt đầu với các thuộc tính một nhân vật nhất định:

[Title ^ = "nhân vật bạn muốn"] {}

hoặc chấm dứt chúng:

[Title $ = "nhân vật quyền"] {}.

Ưu điểm - tính linh hoạt tối đa. Bạn có thể chọn bất kỳ yếu tố trang hiện tại mà không can thiệp vào các lớp học.

Nhược điểm - được sử dụng tương đối hiếm, chỉ trong những trường hợp cụ thể. Nhiều nhà thiết kế web thích phương pháp, kể từ khi lớp điểm là dễ dàng hơn để sắp xếp nhiều dấu ngoặc vuông và dấu hiệu "bình đẳng". Ngoài ra, các bộ chọn không làm việc trong các phiên bản Internet Explorer 7 và thấp hơn. Tuy nhiên, những người bây giờ cần Internet Explorer cũ?

selectors pseudo-class

Biểu thị một yếu tố giả trạng thái. Ví dụ ,: di chuột - những gì xảy ra với một phần của trang khi bạn di chuột ,: thăm - liên kết truy cập. Nó cũng bao gồm các yếu tố như: first-child và: cuối cùng con.

Đây là loại selector đang tích cực sử dụng trong cách bố trí hiện đại, bởi vì nhờ nó, bạn có thể làm cho một trang "sống" mà không cần dùng JavaScript. Ví dụ, bạn muốn chắc chắn rằng khi bạn di chuột qua nút với lớp của btn màu sắc của nó thay đổi. Để làm điều này, chúng ta sử dụng cấu trúc sau:

.btn: hover {

background-color: red;

}

Vẻ đẹp có thể được quy định trong các thuộc tính cơ bản của nút, tài sản chuyển tiếp, ví dụ, 0.5s - trong trường hợp như vậy, nút sẽ không đỏ mặt ngay lập tức, và trong vòng nửa giây.

Đức - được sử dụng rộng rãi cho "hồi sinh" của trang. Dễ sử dụng.

Nhược điểm - họ không. Đây là một công cụ thực sự tiện dụng. Tuy nhiên, các nhà thiết kế web thiếu kinh nghiệm có thể bị lạc trong sự phong phú của pseudo-class. Vấn đề được giải quyết nghiên cứu và thực hành.

pseudo-selectors

"Pseudo" - đó là những phần của trang mà không phải là dưới dạng HTML, nhưng họ vẫn có thể được quản lý. Bạn không hiểu? Nó dễ dàng hơn nhiều so với vẻ bề ngoài. Ví dụ, bạn muốn làm cho chữ cái đầu tiên trong chuỗi lớn và đỏ, rời khỏi văn bản nhỏ và đen khác. Tất nhiên, có thể kết luận rằng lá thư trong một khoảng với một lớp học nào đó, nhưng nó dài và nhàm chán. Nó là dễ dàng hơn nhiều để chọn toàn bộ đoạn và sử dụng giả :: đầu tiên chữ. Nó cung cấp cho cơ hội để kiểm soát sự xuất hiện của chữ cái đầu tiên.

Có khá một số lượng lớn các yếu tố giả. Liệt kê chúng trong một bài báo duy nhất là khó có khả năng thành công. Bạn có thể tìm thấy những thông tin liên quan trong công cụ tìm kiếm ưa thích của bạn.

Ưu điểm - cung cấp sự linh hoạt để tùy biến giao diện của trang.

Nhược điểm - mới đối với họ là thường bị nhầm lẫn. Nhiều lựa chọn loại công việc này chỉ trong trình duyệt nhất định.

để tóm tắt

Selector - một công cụ mạnh mẽ để kiểm soát dòng chảy tài liệu. Nhờ có anh ấy, bạn có thể chọn tất cả các thành phần duy nhất của trang (thậm chí có những chỉ một phần). Hãy chắc chắn để tìm hiểu tất cả các tùy chọn có sẵn, hoặc thậm chí viết chúng ra. Điều này đặc biệt quan trọng nếu bạn tạo ra các trang phức tạp với một thiết kế hiện đại và rất nhiều yếu tố tương tác.