选择器

权重：内联 > id > class > 元素（属性）

属性

//全选
[attributeName] {  }

//带attributeName属性的div节点
div[attributeName] {  }
input[type="email"]{  }

//div的子元素中，带attributeName属性的节点，div可以换做id，class等
div [attributeName] {  }

//class为container的元素的子节点的title属性的值为box的节点
.container [title="box"] {  }

//title 包含 dna的元素
div [title~="dna"]

//以 dna 结尾的 title,
div [title$="dna"]

//以 dna 开头的 title
div [title^="dna"]

//虽然精确匹配是有帮助的，但它可能选择太紧，并且^符号匹配可能太宽而无法满足你的需要。
//例如，可能不想选择 “genealogy” 的标题，但仍然选择“gene”和“gene-data”。 
//管道特征(|)就是这样，属性中必须是完整且唯一的单词，或者以-分隔开。
[title|="gene"]

//模糊搜索属性操作符，属性中做字符串拆分，只要能拆出来dna这个词就行:
div [title*="dna"]

//让属性搜索不区分大小写。 在结束方括号之前添加i：
[title*="DNA" i]

组合

//如果你需要找到一个a 标签，它有一个 title ，并且有一个以“genes” 结尾的 class,可以使用如下方式：
a[title][class$="genes"]

通过伪元素获取属性

<div class="box">
  <div class="item" att="son1">Son 1</div>
  <div class="item2" att="son1">Son 2</div>
</div>

.box [att] {
    color: blue;
    font-weight: 900;
}
//hover之后加入attr
.box [att]:hover::after {
    content: "hover " attr(att);
}

//还可以用来展示接收文件类型
<input type="file" accept="pdf,doc,docx">
[accept]:after {
   content: "Acceptable file types: " attr(accept);
}
//打印链接
a[href]:after {
   content: " (" attr(href) ") ";
}

重写内联样式

<div style="color: #222222; margin: 8px; background-color: #EFEFEF;"></div>
div[style*="margin: 8px"] {
   margin: 1em !important;
}

摘抄于 https://juejin.im/post/5cd218c3f265da038c022a78