# 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
← 布局 CSS优化form表单 →