CSS属性選択子

属性シレクタは、指定された属性を持つHTML要素にスタイルを設定します。指定された属性を持つHTML要素にのみスタイルを設定し、classやid属性に限定されません。

属性シレクタについて学ぶ

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="alert warning"）的列表的任何元素匹配，其中一个值等于指定的值：

[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%　5background:　url("pdf.png")　0-0%　no
　　　　repeat;-right:　15px;
}

上例中的选择器将定位所有外部链接并添加一个小图标，指示它们将在新的选项卡或窗口中打开。

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

CSS [attribute $="value"]選択子を使って選択できます同様に、$=演算子を使って属性値で指定されます指定された値结尾の

すべての要素。これは完全な単語である必要はありません。
　　　　a[href$=".pdf"]　{　5background:　url("pdf.png")　0-0%　no
　　　　repeat;-padding　20px;
}

left:上記の例では、この選択子は

PDFドキュメントにリンクしているすべての要素にリンクし、小さなPDFアイコンを追加して、ユーザーにリンクに関するヒントを提供します。 *CSS [attribute

「=value」選択子を使って*演算子を使って属性選択子は、属性値が指定された値を含むすべての要素に一致します。

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

上記の例では、この選択子は、classvalueに含まれる属性を持つすべてのHTML要素と一致しますwarning。例えば、その要素はクラス値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;
}