Làm cách nào để chọn nhãn cho = xóa XYZ 'trong CSS?


256

HTML:

<label for="email">{t _your_email}:</label>

CSS:

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

Tôi muốn chọn nhãn dựa trên thuộc tính 'for' để thực hiện thay đổi bố cục.

Câu trả lời:


496

Bộ chọn sẽ là label[for=email]như vậy, trong CSS:

label[for=email]
{
    /* ...definitions here... */
}

... hoặc trong JavaScript bằng DOM:

var element = document.querySelector("label[for=email]");

... hoặc trong JavaScript bằng jQuery:

var element = $("label[for=email]");

Đó là một bộ chọn thuộc tính . Lưu ý rằng một số trình duyệt (ví dụ: phiên bản IE <8) có thể không hỗ trợ bộ chọn thuộc tính, nhưng những trình duyệt gần đây thì có. Để hỗ trợ các trình duyệt cũ hơn như IE6 và IE7, thật đáng buồn, bạn phải sử dụng một lớp (tốt, hoặc một số cách cấu trúc khác), thật đáng buồn.

(Tôi giả sử rằng mẫu {t _your_email}sẽ điền vào một trường id="email". Nếu không, hãy sử dụng một lớp thay thế.)

Lưu ý rằng nếu giá trị của thuộc tính bạn chọn không phù hợp với quy tắc cho mã định danh CSS (ví dụ: nếu có dấu cách hoặc dấu ngoặc trong đó hoặc bắt đầu bằng chữ số, v.v.), bạn cần có dấu ngoặc kép quanh giá trị:

label[for="field[]"]
{
    /* ...definitions here... */
}

Chúng có thể là dấu ngoặc đơn hoặc kép .


Sau đó, tôi sẽ thay đổi nó thành một lớp cho eg7 bằng cách sử dụng các bình luận điều kiện, cảm ơn vì câu trả lời tuyệt vời!
Kyle

Và bây giờ, các tài liệu jQuery nói rằng bạn không cần dấu ngoặc kép cho các từ đơn, vì vậy nó phù hợp với CSS một lần nữa (về vấn đề này).
TJ Crowder

6
Để tránh nhầm lẫn cho mọi người (tôi chỉ có điều này), không được có khoảng trống giữa label[for=email]
paddotk 15/03/13

IE8 không hỗ trợ các bộ chọn thuộc tính miễn là trang có khai báo <! DOCTYPE>.
ilinamorato

1
@TJCrowder Tôi hiểu. Tôi chỉ làm rõ quan điểm khi tôi vừa thử nó.
ilinamorato

0

Nếu nội dung là một biến, sẽ cần phải nối nó với dấu ngoặc kép. Nó làm việc cho tôi. Như thế này:

mục Đã chọn (id: number) {
    console.log ('nhãn chứa', document.querySelector ("nhãn [for = '" + id + "']"));
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.