当前位置： 移动技术网 > IT编程>网页制作>CSS > css选择符大全（常用css选择符）

css选择符大全（常用css选择符）

2018年02月11日  | 移动技术网IT编程  | 我要评论

（一）元素选择符

  1. E（某个元素,如p）
  2. id（使用id，如#idName）
  3. class（使用class，如.myclass）
  4. 通配符：*

（二）关系选择符

  1. 包含选择符:E F（E所有的F包含子代，孙代，子子孙孙等等）
  2. 子选择符:E<F（与包含不同的是，子选择符仅限于子代）
  3. 相邻选择符:E+F（和E相邻的F，相隔一个都不算）
  4. 兄弟选择符:E~F（和E同级的F的算）

（三）属性选择符:

  1. E[att]（E中带有某个att属性的元素）
  2. E[att="val"] (E中带有att且值为val的元素)
  3. E[att~="val"] (E中包含att属性，中存在val值)
  4. E[att^="val"] (E中att属性值以val开头的元素)
  5. E[att$="val"] (E中att属性值为以val结尾的元素)
  6. E[att*="val"] (E中att属性值为包含val字符的元素)
  7. E[att|=="val"] (E中att属性值为val 或者是val-连接的字符串)

（四）伪类选择符

（基于元素某种特性定义的类，伪类通俗点就你不需要再自己定义class，直接使用即可）

  1. E:link (a元素没有被访问时)
  2. E:visited （a元素已经被访问了）
  3. E:hover （鼠标悬浮在元素时）
  4. E:active （鼠标点击到释放时）
  5. E:focus （元素成为输入焦点时）
  6. E:lang(fr) （匹配使用特殊语言）
  7. E:not(s) （匹配没有s样式的元素E）
  8. E:root （匹配E的根元素）
  9. E:first-child （匹配父元素第一个子元素E）
  10. E:last-child(css3) （匹配父元素的最后一个子元素E）
  11. E:only-child（匹配父元素仅有的元素E）
  12. E:nth-child(n)（匹配父元素第n个子元素E）
  13. E:nth-last-child(n)（匹配父元素倒数第n个子元素E）
  14. E:first-of-type（匹配同类型第一个同级兄弟元素E）
  15. E:empty（匹配没有任何子元素（包括text节点）的E）
  16. E:checked：（匹配处于选中状态的元素E，input的radio与checkbox）
  17. E:enabled ：（匹配处于可用状态的元素E）
  18. E:disabled： （匹配处于不可以状态的元素E）
  19. E:target： （匹配相关url执行的E元素）

（五）伪对象选择符

  1. E:first-letter （首字下沉）
  2. E:first-line （第一行样式）
  3. E:before （设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性）
  4. E:after （设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性）
  5. E::placeholder （设置input占位符的样式）
  6. E::selection （设置文本被选择时的样式）

本篇是个人笔记，可经常看看。
向前走，也别忘记要多回顾

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网