笔记|使用CSS选择器(使用伪元素选择器)

简介: 使用CSS选择器(使用伪元素选择器)

1、伪元素选择器

伪元素选择器(pseudo- selector):提供更复杂的功能,但并非直接对应html文档定义的元素。


  • 伪元素
  • 伪类


⚠️伪元素实际上并不存在


1.1、使用::first-line 伪元素选择器

匹配文本块的首行。

image.png


<style type="text/css">
::first-line {
background-color:grey;
color:white;
}
</style>

 

伪元素选择器可以作为修饰符跟其他选择器一起使用。如:p::first- line


⚠️伪元素选择器的前缀是两个冒号,但浏览器认为选择器只有一个冒号。


如果浏览器窗口调整大小,浏览器会重新评估哪些内容属于文档的首行。


1.2、使用::first -letter 选择器

选择文本块的首字母。

image.png


<style type="text/css">
::first-letter {
background-color:grey;
color:white;
border: thin black solid;
padding: 4px;
}
</style>


1.3、使用:before 和 :after 选择器

它们会生成内容,并将其插入文档。

image.png


<style type="text/css">
a:before {
content: "Click here to "
}
a:after {
content: "!"
}
</style>   
选择a元素对它使用:before 和:after伪元素选择器。通过设置content属性的值可以指定要插入的内容。


⚠️content只能与伪选择器一起使用。


1.4、使用CSS计数器

:before 和 :after 选择器经常跟CSS计数器特性一起使用,结合两者可生成数值内容。


<style type="text/css">
body {
counter-reset: paracount;
}
p:before {
content: counter(paracount) ". ";
counter-increment: paracount;
}
</style>


couter- reset属性为计数器设置名称。


  • 可设置初始值如:counter- reset:paracount 10;
  • 定义多个计数器,只要在同一条counter- reset声明中添加计数器名称即可,如:counter-reset: paracount 10 othercounter; /*othercounter值为1*/
  • 计数器初始化后就能够作为content属性的值,跟:before和:after选择器一起使用来指定样式,如:content: counter(paracount) ". ";before的选择器中,其效果是将当前计数器的值呈现在选择器匹配的所有元素之前,此处,还要在相应的值后面追加一个句点和空格。
  • 计数器的值默认表示为十进制整数(1、2、3等),不过,也可以指定其他数值格式,如:content: counter(paracount, lower-alpha) ". ";添加了参数lower-alpha,其功能是指定数值样式
  • counter-increment属性专门用来设置计数器增量,该属性的值是要增加计数的计数器的名称,如:counter-increment: paracount;计数器默认增量为1,当然也可以自行指定其他增    量,如:counter-increment: paracount 2;

 

目录
相关文章
|
3月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
47 1
|
3月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
50 1
|
1月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
42 2
|
3月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
97 1
|
2月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
22 0
|
3月前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
4月前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
33 1
|
4月前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
4月前
|
前端开发
解锁CSS神秘面纱:深度剖析类选择器,掌握前端设计的绝密武器!
解锁CSS神秘面纱:深度剖析类选择器,掌握前端设计的绝密武器!