속성 선택자

1. [속성 = 값] : 주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용한다.

input[type="text"]{

width: 150px;

background-color:red;

border:1px solid #000000;

}

2. [속성 ~= 값]: 비교할 값이 여러 개일 경우 그중 하나만 일치해도 스타일을 적용합니다.

h2[title ~= "목차"]{

color: red;

font-weight:bold;

}

3. [속성 ^= 값]: 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용합니다.

h2[title ^= "목차"] {

background: url(item.png) no-repeat;

padding: 5px 30px;

}

4. [속성 $= 값] : 지정한 문자로 끝나는 속성에 대해서만 스타일을 적용.

a[href $= ".hwp"]{

background: url(hwp_icon.gif) center right no-repeat;

padding-right:25px;

}

5. [속성 |= 값] : 속성이 지정한 값으로 시작하면 스타일을 적용.

6. [속성 *= 값] : 사용자가 지정한 속성 값이 앞이나 뒤, 또는 중간 등 어느 위치에 있든지 해당 값이 포함되어 있으면 스타일이 적용.