Làm cách nào để có được CSS để chọn ID bắt đầu bằng một chuỗi (không phải trong Javascript)?

192

Nếu HTML có các yếu tố như thế này:

id="product42"
id="product43"
...

Làm cách nào để khớp tất cả các id bắt đầu với "sản phẩm"?

Tôi đã thấy câu trả lời thực hiện điều này chính xác bằng cách sử dụng javascript, nhưng làm thế nào để làm điều đó chỉ với CSS?

html css css-selectors

— guptron
nguồn

361

[id^=product]

^=cho biết "bắt đầu bằng". Ngược lại, $=chỉ ra "kết thúc bằng".

Các biểu tượng thực sự được mượn từ cú pháp Regex, trong đó ^và $có nghĩa là "bắt đầu chuỗi" và "kết thúc chuỗi" tương ứng.

Xem thông số kỹ thuật để biết thông tin đầy đủ.

— Niết bóng tối tuyệt đối
nguồn

1

Cảm ơn phương pháp và lời giải thích, tôi đã chỉnh sửa câu hỏi của mình để nó rõ ràng hơn. Vì tò mò, có cách nào để khớp một chuỗi bên trong chuỗi của id không?

— guptron

Xem thông số kỹ thuật , họ giải thích nó tốt hơn tôi có thể!

— Niet the Dark Tuyệt đối

@itamar: Tôi đánh giá cao nỗ lực của bạn trong việc chỉnh sửa câu trả lời của tôi, nhưng trích dẫn chỉ được yêu cầu nếu giá trị chứa các ký tự không phải là định danh hợp lệ. productrõ ràng là một định danh hợp lệ, và do đó không cần trích dẫn.

— Niet the Dark Tuyệt đối

Độ đặc hiệu của loại bộ chọn này rất thấp

— nuander

3

@ Emerald214:not([id^=product])

— Niet the Dark Tuyệt đối

59

Tôi sẽ làm như thế này:

[id^="product"] {
  ...
}

Lý tưởng nhất, sử dụng một lớp học. Đây là những gì các lớp học dành cho:

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

Và bây giờ bộ chọn trở thành:

.product {
  ...
}

— Máy xay
nguồn

1

@Blender, cảm ơn, tôi đã chọn câu trả lời khác vì nó giải thích thêm một chút cho tôi và hiểu các biểu tượng đang được sử dụng. Tôi không thể sử dụng các lớp cho kịch bản này, nếu không, nó sẽ đẹp hơn.

— guptron

5

Sử dụng bộ chọn thuộc tính

[id^=product]{property:value}

— Musa
nguồn

-1

Tôi nhận thấy rằng có một bộ chọn CSS khác thực hiện điều tương tự. Cú pháp như sau:

[id|="name_id"]

Điều này sẽ chọn tất cả ID phần tử bắt đầu bằng từ được đặt trong dấu ngoặc kép.

— Luigi Spezia
nguồn

Làm thế nào bạn nhận thấy? tài liệu tham khảo?

— Ben Bozorg

Tài liệu cho việc này tại đây: w3.org/TR/selector-3/#attribution-selector Điều này sẽ chọn tất cả id bắt đầu hoặc bằng "name_id"

— Dessauges Antoine

att|=valKHÔNG giống như att^=val. Từ tham chiếu được đề cập: Bộ |=chọn "Đại diện cho một phần tử với thuộc tính att, giá trị của nó là chính xác" val "hoặc bắt đầu bằng" val " ngay sau" - " ." Vì vậy, một id như "sản phẩm42" sẽ không được khớp bởi |=, nhưng "sản phẩm-42" sẽ.

— Goozak