인라인 스타일 속성 별 CSS 선택기

114

인라인 스타일 속성 값으로이 요소를 선택하는 CSS 선택기가 있습니까?

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

뭔가

div[cssAttribute=cssValue]

— 에이지리스 에센스
소스

191

인라인 style속성은 다른 HTML 속성과 다르지 않으며 하위 문자열 속성 선택기와 일치 할 수 있습니다.

div[style*="display:block"]

바로 이러한 이유 때문에 매우 취약 합니다. 속성 선택기는 정규식을 지원하지 않으므로 속성 값의 정확한 하위 문자열 일치 만 수행 할 수 있습니다 . 예를 들어 다음과 같이 속성 값에 공백이있는 경우 :

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

공간에 맞게 선택기를 변경할 때까지 일치하지 않습니다. 그런 다음 모든 순열, 광고 메스꺼움을 포함하지 않는 한 공백을 포함 하지 않는 값의 일치를 중지합니다 . 그러나 인라인 스타일 선언 자체가 전혀 변경되지 않을 가능성이있는 문서로 작업하는 경우 문제가 없습니다.

DOM에 반영된 실제 지정, 계산 또는 사용 된 값으로 요소를 선택하는 것은 아닙니다 . 즉 CSS 선택기 불가능합니다.

— BoltClock
소스

필요하더라도 너무 나쁘지만 이에 대한 실제 해결책은 없습니다.

— BoltClock

당신은 우리가 아마 도울 수이 작업을 수행해야하는 이유 당신이 우리를 말할 수 있다면 더

— 부식

이것이 언제 유용한 지 예를 들어 보겠습니다. 저는 Selenium Web Driver 테스트를 작성 중이며 테스트에서 실제 코드를 변경할 수 없습니다 / 변경하고 싶지 않습니다. 코드가 고유 ID 또는 부모 구조를 제공하지 않기 때문에 스타일 표시별로 특정 자동 완성 (숨겨진 몇 개 있음)을 식별해야합니다. 아마도 콜백의 <body>에 덤프됩니다. 그러나 네, 지적한 것처럼 깨지기 쉽습니다.

— andersand 2013-04-26

페이지 상단에 고정 div를 추가하기 때문에 페이지에서 Google 번역 바를 사용하는 경우 매우 필요하며 탐색이 이미 수정되어 있습니다. 이 기술을 사용하면 번역 바가 표시되는지 여부에 따라 내비게이션 바를 이동할 수 있습니다. 번역 바에는 정적 클래스가 있으며 변경되는 유일한 것은 표시 스타일입니다.

— Jag

@andersand : 내 대답에 대한 충분한 의견을 말한 후 마침내 업데이트를 시작했습니다. 원래 답변을 작성할 때 Selenium에 대해 생각하지 않았으며 인라인 스타일 속성 선택기에 대한 가장 눈에 띄는 사용 사례 중 하나라는 데 동의합니다.

— BoltClock

";"포함 나를 위해 더 잘 작동합니다.

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

— Bertrand
소스

속성이 있기 때문입니다 style정확히 HTML 속성에 일치해야합니다

— RousseauAlexandre

@RousseauAlexandre ";"추가 ";"이있는 요소를 시도했을 때 선택자에게 아무런 차이가 없습니다. 선택기가 아니라 그 안에. 문자와 공백이 같으면을 포함 할 필요가 없습니다 ;.

— Maxie Berkmann