속성 선택기를 사용하여 클래스를 일치시키는 이유는 무엇입니까?


85

다음과 같은 CSS 선택기가있는 반응 형 이메일 템플릿 의 예 를 찾았습니다 .

a[class="btn"]

이 구문이 다음과 완전히 동일하다면 왜 사용됩니까?

a.btn

모바일 브라우저 등에 영향을 미칩니 까?


5
@Jevgeni Bogatyrjov : CSS와 관련이없는 완전히 다른 질문이지만 잘못된 제목으로 인해 어떻게 혼란 스러웠는지 알 수 있습니다. 나는 그것을 편집했다.
BoltClock

답변:


142

[]구문은 인 특성 선택기 .

a[class="btn"]

이있는 <a>태그 가 선택 됩니다 class="btn". 그러나, 그것은 것 없는 선택 <a>이있는 class="btn btn_red"(반면 예를 들어, a.btn것). 그것은 단지 정확히 일치 하는 속성을.

기억해야 할 30 가지 CSS 선택 자를 읽어 보세요 . 유망한 웹 개발자에게 매우 중요합니다.


하지만 응답 성과 관련이 없습니다. 순수한 CSS 구문 이죠?
ducin 2013 년

2
@tkoomzaaskz 맞습니다.
에릭

나는 또한 동일한 튜토리얼 ( campaignmonitor.com/guides/mobile/coding )을 보았습니다. 튜토리얼에서이 기술을 사용하는 것이 이상하게 보입니다. 튜토리얼은 시작하는 사람들에게 가능한 한 명확하게해야합니다. 특히 공통 .btn선택기로 충분할 때. 내가 뭔가 빠졌나요? 이것에 어떤 이점이 있습니까? 내가 추측하는 더 큰 특이성?
nickspiel 2014 년

jQuery와 대괄호를 사용하여 모든 클래스 이름을 선택하여 동일한 접두사를 가진 모든 클래스를 가져 오는 새로운 방법이 없습니까? $ (this) .css ( "[class ~ = 'btn_']", "red"); 구문이 잘못되었을 수 있지만 올바른 구문이 무엇인지 알고 있습니까?
whyoz

1
다른 유형의 속성 선택 자도 표시하도록 답변을 업데이트하면 좋을 것입니다. "css 선택기 대괄호"를 검색하면 검색에서이 질문이 나타나고 다른 변형 ( "css 선택기 대괄호 별표")을 검색하기가 어렵습니다.
cimmanon
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.