Selektor CSS według atrybutu stylu wbudowanego

114

Czy istnieje selektor CSS do wybierania tego elementu na podstawie wartości atrybutu stylu wbudowanego?

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

coś jak

div[cssAttribute=cssValue]

— AgelessEssence
źródło

191

styleAtrybut inline nie różni się od żadnego innego atrybutu HTML i można go dopasować za pomocą selektora atrybutu podciągów:

div[style*="display:block"]

Jednak właśnie z tego powodu jest niezwykle delikatny . Ponieważ selektory atrybutów nie obsługują wyrażeń regularnych, można wykonywać tylko dokładne dopasowania podciągów wartości atrybutu. Na przykład, jeśli masz spację gdzieś w wartości atrybutu, na przykład:

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

Nie będzie pasować, dopóki nie zmienisz selektora, aby pomieścić przestrzeń. A potem przestanie dopasowywać wartości, które nie zawierają spacji, chyba że uwzględnisz wszystkie permutacje, ad nauseum. Ale jeśli pracujesz z dokumentem, w którym deklaracje stylu wbudowanego raczej się nie zmienią, powinno być dobrze.

Zwróć również uwagę, że wcale nie oznacza to wybierania elementów według ich rzeczywistych określonych, obliczonych lub używanych wartości, co znajduje odzwierciedlenie w modelu DOM. Że nie jest to możliwe z selektorów CSS.

— BoltClock
źródło

Nawet jeśli jest to wymagane, szkoda, nie ma na to prawdziwego rozwiązania.

— BoltClock

jeśli mógłbyś nam powiedzieć, dlaczego musisz to zrobić, prawdopodobnie możemy pomóc więcej

— skorodowany

Podam przykład, kiedy jest to przydatne. Piszę test Selenium Web Driver i nie mogę / nie chcę zmieniać rzeczywistego kodu w teście. Muszę zidentyfikować określone autouzupełnianie (jest kilka ukrytych) na podstawie wyświetlania stylu, ponieważ kod nie zapewnia unikalnego identyfikatora ani struktury nadrzędnej - przypuszczalnie są one zrzucane do <body> w wywołaniu zwrotnym. Ale tak, jest kruche, jak wskazałeś.

— andersand

Znalazłem to BARDZO WYMAGANE, jeśli używasz paska tłumaczenia hte google na swojej stronie, ponieważ dodaje on stały div na górze naszej strony - a nasza nawigacja jest już naprawiona. Ta technika pozwala nam przesuwać pasek nawigacji w zależności od tego, czy pasek tłumaczenia jest widoczny, czy nie. Pasek translacji ma statyczne klasy i jedyną rzeczą, która się zmienia, jest jego styl wyświetlania.

— Jag

@andersand: Po wystarczającej liczbie komentarzy na temat mojej odpowiedzi w końcu zabrałem się za jej aktualizację. Nie myślałem o Selenium, pisząc moją oryginalną odpowiedź i zgadzam się, że jest to jeden z najbardziej znanych przypadków użycia selektorów atrybutów w stylu inline.

— BoltClock

Włącznie z ";" działa lepiej dla mnie.

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

— Bertrand
źródło

Dzieje się tak, ponieważ atrybut stylemusi dokładnie pasować do właściwości HTML

— RousseauAlexandre

@RousseauAlexandre Dodawanie ";" do selektora nie ma znaczenia, przynajmniej kiedy próbowałem na elemencie z ";" w nim a nie w selektorze. Dopóki znaki i spacje są takie same, nie trzeba uwzględniać ;.

— Maxie Berkmann