# CSS 常用选择器

在我们日常工作中,css 选择器是很常用的,css 选择器也是五花八门,有 id,class,标签...其中在合适的场合用对合适的选择器,有时候会大大提高我们的开发效率,下面我们就梳理下好用且常用的 css 选择器

- id
- class
- 标签
- `[target]` 选择带有 target 属性所有元素。
- `[target=_blank]` 选择`target="\_blank"` 的所有元素
- div>P 父元素是 div 的所有 p 标签
- div p div 内部的所有 p 标签
- div+p 选择紧接在 <div> 元素之后的所有 <p> 元素
- input:focus 选择获得焦点的 input 元素。
- p:first-letter 选择每个 <p> 元素的首字母。
- p:first-line 选择每个 <p> 元素的首行。
- p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
- p:before,p:after 在每个 <p> 元素的内容之前/之后插入内容
- p~div 选择前面有 <p> 元素的每个 <div> 元素。(p 元素后面所有同级的 div 元素)
- input:enabled 选择每个启用的 <input> 元素。
- input:disabled 选择每个禁用的 <input> 元素
- input:checked 选择每个被选中的 <input> 元素。
- ::selection 选择被用户选取的元素部分。

# 在 css 预编辑器中使用选择器

input[type="radio"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
      //选中
      &:checked+.name {
        border-color: #e3393c;
      }
      //禁用
      &:disabled+.name {
        background: #eee;
        color: #999;
        cursor: not-allowed;
      }
    }
// https://smohan.net/blog/6gr77h