CSS-属性选择器全

简介

1. [attribute]选择器选择具有指定属性的元素。
2. element [attribute]也称为简单属性选择器。----简单属性选择器根据属性的存在选择任何元素，而不管属性的值。
3. element [attribute=“value”]，需要考虑属性值。

常见形式

1. [attribute]
   例如：
   [href] { border: thin black solid; padding: 4px; }
   选择所有包含href属性的元素
2. [attribute = ‘value’]
   例如：
   [href = ‘test’] { border: thin black solid; padding: 4px; }
   选择所有含有属性值为test的href属性的元素
3. element [attribute]
   例如：
   a[href = ‘test’] { border: thin black solid; padding: 4px; }
   选择所有带有target属性的 <a>元素：
4. [attribute〜= value] 选择器选择具有包含指定单词的属性值的元素。element1 [attr〜=“value”] 也称为部分属性值选择器,部分属性值选择器基于属性的空格分隔值的一部分选择任何元素。
   [title~=flower] { background-color:yellow; }
   选择标题属性包含单词"flower"的所有元素

注意：这里的flower一定要是用空格隔开的，例如<img title="first second flower">才能被选择如果是<img title="first secondflower">是不会有效果的。

5. 1、[attribute|=value]选择器用于选择指定属性具有指定值开始的元素。
   2、element1 [lang | =“lc”]也称为语言属性选择器。语言属性选择器选择任何具有lang属性的元素，其值为连字符分隔的值列表，从选择器中提供的值开始。
   3、注意: 该值是整个单词，无论是单独像lang=“en”，或者像连字符(-)连接的如lang ="en-us"都可以。但是像lang="enus"就不行。
   [lang|=en] { background-color:yellow; }
   选择一个lang属性的起始值="en"的所有元素
6. [attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。
   div[class^="test"] { background:#ffff00; }
   设置class属性值以"test"开头的所有div元素的背景颜色：

只要是开头是test就行，不管是否有空格，例如<div class="testfirst">和<div class="test first>都是可以的

7. [attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。和第六种一样，只不过一定要最后一个匹配。
8. [attribute*=value] 选择器匹配元素属性值包含指定值的元素。只要属性值里面有value就行不管写在哪里，有没有空格。