Hướng dẫn css selector special characters - các ký tự đặc biệt của bộ chọn css
Câu trả lời ngắn gọn: DOM phân tích bất kỳ bộ chọn nào bạn chuyển cho nó dưới dạng chuỗi. Nếu kết quả (phân tích cú pháp bởi DOM) chứa khoảng trắng hoặc không gian không phá vỡ, chúng sẽ được tính là dấu phân cách lớp. Show
Nội dung chính ShowShow
Bạn không nên lo lắng về JQuery hoặc bất kỳ Ecmascript nào khác giải thích sai các không gian có nghĩa là để kết thúc một khối Escape như một dấu phân cách lớp. Nói một cách đơn giản, bởi vì họ không chịu trách nhiệm về sự phù hợp này. Mô hình đối tượng tài liệu là. DOM tương tự diễn giải các lớp CSS đã thoát. Vì vậy, nếu một tên lớp thoát ra hoạt động trong bảng kiểu của bạn, nó sẽ hoạt động như một bộ chọn nếu được truyền bởi bất kỳ thư viện JavaScript nào.they are not in charge of this matching. Document Object Model is. The same DOM that interprets the escaped CSS classes. So if an escaped class name works in your stylesheet, it will work as a selector if passed by any JavaScript library.they are not in charge of this matching. Document Object Model is. The same DOM that interprets the escaped CSS classes. So if an escaped class name works in your stylesheet, it will work as a selector if passed by any JavaScript library.
Bây giờ, giả sử rằng, vì lý do ngữ nghĩa, bạn muốn sử dụng lớp 3 trên một phần tử. Bạn sẽ cần phải trốn thoát ít nhất là ký tự đầu tiên và cuối cùng để bộ chọn của bạn hoạt động. Những người ở giữa có thể hoặc không thể trốn thoát. Các bộ chọn có thể, tất cả đều dịch ở cấp độ DOM sang tên lớp 3, sẽ là:
Như bạn đã biết, có nhiều phương pháp CSS thoát hơn. Tuy nhiên, điều này áp dụng cho tất cả. Khi bạn chuyển một bộ chọn cho JQuery hoặc JavaScript, nó sẽ coi nó như một chuỗi và chuyển nó cho trình phân tích cú pháp DOM. Tuy nhiên, các thư viện này có cơ chế thoát ra riêng, cho phép chúng tôi làm những thứ lạ mắt. Vì vậy, để cho phép bất kỳ bộ chọn nào ở trên làm cho trình phân tích cú pháp DOM, bạn cần thoát khỏi các dấu gạch chéo ngược, vì vậy chúng không bị JavaScript giải thích sai là ký tự thoát và bị xóa khỏi chuỗi. Về cơ bản, bạn cần tăng gấp đôi dấu gạch chéo ngược của bạn. Bất kỳ điều nào sau đây sẽ làm: Any of the following will do: Any of the following will do:
Đây là một đoạn trích. Kiểm tra nó ra. Thêm các yếu tố với lớp 8 và bạn sẽ thấy họ không được chọn. Bởi vì trình phân tích cú pháp DOM sẽ biến bất kỳ bộ chọn nào ở trên thành 3 và khớp chúng với lớp 3 mà bạn đã đặt vào phần tử.Quay trở lại ví dụ của bạn ( 1), nó sẽ phân tích và hành xử chính xác như 2. Không gian, khi có mặt trong kết quả cuối cùng của chuỗi tên lớp, sẽ được hiểu là phân định lớp. Điều này phù hợp với cả 3 và 4 (không gian và không gian không phá vỡ) và đó là hành vi mong đợi.Spaces, when present in the final result of the class name string, will be interpreted as class delimiters. This goes for both 3 and 4 (space and non-breaking-space) and it is the expected behaviour. Spaces, when present in the final result of the class name string, will be interpreted as class delimiters. This goes for both 3 and 4 (space and non-breaking-space) and it is the expected behaviour. Như một lưu ý thú vị (tầm thường), nếu vì một lý do xấu nào, bạn muốn làm cho mọi người khó khăn trong việc tạo kiểu cho ứng dụng của bạn, bạn luôn có thể thêm một ký tự loại 5 vào tên lớp. Đây là một ví dụ:
Trong mô -đun này Trong CSS, các bộ chọn được sử dụng để nhắm mục tiêu các phần tử HTML trên các trang web của chúng tôi mà chúng tôi muốn tạo kiểu. Có rất nhiều bộ chọn CSS có sẵn, cho phép độ chính xác hạt mịn khi chọn các yếu tố theo kiểu. Trong bài viết này và các tiểu khu vực của nó, chúng tôi sẽ chạy qua các loại khác nhau rất chi tiết, xem cách chúng hoạt động.Bộ chọn là gì? Bạn đã gặp người chọn đã. Bộ chọn CSS là phần đầu tiên của quy tắc CSS. Đó là một mẫu của các phần tử và các thuật ngữ khác cho trình duyệt biết các phần tử HTML nên được chọn để có các giá trị thuộc tính CSS bên trong quy tắc được áp dụng cho chúng. Phần tử hoặc phần tử được chọn bởi bộ chọn được gọi là chủ đề của bộ chọn. Trong các bài viết trước, bạn đã gặp một số bộ chọn khác nhau và biết rằng có các bộ chọn nhắm mục tiêu tài liệu theo các cách khác nhau - ví dụ bằng cách chọn một phần tử như 6 hoặc một lớp như 7.Trong CSS, các bộ chọn được xác định trong đặc tả CSS Selectors; Giống như bất kỳ phần nào khác của CSS, họ cần có sự hỗ trợ trong trình duyệt để họ hoạt động. Phần lớn các bộ chọn mà bạn sẽ đi qua được xác định trong đặc tả bộ chọn cấp 3, đây là một đặc điểm kỹ thuật trưởng thành, do đó bạn sẽ tìm thấy hỗ trợ trình duyệt tuyệt vời cho các bộ chọn này.Danh sách chọn 8Nếu bạn có nhiều hơn một thứ sử dụng cùng một CSS thì các bộ chọn riêng lẻ có thể được kết hợp vào danh sách bộ chọn để quy tắc được áp dụng cho tất cả các bộ chọn riêng lẻ. Ví dụ: nếu tôi có cùng CSS cho một 6 và cũng là một lớp 7, tôi có thể viết điều này dưới dạng hai quy tắc riêng biệt.
Tôi cũng có thể kết hợp chúng thành một danh sách chọn, bằng cách thêm dấu phẩy giữa chúng.
Không gian trắng là hợp lệ trước hoặc sau dấu phẩy. Bạn cũng có thể tìm thấy các bộ chọn dễ đọc hơn nếu mỗi người nằm trên một dòng mới. Trong ví dụ trực tiếp dưới đây, hãy thử kết hợp hai bộ chọn có khai báo giống hệt nhau. Màn hình trực quan nên giống nhau sau khi kết hợp chúng. Khi bạn nhóm chọn theo cách này, nếu bất kỳ bộ chọn nào không hợp lệ, toàn bộ quy tắc sẽ bị bỏ qua. 3Trong ví dụ sau, quy tắc chọn lớp không hợp lệ sẽ bị bỏ qua, trong khi 6 vẫn sẽ được tạo kiểu. 5Tuy nhiên, khi kết hợp, cả h2, .special { color: blue; } 6 và lớp sẽ không được tạo kiểu vì toàn bộ quy tắc được coi là không hợp lệ.Các loại người chọn Có một vài nhóm người chọn khác nhau và biết bạn có thể cần loại chọn nào sẽ giúp bạn tìm được công cụ phù hợp cho công việc. Trong các tiểu trường của bài viết này, chúng tôi sẽ xem xét các nhóm người chọn khác nhau chi tiết hơn.Trình chọn loại, lớp và ID Nhóm này bao gồm các bộ chọn nhắm mục tiêu một phần tử HTML như 32.Nó cũng bao gồm các bộ chọn nhắm mục tiêu một lớp: Hoặc, một ID:Bộ chọn thuộc tính Nhóm bộ chọn này cung cấp cho bạn các cách khác nhau để chọn các phần tử dựa trên sự hiện diện của một thuộc tính nhất định trên một phần tử: 7Lớp giả và yếu tố giảNhóm các bộ chọn này bao gồm các lớp giả, theo phong cách nhất định của một yếu tố. Ví dụ, lớp giả pseudo chỉ chọn một phần tử khi nó được di chuột qua con trỏ chuột: Nó cũng bao gồm các yếu tố giả, chọn một phần nhất định của một phần tử chứ không phải chính phần tử. Ví dụ, 34 luôn chọn dòng văn bản đầu tiên bên trong một phần tử (A 35 trong trường hợp bên dưới), hoạt động như thể 36 được quấn quanh dòng được định dạng đầu tiên và sau đó được chọn.Tổ hợpNhóm cuối cùng của các bộ chọn kết hợp các bộ chọn khác để nhắm mục tiêu các yếu tố trong các tài liệu của chúng tôi.Ví dụ, sau đây, chọn các đoạn là trẻ em trực tiếp của các yếu tố 37 bằng cách sử dụng bộ kết hợp trẻ em ( 38):Bản tóm tắtTrong bài viết này, chúng tôi đã giới thiệu các bộ chọn CSS, cho phép bạn nhắm mục tiêu các yếu tố HTML cụ thể.Tiếp theo, chúng tôi sẽ xem xét kỹ hơn về loại chọn loại, lớp và ID. Để biết danh sách đầy đủ các bộ chọn, hãy xem Tham chiếu Bộ chọn CSS của chúng tôi.
Trong mô -đun này |