CSS 속성 선택자

속성 선택자는 지정된 속성을 가진 HTML 요소에 스타일을 설정합니다. class 또는 id 속성에 제한되지 않고, 지정된 속성을 가진 HTML 요소에 스타일을 설정할 수 있습니다.

속성 선택자 이해하기

CSS 속성 선택자는 특정 조건에 따라 스타일을 적용하는 간단하고 강력한 방법을 제공합니다.속성 또는 속성 값의 존재로 인해 스타일을 HTML 요소에 적용합니다.

속성(옵션적으로 값과 함께)을 쌍대괄호에 넣어 속성 선택자를 생성할 수 있습니다. 또한 그 앞에 넣을 수도 있습니다요소 유형 선택자.

이 섹션들은 가장 일반적인 속성 선택자를 설명합니다.

CSS [attribute] 선택자

이는 속성 선택자의 가장 간단한 형식입니다. 주어진 속성이 존재하면 스타일 룰을 요소에 적용합니다. 예를 들어, 모든 속성을 가진 요소에 다음 스타일 룰을 사용하여 스타일을 적용할 수 있습니다:

[title] {}}
　　　　color: blue;
}

[title]예제에서의 선택자는title属性를 가진 모든 요소와 일치합니다。

你还可以通过将属性选择器放置在元素类型选择器之后，将选择范围限制为特定的HTML元素，如下所示：

abbr[title] {
　　　　color: red;
}

选择器abbr[title]仅匹配具有title属性的元素，因此它匹配缩写，但不匹配具有属性的锚元素title。

CSS [attribute="value"] 选择器

你可以使用=运算符使属性选择器匹配属性值与给定值完全相等的任何元素：

input[type="submit"]　{
　　　　border:　1px solid green;
}

예제에서의 선택자는 input 具有type属性值等于的所有元素submit。

CSS [attribute〜="value"] 选择器

你可以使用~=运算符来使属性选择器与属性值是由空格分隔的值列表的任何元素匹配，其中一个值等于指定的值：

[class~="warning"] {
　　　　color:　#fff;
　　　　background:　red;
}

该选择器将任何具有class属性的HTML元素匹配，该属性包含以空格分隔的值，其中一个为warning。例如，它具有类值的元素相匹配warning，alert warning等等。

CSS [attribute |="value"] 选择器

你可以使用|=运算符使属性选择器与属性具有以指定的值开头的连字符分隔值列表的任何元素匹配：

[lang|=en] {
　　　　color:　#fff;
　　　　background: blue;
}

예제에서의 선택자는lang包含以开头的值en的所有元素属性，无论该值后面是否带有连字符和更多字符。换句话说，它的元素相匹配lang具有价值属性en，en-US, en-GB 등,而不能为US-en, GB-en.

CSS [attribute ^="value"] 选择器

你可以使用^=运算符使属性选择器与属性值로지정된 값시작하는모든 요소와 일치할 수 있습니다. 그것은 완전한 단어가 아니어도 됩니다.

a[href^="http://"] {
　　　　background: url("external.png")　100%　50%　no-repeat;
　　　　padding-right:　15px;
}

예제에서의 선택자는 모든 외부 링크를 정의하고 새 탭이나 창에서 열리는지 표시하는 작은 아이콘을 추가합니다.

CSS [attribute $="value"] 선택자

그리고, $= 연산자를 사용하여 속성 값 선택자를 선택할 수도 있습니다로지정된 값으로 끝나는모든 요소. 반드시 완전한 단어가 아니어도 됩니다.

a[href$=".pdf"]　{
　　　　background:　url("pdf.png")　0　50%　no-repeat;
　　　　padding-left:　20px;
}

이 예제의 선택자는PDF 문서에 링크된 모든 요소에 작은 PDF 아이콘을 추가하여 사용자에게 링크에 대한 힌트를 제공합니다.

CSS [attribute *="value"] 선택자

이를 사용할 수 있습니다*= 연산자는 속성 선택자가 특정 값을 포함하는 속성 값을 일치시키는 데 사용됩니다.

[class*="warning"]　{
　　　　color:　#fff;
　　　　background:　red;
}

이 예제의 이 선택자는 모든 HTML 요소와 classvalue를 포함하는 속성과 일치시킵니다. 예를 들어, 그 요소는 class 값이 warning, alert warning, alert를 가진 요소와 일치합니다.-warning 또는 alert_warning 등

속성 선택자를 사용하여 양식을 스타일링

속성 선택자는 없는class또는의 스타일 스타일 특별히 유용id：

input[type="text"],　input[type="password"]　{
　　　　width:　150px;
　　　　display:　block;
　　　　margin-bottom:　10px;
　　　　background:　yellow;
}
input[type="submit"]　{
　　　　padding:　2px　10px;
　　　　border:　1px　solid　#804040;
　　　　background:　#ff8040;
}