61、CSS选择器及其优先级（伪元素、伪类选择器）

最新推荐文章于 2024-07-09 09:31:31 发布

C.&H.

最新推荐文章于 2024-07-09 09:31:31 发布

阅读量2.5k

点赞数 2

分类专栏：前端面试题目

本文链接：https://blog.csdn.net/sunnnnh/article/details/118001149

版权

前端面试题目专栏收录该内容

136 篇文章 41 订阅

订阅专栏

1. CSS选择器

选择器	格式	优先级权重
id选择器	#id	100
类选择器	.classname	10
属性选择器	a[ref=“eee”]	10
伪类选择器	li:last-child 或 a:hover	10
标签选择器	div	1
伪元素选择器	li::after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

2、选择器的优先级权重

内联样式：1000
id 选择器：100
类选择器、伪类选择器、属性选择器：10
标签选择器、伪元素选择器：1

注意事项：

!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

3、伪类与伪元素选择器的区别

1）伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。

例如·：在p标签前后添加了两个伪元素，不在文档生成，只在外部显示可见

<style>
  p::before {content:"第一章：";}  /* 在p标签前面添加伪元素。内容为：第一章 */
  p::after {content:"Hot!"; color: red;} /* 在p标签后面添加伪元素。 */
</style>
</head>
<body>
    <p>伪元素</p>
</body>

2）伪类：将特殊的效果添加到特定选择器上。它是在已有元素上添加类别，不会产生新的元素。

例如：为a标签添加伪类，当鼠标放到a标签，a标签中的字体变红。

  a:hover{
      color: red; /* 为a标签添加伪类。 */
  } 
</style>
</head>
<body>
    <a href="#">伪类</a>
</body>

3）区别：

伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素的本质区别就是是否抽象创造了新元素（伪元素抽象创建了新元素）。
伪类的效果可以通过添加实际的类来实现；伪元素的效果可以通过添加实际的元素来实现

C.&H.

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录