CSS선택기 속성

특정 속성으로 스타일 HTML 요소

특정 속성이 있거나 속성 값을 HTML 요소의 스타일을 할 수있다.

CSS [속성] 선택기

[attribute] 선택은 지정된 속성을 가진 요소를 선택하는 데 사용됩니다.

다음 예는 모든 선택 <a> 대상 속성을 가진 요소를 :

CSS [속성 = "값"] 선택기

[attribute="value"] 선택은 지정된 속성과 값을 가지는 요소를 선택하는 데 사용됩니다.

다음 예는 모든 선택 <a> A의 요소를 target="_blank" 속성 :

CSS [속성 ~ = "값"] 선택기

[attribute~="value"] 선택은 특정 단어를 포함하는 속성 값을 가진 요소를 선택하는 데 사용됩니다.

다음의 예는 "하나의 단어의 공백으로 구분 된 목록이 포함 된 제목 속성을 가진 모든 요소 선택 flower "

위의 예와 요소와 일치합니다 title="flower", title="summer flower" , 그리고 title="flower new" ,하지만 title="my-flower" 또는 title="flowers" .

CSS [속성 | = "값"] 선택기

[attribute|="value"] 선택기가 지정된 값으로 시작하여 지정된 속성을 가진 요소를 선택하는 데 사용됩니다.

다음 예제로 시작하는 클래스 속성 값을 가진 모든 요소 선택 "top" :

참고 : 값이 전체 단어로이 같은 단독 어느 class="top" 하이픈에 의해, 또는 다음에 ( - ) , 같은 class="top-text" !

CSS [속성 ^ = "값"] 선택기

[attribute^="value"] 선택기 속성 값이 지정된 값으로 시작 요소를 선택하는 데 사용됩니다.

다음 예제로 시작하는 클래스 속성 값을 가진 모든 요소 선택 "top" :

참고 : 값이 전체 단어 될 필요가 없습니다!

CSS는 선택기 [$ = "값"속성]

[attribute$="value"] 선택기 속성 값이 지정된 값으로 끝나는 요소를 선택하는 데 사용됩니다.

다음 예 끝나는 클래스 속성 값이 모든 요소를 선택하는 "test" :

참고 : 값이 전체 단어 될 필요가 없습니다!

CSS [속성 * = "값"] 선택기

[attribute*="value"] 선택기 속성 값이 지정된 값이 포함 된 요소를 선택하는 데 사용됩니다.

다음의 예는 포함하는 클래스의 속성 값을 가진 모든 요소 선택 "te" :

참고 : 값이 전체 단어 될 필요가 없습니다!

스타일링 양식

속성 선택기없이 스타일링을 형성하는 데 유용 할 수 있습니다 class 또는 ID :

팁 : 우리의 방문 CSS 양식 자습서 CSS와 양식 스타일을하는 방법에 대한 자세한 예제.

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4» 운동 5» 운동 6»

CSS 선택기의 더 예

우리의 사용 CSS 선택기 테스터를 다른 선택기를 보여주기 위해.

모든 CSS 선택기의 완전한 참고로, 우리로 이동하시기 바랍니다 CSS 선택기 참조 .