css属性选择器

类型

1. [attr] 选择含有attr属性的元素
2. [attr=value] 选择含有attr属性，并且值为value的元素，这里要注意的是，value可以放在双引号里，就像这样 [attr=“value”]，如果遇到下面这种情况，为了选中元素，就要使用加双引号的写法了

  <div title="test test1"></div>
  <style>
    div[title="test test1"] {
      color: red;
      width: 100px;
      height: 100px;
      border: 1px solid currentColor;
    }
  </style>

3.[attr~=value] 选择含有attr属性，并且值中以空格分开，其中至少有一个值为value的元素
4.[attr|=value] 选择含有attr属性，并且值为value，或者值以value-为前缀的元素
比如下面代码

<div title="test-1"></div>
  <style>
    div[title|="test"] {
      color: red;
      width: 100px;
      height: 100px;
      border: 1px solid currentColor;
    }
  </style>

5.[attr^=value] 选择含有attr属性，并且值以value开头的元素
6.[attr$=value] 选择含有attr属性，并且值以value结尾的元素
7.[attr*=value] 选择含有attr属性，并且值中包含value的元素
8.[attr operator value i] operator表示类似 ~=，|=这样的运算符，i表示忽略attr属性值的大小写，我们在比较时，先都转换为小写，如果值相等就被选中