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]
html css css-selectors inline-styles AgelessEssence
źródło

Odpowiedzi:

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
1
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
9
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
2
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
3
@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
3

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

div[style*="display:block;"]
Bertrand
źródło
4
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