分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

css选择符大全(常用总结)

发布时间:2023-09-06 01:42责任编辑:傅花花关键词:暂无标签

元素选择符

  1. E(某个元素)
  2. id(使用#id)
  3. .class(使用.class)
  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 (设置文本被选择时的样式)

css选择符大全(常用总结)

原文地址:https://www.cnblogs.com/Ry-yuan/p/8440927.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved