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

posted @ 2022-03-10 11:12  浅浅的活埋我~  阅读(29)  评论(0)    收藏  举报