CSS-选择器(权重,伪类、伪元素区别)

2020-04-1420:57:02网页制作Comments1,803 views字数 1362阅读模式

1. 11种选择器

  1. 元素选择器(类型选择器)
div/p/span...
复制代码
  1. 选择器分组 逗号分隔
h2,p
复制代码
  1. 通配符选择器
*与任何元素匹配
复制代码
  1. 类选择器
//区分大小写
.menu //class属性值为menu的元素
.menu .active //class属性值同时包含menu、active的元素
复制代码
  1. id选择器
#app
复制代码
  1. 属性选择器
//根据元素的属性及属性值来选择元素
[title]//包含title属性的元素
a[href]
a[href][title]
a[href='xxx'][title='xxx']
p[class='xxx']//属性值完全匹配
p[class~='xxx']//属性值包括xxx的元素

//通配符匹配属性选择器
[abc^='def']//abc属性以def开头的元素
[abc$='def']//...结尾...
[abc*='def']//...包含...
复制代码
  1. 后代选择器(包含选择器)空格分隔
//选择某元素后代的元素
h1 em//h1中的em元素
p .important//class属性为important的p元素
复制代码
  1. 子元素选择器 >分隔
//选择作为某元素的子元素的元素
h1 > strong
复制代码
  1. 相邻元素选择器 +分隔
//选择兄弟元素
h1+p//紧跟h1元素后面的p元素
复制代码
  1. 伪类
//对大小写不敏感
a:link//未访问
a:visited//已访问
a:hover//鼠标移动到 必须在:link和:visited之后设置
a:active//鼠标点击 必须在:hover之后设置

:first-child//元素的第一个子元素
:focus//键盘输入焦点
复制代码
  1. 伪元素
p::first-line//文本首行 只能用于块级元素
p::first-letter//文本首字母

h1::before//在元素前面插入新的内容
h2::after//...后面...
复制代码
  1. 更多 参考 www.ruanyifeng.com/blog/2009/0…

2. 选择器权重

  • !important;
  • 行内样式;
  • ID选择器, 权重:100;
  • class,属性选择器和伪类选择器,权重:10;
  • 标签选择器和伪元素选择器,权重:1

3. 伪类和伪元素的区别

  1. 定义

    伪类:其核心就是用来选择那些不能够被普通选择器选择的文档之外的元素,比如:hover文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18136.html

    伪元素:其核心就是需要创建通常不存在于文档中的元素,比如::before

  2. 表示方法

    CSS2 中伪类、伪元素都是以单冒号:表示,CSS2.1 后规定伪类用单冒号表示,伪元素用双冒号::表示,浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first-line, :first-letter 等)的单冒号写法。对于 CSS2 之后所有新增的伪元素(如::selection),应该采用双冒号的写法。但是因为兼容性问题,大部分还是用的单冒号。

  3. 其他
    • 伪类和伪元素都是用来表示文档树以外的"元素"。
    • 伪类和伪元素的区别,最关键的点在于如果没有伪元素(或伪类),是否需要添加元素才能达到目的,如果是则是伪元素,反之则是伪类。

作者:Jona
链接:https://juejin.im/post/5e67545cf265da5709703234
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18136.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18136.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/18136.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定