Xử lý dấu hai chấm trong ID phần tử trong công cụ chọn CSS

Question

JSF đang đặt ID của trường nhập thành search_form:expression. Tôi cần phải chỉ định một số kiểu dáng trên phần tử đó, nhưng dấu hai chấm đó trông giống như phần đầu của phần tử giả cho trình duyệt để nó được đánh dấu là không hợp lệ và bị bỏ qua. Có cách nào để thoát khỏi đại tràng hay gì đó không?

input#search_form:expression { 
    ///... 
} 

Answer 1

Dấu gạch chéo ngược:

input#search_form\:expression { ///...} 

• Xem thêm Using Namespaces with CSS (MSDN)

Answer 2

Bạn có thể thoát khỏi nó với một dấu chéo ngược

input#search_form\:expression { 
    ///... 
} 

Từ CSS Spec

4.1.3 Nhân vật và trường hợp

Các quy tắc sau luôn giữ:

Tất cả các style sheets CSS là case-insensitive, ngoại trừ cho các bộ phận mà không phải là dưới sự kiểm soát của CSS . Ví dụ, trường hợp nhạy cảm với các giá trị của các thuộc tính HTML "id" và "class", của các tên font và các URI nằm ngoài phạm vi của đặc tả này. Lưu ý đặc biệt là các tên phần tử phân biệt chữ hoa chữ thường trong HTML, nhưng phân biệt chữ hoa chữ thường trong XML. Trong CSS, số nhận dạng (bao gồm tên phần tử, lớp và ID trong bộ chọn) chỉ có thể chứa ký tự [a-z0-9] và ISO 10646 ký tự U + 00A1 và cao hơn, dấu gạch nối (-) và dấu gạch dưới (_); chúng không thể bắt đầu bằng một chữ số hoặc dấu gạch ngang được theo sau bởi một chữ số. Định danh cũng có thể chứa các ký tự thoát và bất kỳ ký tự ISO 10646 nào dưới dạng mã số (xem mục tiếp theo). Ví dụ: số nhận dạng "B & W?" có thể được viết là "B \ & W \?" hoặc "B \ 26 W \ 3F". Lưu ý rằng mã Unicode theo từng mã tương đương với ISO 10646 (xem [UNICODE] và [ISO10646]).

Trong CSS 2.1, ký tự dấu gạch chéo ngược() biểu thị ba loại ký tự thoát. Đầu tiên, bên trong một chuỗi, dấu gạch chéo ngược theo sau là một dòng mới được bỏ qua (tức là, chuỗi được coi là không chứa dấu gạch chéo ngược hoặc dòng mới).

Thứ hai, nó hủy bỏ ý nghĩa của các ký tự CSS đặc biệt. Bất kỳ ký tự nào (ngoại trừ một chữ số thập lục phân) có thể được thoát bằng dấu gạch chéo ngược để loại bỏ ý nghĩa đặc biệt của nó. Ví dụ, "\" "là một chuỗi bao gồm một dấu nháy kép. Các bộ tiền xử lý bảng kiểu không được loại bỏ các dấu gạch chéo ngược này khỏi một bảng định kiểu vì nó sẽ thay đổi ý nghĩa của kiểu định kiểu. Trong trường hợp này, dấu gạch chéo ngược được theo sau bởi tối đa sáu chữ số thập lục phân (0..9A..F), ký tự đại diện cho ký tự ISO 10646 ([ISO10646]) với số đó (Không xác định trong CSS 2.1 điều gì sẽ xảy ra nếu một biểu định kiểu có chứa một ký tự có mã số Unicode bằng không.) Nếu một ký tự trong phạm vi [0-9a-f] theo sau số thập lục phân, thì kết thúc số lượng cần phải được làm rõ. Có hai cách để làm điều đó:

với khoảng trắng (hoặc khác ký tự dấu cách): "\ 26 B" ("& B"). Trong trường hợp này, tác nhân người dùng nên xử lý cặp "CR/LF" (U + 000D/U + 000A) làm ký tự khoảng trống duy nhất. bằng cách cung cấp chính xác 6 chữ số thập lục phân: "\ 000026B" ("& B") Thực tế, hai phương pháp này có thể được kết hợp. Chỉ có một ký tự khoảng trống được bỏ qua sau khi thoát khỏi hệ thập lục phân. Lưu ý rằng điều này có nghĩa là không gian "thực" sau chuỗi thoát phải tự thoát hoặc tăng gấp đôi.

Nếu số nằm ngoài phạm vi được Unicode cho phép (ví dụ: "\ 110000" cao hơn tối đa 10FFFF cho phép trong Unicode hiện tại), UA có thể thay thế thoát bằng "ký tự thay thế" (U + FFFD). Nếu ký tự được hiển thị, UA sẽ hiển thị một biểu tượng có thể nhìn thấy, chẳng hạn như ký tự "thiếu ký tự" (xem 15.2, điểm 5).

Lưu ý: Dấu gạch chéo ngược, khi được cho phép, luôn được coi là một phần của số nhận dạng hoặc chuỗi (tức là "\ 7B" không phải là dấu chấm câu, mặc dù "{" là, và "\ 32" được cho phép bắt đầu của một tên lớp, mặc dù "2" không phải là). Mã định danh "te \ st" giống hệt với định danh "kiểm tra".

Answer 3

Sử dụng dấu gạch chéo ngược trước dấu hai chấm không hoạt động trong nhiều phiên bản của IE (đặc biệt là 6 và 7; có thể là các phiên bản khác).

Một cách giải quyết là sử dụng mã thập lục phân cho đại tràng - đó là \ 3A

dụ: (? Và có thể sớm hơn):

input#search_form\3A expression { } 

này hoạt động trong tất cả các trình duyệt bao gồm IE6 +, Firefox, Chrome, Opera, v.v. Đây là một phần của CSS2 standard.

Answer 4

Tôi đã có cùng một vấn đề với dấu hai chấm, và tôi không thể thay đổi chúng (không thể truy cập vào mã đầu ra dấu hai chấm) và tôi muốn tìm nạp chúng bằng bộ chọn CSS3 với jQuery.

tôi đặt nó ở đây, vì nó có thể hữu ích cho một ai đó

input[id="something:something"] làm việc tốt trong selectors jQuery, và nó có thể làm việc trong stylesheets cũng (có thể có vấn đề trình duyệt)

Answer 5

Trong JSF 2, 0, bạn có thể xác định dấu phân cách bằng cách sử dụng tập tin web.xml như init-param của javax.faces.SEPARATOR_CHAR

đọc này:

• Is it possible to change the element id separator in JSF?

Answer 6

Tôi chỉ tìm thấy định dạng này làm việc cho tôi cho IE7 (Firefox cũng vậy) và tôi sử dụng JSF/Icefaces 1.8.2.

 
Say form id=FFF, element id=EEE 

var jq=jQuery.noConflict(); 
jq(document).ready(function() { 
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib function options go here }) 
}); 

Answer 7

This article sẽ cho bạn biết cách thoát khỏi bất kỳ ký tự nào trong CSS.

Bây giờ, có thậm chí là một công cụ cho nó: http://mothereff.in/css-escapes#0search%5fform%3Aexpression

TL; DR Tất cả các câu trả lời khác cho câu hỏi này là không chính xác. Bạn cần phải thoát khỏi cả hai dấu gạch dưới (để ngăn chặn IE6 bỏ qua các quy tắc hoàn toàn trong một số trường hợp cạnh) và ký tự đại tràng cho bộ chọn để hoạt động đúng trên các trình duyệt khác nhau.

Về mặt kỹ thuật, nhân vật ruột kết có thể được thoát như \:, nhưng điều đó không làm việc trong IE < 8, vì vậy bạn sẽ phải sử dụng \3a:

#search\_form\3a expression {} 

Answer 8

Tôi làm việc trong một khuôn khổ ADF và tôi thường xuyên phải sử dụng JQuery để chọn các phần tử. Định dạng này phù hợp với tôi. Điều này cũng làm việc trong IE8.

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);