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 选择没有内容的元素