2011-04-07 6 views
53

이 질문은 지금 당분간 나를 괴롭 히고 있습니다. 엘리먼트의 애트리뷰트와 비교되는 CSS 셀렉터를 작성할 때.CSS 속성 선택자 : 따옴표에 대한 규칙 (", '또는 none?)

a[rel="nofollow"] 

따옴표로 무엇을해야하는지 알지 못합니다. 그들은 정말로 필요합니까?

기본적으로 웹 사이트에서 찾을 수 없기 때문에이 사양은 무엇입니까?

이 모든 것이 유효한 것으로 간주됩니까?

a[rel="nofollow"] 
a[rel='nofollow'] 
a[rel=nofollow] 
+0

나는 그들이 필요하다고 생각하지 않습니다. – Headshota

+0

@Headshota :이 정확한 경우에는 아니요, 아니요. –

+0

http://mothereff.in/unquoted-attributes#nofollow –

답변

56

여기 주제에 대해 더 자세히 작성했습니다 : Unquoted attribute values in HTML and CSS.

는 또한 당신이 당신의 질문에 대답하는 데 도움이되는 도구를 만들었습니다 http://mothereff.in/unquoted-attributes

Unquoted attribute value validator

당신은 일반적으로 속성 값 (영숫자 그러나, 몇 가지 예외가있는만큼 따옴표를 생략 할 수 있습니다 - 모든 세부 사항을 위해 연결 한 기사를보십시오). 어쨌든, 당신이 그들을 필요로 할 때를 대비하여 어쨌든 인용문을 추가하는 것이 우수 사례라는 것을 알았습니다. 즉, a[href^=http://]은 작동하지 않지만, a[href^="http://"]이됩니다.

내가 언급 한 기사는 CSS 사양의 해당 장에 대한 링크입니다. http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

처음 두 사용 문자열 -

+1

이것이 내가 알고 싶었던 것입니다. BoltClock의 anser도 매우 도움이되지만. 이렇게하면 내 RegExp에서 처리해야 할 사항이 명확 해집니다. – Olical

+0

@ Wolfy87 요 전날 쓴 기사에 대한 링크로 나의 대답을 업데이트했습니다. 그것은 몇 가지 정규식이 포함되어 있습니다 :) –

+1

(내 대답을 코멘트로 재 작성하기 때문에 잠시 후에 삭제했습니다.) 실용적인 견지에서 : 단일 인용 부호 또는 이중 인용 부호를 사용하는 것이 좋습니다. 이 방법으로 속성 값 (따옴표 자체 제외) 내의 특수 선택기 문자는 이스케이프가 필요하지 않습니다.플러스 - 그리고 이것은 개인 코딩 스타일 환경 설정이므로 내 말을 듣지 마십시오. XHTML 속성 따옴표와 일치한다는 것을 알았습니다. – BoltClock

22

속성 값은 식별자 또는 문자열

이어야한다. 세 번째는 식별자를 사용합니다.

식별자 (선택자의 요소 이름, 클래스 및 ID 포함)에는 문자 [a-zA-Z0-9] 및 ISO 10646 문자 U + 00A0 이상, 하이픈 (-) 및 밑줄 (_); 두 자리 하이픈 또는 한 자리 뒤에 하이픈으로 시작할 수 없습니다.

-http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

문자열 중 하나를 큰 따옴표 또는 작은 따옴표로 쓸 수 있습니다.

-http://www.w3.org/TR/CSS2/syndata.html#strings

+2

대신 CSS3 스펙에 링크 할 수도 있습니다. http://www.w3.org/TR/css3-selectors/#attribute-selectors –

+0

CSS2 선택기 엔진을 작성하는 중일 때 CSS2가 실제로 도움이됩니다. 그래서 CSS2는 나를 위해 더 좋지만 어쨌든 링크에 감사드립니다. – Olical