专栏首页gojam技术备忘录Pseudo elements伪元素与Pseudo classes伪类

Pseudo elements伪元素与Pseudo classes伪类

伪类和伪元素用于css选择器,利用他们使css更灵活。

常见的伪元素

::after

::after用于描述处于css渲染层的一个伪元素,相当于选中元素的最后一个子元素,但这个元素与DOM节点无关,位于选择的元素之后,伪元素的内容用content属性描述。

::before

与after相对应,相当于被选中元素的第一个子元素。

::selection

将用户选择的内容作为伪元素。

::first-letter

选中第一个字符作为伪元素。但只能用于块级元素,并且第一个字符前不能有图片或内联表格。

::first-line

选中第一行作为伪元素,只能用于块级元素(行内元素也用不着这个说法...)。

常见的伪类

伪元素与伪类的区别

伪元素将元素的某些部分作为元素选中(但不选中真正的元素),而伪类对应选择的元素的特殊状态(选择真正的元素)。

w3c的定义是,伪类用于向某些选择器添加特殊的效果(选择器已选中元素),伪元素用于将特殊效果添加到选择器(通过伪元素才能确定选中元素)。

更直观的理解是,伪元素达到的效果必须通过添加真实的元素替代,而伪类达到的效果必须通过添加真实的类替代。

:hover

鼠标悬停于某一元素时生效。

:active

通常用于<a>和<button>,对应鼠标按下时的状态。

匹配未访问过的链接,要求具有href属性的<a><area><link>元素。

:focus

被聚焦的状态,通常用于<input>元素。

:first-child

选择一组兄弟元素中的第一个元素。

:first-of-type

选择一组兄弟元素中的第一个指定类型的元素(可以不是第一个元素)。

:root

匹配文档树的根元素,在HTML文档中匹配html元素

更多伪类

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS一个div内两个子元素的高度自适应

    3-1-2019更新:使用flex布局,align-items:flex-start即可。

    gojam
  • BFC笔记?

    BFC(Block Formatting Context,块格式化上下文)指的是CSS布局的一块独立渲染区域。这块区域内只有Block-level box参与布...

    gojam
  • 子元素margin-top转移到父元素

    如果子元素设置了margin-top/bottom,且父元素没有触发hasLayout,那么子元素的margin就可能转移到父元素。具体表现如下图(父元素虽然设...

    gojam
  • 如何使用python进行web抓取?

    本文摘要自Web Scraping with Python – 2015 书籍下载地址:https://bitbucket.org/xurongzhong/py...

    CDA数据分析师
  • 我不知道你知不知道我知道的伪元素小技巧

    伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?

    sunseekers
  • JavaWeb(八)JQuery

    jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系...

    二十三年蝉
  • css选择器

    下面是一张取自w3cschool的css选择器表 链接地址:http://www.w3school.com.cn/cssref/css_selectors.as...

    lonelydawn
  • CSS选择器的详细介绍

    python鱼霸霸
  • 全栈第一步-CSS基础前言CSS基础总结

    作为一名后端狗,也有一个全栈梦。前端工程师第一步,CSS的基础得打好。本文仅用于记录上周学习CSS的过程,文中对于CSS知识点可能存在理解错误之处。

    LNAmp
  • (2019)[前端]面试题[1]:小知识点大集合

    答:不区分,(HTML, CSS都不区分,但为了更好的可读性和团队协作,一般都小写,而在XHTML 中元素名称和属性是必须小写的。)

    无道

扫码关注云+社区

领取腾讯云代金券