집 > 기사 > 웹 프론트엔드 > CSS 속성 선택기에 대한 자세한 설명

CSS 속성 선택기에 대한 자세한 설명

小云云원래의: 2017-12-19 11:12:202003검색

지정된 속성을 가진 HTML 요소의 스타일을 설정합니다. class 및 id 속성뿐 아니라 지정된 속성이 있는 HTML 요소의 스타일을 지정할 수 있습니다. 이 글은 주로 CSS 속성 선택기에 대한 관련 지식을 소개합니다. 관심 있는 친구들이 꼭 읽어보길 바랍니다.

참고: IE7 및 IE8은 !DOCTYPE이 지정된 경우에만 속성 선택기를 지원합니다. IE6 이하에서는 속성 선택이 지원되지 않습니다.

속성 선택기

다음 예에서는 title 속성을 사용하여 모든 요소의 스타일을 지정합니다.

[title]
{
color:red;
}

속성 및 값 선택기

다음 예에서는 title="W3School"을 사용하여 모든 요소의 스타일을 지정합니다. 스타일링:

[title=W3School]
{
border:5px solid blue;
}

속성 및 값 선택기 - 다중 값

다음 예에서는 지정된 값을 가진 제목 속성이 포함된 모든 요소에 대한 스타일을 설정합니다. 공백으로 구분된 속성 값에 적용됩니다.

[title~=hello] { color:red; }

다음 예에서는 지정된 값이 포함된 lang 속성을 사용하여 모든 요소의 스타일을 지정합니다. 하이픈으로 구분된 속성 값에 적용:

[lang|=en] { color:red; }

양식 스타일링

속성 선택자는 클래스나 ID 없이 양식 스타일을 지정할 때 특히 유용합니다.

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}
input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

CSS 선택자 참조 매뉴얼

Selector	Description
[속성]	은 지정된 속성 요소를 선택하는 데 사용됩니다.
[attribute=value]	은 지정된 속성과 값을 가진 요소를 선택하는 데 사용됩니다.
[attribute~=value]	은 속성 값에 지정된 어휘가 포함된 요소를 선택하는 데 사용됩니다.
[attribute\|=value]	은 지정된 값(전체 단어여야 함)으로 시작하는 속성 값이 있는 요소를 선택하는 데 사용됩니다.
[attribute^=value]	속성 값이 지정된 값으로 시작하는 모든 요소와 일치합니다.
[attribute$=value]	속성 값이 지정된 값으로 끝나는 모든 요소와 일치합니다.
[attribute*=value]	속성 값에 지정된 값이 포함된 모든 요소와 일치합니다.

CSS 속성 선택기에 대한 자세한 설명

관련 기사