9.CSS-属性选择器

属性选择器

作用

根据指定的属性名称找到对应的标签，然后设置属性。

格式

[attribute]
作用：根据指定的属性名称找到对应的标签，然后设置属性。
例如：

p[id]{
            color: red;
        }

含义：先找到所有的p标签，在p标签中找到有id属性的，然后设置属性。

[attribute=value]
作用：找到有指定属性，并且属性的取值等于value的标签，然后设置属性。
例如：

p[class=cc]{
            color: blue;
        }

含义：先找到所有的p标签，在p标签中找到有class属性等于cc的，然后设置属性。
最常见的应用场景，就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
<input type="radio" name="" id="">
<input type="checkbox" name="" id="">

属性的取值是以什么开头的

[attribute|=value] CSS2（有局限性）
只能找到指定的某个值并且与其他内容用-隔开的
[attribute^=value] CSS3

img[alt^=abc]{
      color:red;
    }

属性的取值是以什么结尾的

[attribute$=value] CSS3

img[alt$=abc]{
      color: red;
    }

属性的取值是否包含某个特定的值

[attribute~=value] CSS2（有局限性）
只能找到指定的某个值并且与其他内容用-隔开的
[attribute * =value] CSS3

img[alt*=abc]{
      color: red;
    }