css选择器

• 分类
  • 选择一个元素
    • 标签选择器
      • 如table、p等HTML标签
    • class类选择器
      • .xxx
    • id选择器
      • #xxx
    • 属性选择器
      • 选择有某个属性的元素，如操作所有有title属性的元素：*[title] {color:red;}
      • Angular等框架，为了组件之间的隔离，可能会给组件内的元素增加自动生成的属性，然后通过属性选择器限制该组件内属性的作用范围，如_nghost-c0、_ngcontent-c0等就是自动生成的属性，后面的序号用于区分不同的组件。
    • 伪元素选择器
      • xxx:first-child和xxx:last-child
        • xxx代表一个selector，选择xxx的父元素下的最后一个xxx元素
        • p:last-child 选择属于其父元素最后一个子元素每个<p>元素。
      • xxx:before和xxx:after
        • 在xxx元素之前/之后插入内容
      • xxx:link和xxx:visited和xxx:active和xxx:hover
        • 对某个状态的a链接进行样式设置
      • xxx:focus
        • 选择具有焦点的输入元素
      • 反向/非选择器
        • 使用not(xxx)，xxx代表一个selector，选择当前位置下非xxx的每个元素
        • 如*:not(p) 选择非<p>元素的每个元素。
    • 子元素选择器
      • 选择某个父元素下的子元素
      • 使用空格，如#table-id th指选择id为table-id的元素下所有的th元素
      • 父元素也是一个完整的选择器
    • 复合选择器，即组合多种选择器，即选择符合多个条件的元素
      • 直接连起来，不需要加任何间隔符，如th:last-child#table-id指最后一个th并且id是table-id
      • 可以连接class类选择器、id选择器、属性选择器、伪元素选择器等
      • 但table这种标签选择器、子元素选择器不能直接关联？因为会当成一个标签？能不能用小括号括起来进行区分？
  • 选择多个元素（或的关系）
    • 使用逗号连接多个选择器，如#table-id, #table-id2指选择id为table-id和table-id2的元素

:host ::ng-deep th:last-child:not(#table-column-nameFilter) .mat-form-field {
   100px !important;
}