css常见选择器
通用选择器 * {color:red } 选择的是所有元素
元素选择器 p {color:red } 元素选择器 选择的是指定元素
id选择器 #test {color:red} 通过元素属性 id进行选择
class选择器 .test {color:red} 通过元素 class 进行选择
分组选择器 a,.test,#test {color:red}可以通过分组选择器提取共同样式减少代码
子类选择器 p>strong {color:red} p下面的strong 只能选择到p的下一级
后代选择器 p strong {color:red} p元素里面所有的strong都能被选择到
兄弟选择器 p + strong {color:red} 选择同一级的第一个strong元素
兄弟选择器 p ~ strong {color:red} 选择同一级的strong元素
伪元素选择器 伪元素选择器的开头是2个冒号::
p::first-line {color:red} <p>被选元素的首行被选择依据换行为标准<br> <!-- 这里换行了 --> 前面被选中了后面未被选中 </p>
p::first-letter {color:red}<p>被选元素的首个字被选中了 这里的第一个被字被选中了 </p>
p::before {content:‘lsc’} <p>lsc被选元素里里面刚开始的地方添加lsc </p>
p::after {content:‘lsc’}<p>被选元素里里面刚结束始的地方添加lsc lsc</p>
p::selection {color:red}{文字被选中时样式 }
伪类选择器 伪类选择器的开头是1个冒号:
:root 获取根元素,默认根元素是html
:first-child 获取元素集合的第一个元素
:last-child 获取元素集合的最后一个元素
:nth-child(n) 获取元素集合的指定元素
:only-child 插入文本到元素内容后
:enabled 选择已启用的元素对象
:disabled 选择已禁用的元素对象
:checked 选择已选中的元素对象
:default 选择默认的元素对象
:valid 选择合法的元素对象
:invalid 选择非法的元素对象
:required 选择必选元素对象
:optional 选择可选元素对象
:link 未点击的链接元素
:visited 以点击的链接元素
:active 光标点击中链接的效果
:hover 光标移到链接上的效果
:focus 获取焦点的元素对象
:not 反像选择器
:empty 选择没有内容的元素