前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS-伪类和伪元素

CSS-伪类和伪元素

作者头像
六个周
发布2022-10-28 11:53:17
1K0
发布2022-10-28 11:53:17
举报
文章被收录于专栏:六个周

背景

写了这么多年代码,对CSS中的伪类和伪元素竟然没有细致的进行过学习总结,由此可见在实际代码开发中,用的也确实不多,也就用过一些:first-child,:hover之类的吧,其它的连before什么的都没用过,于是迫切需要大于伪元素与伪类进行一个系统整体的学习。

伪类和伪元素

  • 伪类:是以一个冒号作为前缀,被添加到选择器的末尾,当你希望在特定状态下(:hover)才被呈现到指定元素时,可以往元素的选择器后面加上伪类。
  • 伪元素:用于创建一些不在文档树中的元素,并为其添加样式。比如::before是指得元素前添加文本,且为文本添加样式,虽然用户可以看到这些文本,但文本实际不在DOM结构中。

常用的伪类和伪元素

伪类可以从状态类伪类、结构类伪类、其它伪类和表单相关伪类进行分类。

  • 状态类伪类:** :hover、:link、:active、:visited、:focus**
  • 结构类伪类:** :first-child、:last-child、:nth-child(n)**
  • 其它伪类:   :fullscreen全屏显示、:lang()匹配指定语言
  • 表单相关伪类:  :checked选中、:disabled禁用、:required必填、:read-only只读

伪元素:::before、::after、::first-letter、::first-line、::selection、::placeholder

伪元素::berfore与::after的用法

在被选中元素的之前和之后插入内容,其中content属性指定要加入的内容,content必须有值(空值也可以),其默认伪inline,可以通过display:block改变. content属性:空值、字符串、url、attr、counter。

  • 空值可以清除浮动
代码语言:javascript
复制
.clearFix::after{
  clear:both,
    display:block;
  content:'',
    height:0;
  overflow:hidden
}

  • 字符串可以直接添加内容,不赘述。
  • url:引用媒体文件(比如图片)
  • attr:可以调用当前元素内的某个属性(比如a标签的href属性)
  • counter计数器:可以不使用列表元素实现序号功能。
代码语言:javascript
复制
<body>
<h1>Good Coder</h1>
<h2>Liu</h2>
<h2>Zhou</h2>
<h1>Bad Coder</h1>
<h2>Lazy</h2>
<h2>Not Attentioin</h2>
body{
  counter-reset:section
}  
h1{
  counter-reset:subsection
}
h1::before{
  counter-increment:section;
  content:counter(section)'\';
}
h2::before{
  counter-increment:subsection;
  content:counter(section)'.'counter(subsection);
}
</body>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-07-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 伪类和伪元素
  • 常用的伪类和伪元素
  • 伪元素::berfore与::after的用法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档