Bộ chọn CSS theo thuộc tính kiểu nội tuyến

114

Có bộ chọn CSS nào để chọn phần tử này theo giá trị thuộc tính kiểu nội tuyến của nó không?

<div style='display:block'>...</div>

cái gì đó như

div[cssAttribute=cssValue]

— AgelessEssence
nguồn

191

styleThuộc tính nội tuyến không khác với bất kỳ thuộc tính HTML nào khác và có thể được so khớp với bộ chọn thuộc tính chuỗi con:

div[style*="display:block"]

Tuy nhiên, chính vì lý do này mà nó cực kỳ mỏng manh . Vì bộ chọn thuộc tính không hỗ trợ biểu thức chính quy, bạn chỉ có thể thực hiện các đối sánh chuỗi con chính xác của giá trị thuộc tính. Ví dụ: nếu bạn có một khoảng trắng ở đâu đó trong giá trị thuộc tính, như sau:

<div style='display: block'>...</div>

Nó sẽ không khớp cho đến khi bạn thay đổi bộ chọn của mình để phù hợp với không gian. Và sau đó nó sẽ ngừng so khớp các giá trị không chứa khoảng trắng, trừ khi bạn bao gồm tất cả các hoán vị, ad nauseum. Nhưng nếu bạn đang làm việc với một tài liệu trong đó bản thân các khai báo kiểu nội tuyến không có khả năng thay đổi, bạn sẽ ổn.

Cũng lưu ý rằng đây hoàn toàn không phải là lựa chọn các phần tử theo các giá trị được chỉ định, tính toán hoặc sử dụng thực tế của chúng như được phản ánh trong DOM. Điều đó là không thể với bộ chọn CSS.

— BoltClock
nguồn

Ngay cả khi nó được yêu cầu, quá tệ, không có giải pháp thực sự cho điều này.

— BoltClock

nếu bạn có thể cho chúng tôi biết lý do tại sao bạn cần phải làm điều này thì chúng ta có lẽ có thể giúp hiểu thêm

— ăn mòn

Tôi sẽ cung cấp cho bạn một ví dụ về thời điểm điều này hữu ích. Tôi đang viết một bài kiểm tra Trình điều khiển Web Selenium và không thể / không muốn thay đổi mã thực trong bài kiểm tra. Tôi cần xác định một tự động hoàn thành cụ thể (có một số ẩn) bằng cách hiển thị kiểu, vì mã không cung cấp cấu trúc cha hoặc id duy nhất - chúng có lẽ được đưa vào <body> trong lệnh gọi lại. Nhưng vâng, nó mong manh như bạn chỉ ra.

— anders và

Tôi thấy nó CỰC KỲ BẮT BUỘC nếu sử dụng thanh google dịch hte trên trang của bạn vì nó thêm một div cố định vào đầu trang của chúng tôi - và điều hướng của chúng tôi đã được sửa. Kỹ thuật này cho phép chúng ta di chuyển thanh điều hướng tùy thuộc vào việc thanh dịch có hiển thị hay không. Thanh dịch có các lớp tĩnh và điều duy nhất thay đổi là kiểu hiển thị của nó.

— Jag

@andersand: Sau khi có đủ bình luận về câu trả lời của tôi, cuối cùng tôi đã cập nhật nó. Tôi đã không nghĩ về Selenium khi viết câu trả lời ban đầu của mình và tôi đồng ý rằng nó là một trong những trường hợp sử dụng nổi bật nhất cho các bộ chọn thuộc tính kiểu nội tuyến.

— BoltClock

Kể cả ";" hoạt động tốt hơn cho tôi.

div[style*="display:block;"]

— Bertrand
nguồn

Điều này là do thuộc tính stylechính xác phải phù hợp với sở hữu HTML

— RousseauAlexandre

@RousseauAlexandre Đang thêm ";" đối với bộ chọn không tạo ra sự khác biệt nào ít nhất là khi tôi thử trên phần tử có ";" trong đó và không trong bộ chọn. Miễn là các ký tự và khoảng trắng giống nhau, không cần thiết phải thêm vào ;.

— Maxie Berkmann