css常用属性伪元素和伪元素的总结

前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧。

其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究竟什么是伪类?什么是伪元素?

伪类和伪元素的理解:

官方解释:

伪类一开始只是用来表示一些元素的动态状态,典型的就是大家常用的链接的各个状态(link、active、hover、visited),随后css2标准
扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无标识的“幽灵”分类。

立即学习“前端免费学习笔记(深入)”;

伪元素则代表了某个元素的的子元素,这个子元素虽然逻辑上存在,但是并不实际上存在于文档树中,如我们平时用的after、before等。

自己粗浅的理解就是伪类就是一个无须标识的类,伪元素则就是一个元素,只是不存在与文档树中。

关于用法:伪类前面是一个冒号,伪元素前面则是两个冒号。E:first-child伪类,E::first-line伪元素。这是最新的css3标准,但是css2中
关于after和before都使用一个冒号,这里就需要大家注意了。而且css3还扩展了不少伪类,这里就不提了,感兴趣的自己可以去查资料。

常见应用:
伪类:
1.a链接样式 点击链接 a:hover{color:red} 鼠标悬浮字体变红。

2.隔行变色

1234 ul li:nth-child(even){background-color:#ccc}或者ul li:nth-chilid(2):{background-clolor:#ccc}

伪元素:
清理浮动:
.clear{zoom:1}
.clear:after{display:block;content:”;clear:both;}

关于伪类和伪元素,就讲到这里,有关伪类和伪元素,能做出很多有意思的效果。

更多css常用属性伪元素和伪元素的总结相关文章请关注PHP中文网!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1607631.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 20:58:36
下一篇 2025年12月8日 01:37:01

相关推荐

  • 浅谈CSS浮动的方法介绍

    元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。   立即学习“前端免费学习笔记(深入)”; 正文 浮动是一种半脱离文档流的状态,他不像绝…

    2025年12月23日 好文分享
    000
  • 整理的最全的css clearfix清除浮动的方法

    css中经常使用clearfix清除浮动,作者列出了几个clearfix的不同的使用方法进行对比,需要的朋友可以参考下css clearfix清除浮动的方法.(css为什么要清除浮动(float)? 清除浮动的原理是什么) 一,什么是.clearfix 你只要到Google或者Baidu随便一搜&#…

    好文分享 2025年12月23日
    000
  • CSS样式覆盖规则的详细介绍

    大家都知道css的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义。其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值,这个过程就叫“层叠”。样式覆盖(这种叫法更大众化些)遵循一定的规则,之前我对这个规则一直似懂非懂的,…

    好文分享 2025年12月23日
    000
  • 详细介绍CSS样式权值

    内联样式表(inline style)>内部样式表(internal style sheet)>外部样式表(external style sheet) 例外:但如果外部样式表放在内部样式表下边引用,则外部样式表>内部样式表; 1,内联样式表权值为1000; 2,ID选择器的权值为1…

    好文分享 2025年12月23日
    000
  • CSS实现三角效果的实例详解

    方法一:使用border来设置边框,元素有高度和宽度 .triangle { transform: rotate(45deg); display: block; width: 12px; height: 12px; border: 1px solid #9e9e9e; border-top-colo…

    2025年12月23日
    000
  • CSS之关于clearfix清除浮动方法

    一,什么是.clearfix 你只要到Google或者Baidu随便一搜”css清除浮动”,就会发现很多网站都讲到”盒子清除内部浮动时可以用到.clearfix”。 .clearfix:after { content: ” “; display: bl…

    好文分享 2025年12月23日
    000
  • css常用属性之颜色和单位

    在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚。 颜色 当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般常用英文颜色名或者十六进制颜色值来设置颜色,但是css中还有一些其他较为复杂的写法。 RGB颜色 计…

    好文分享 2025年12月23日
    000
  • css盒子边框样式介绍

    边框样式有全边框和单个边框样式,可对每条边设置不同的样式 如下代码P1为全边框样式,P2为单个边框设置不同的样式: css边框样式 #p1{ background: yellowgreen; border:4px dotted rebeccapurple; border-radius: 20px; …

    好文分享 2025年12月23日
    000
  • css文本样式及控制文本的大小写方法

    常用文本样式如下: text文本样式 h3{ /*text-indent:首行缩进*/ text-indent: -2em; padding-left:2em; /*text-shadow:必需。水平阴影的位置。允许负值。 必需。垂直阴影的位置。允许负值。 可选。模糊距离 可选。阴影颜色*/ tex…

    好文分享 2025年12月23日
    000
  • CSS重要属性之 margin 属性知识大合集介绍

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄。所以写成以下文章,一是供自己整理思路;二是把知识分享出来,避免各位对margin属性的误解。内容可能会有点多,但都是精华,希望大家耐心学习。 以下的分享会分为如下内容: 1.margin 属性的简单介…

    2025年12月23日 好文分享
    000
  • css 常用样式详细介绍

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:’宋体’,’黑体’,’Arial’; } font-size 设置字体大小 length 用长度值指定文字大小,不允许负值 立即学习“前端免费学习笔记(深入)”;…

    好文分享 2025年12月23日
    000
  • css核心基础的总结

    今日这篇是整合前面的css补充知识的。 我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下。 层叠样式表 层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里。 层叠可以简单地理解为冲突的解决方案。 立即学习“前端免费学习笔记(深入)”; 什么是冲突? 就是同个元素在使用不同的选…

    好文分享 2025年12月23日
    000
  • 最全的CSS hack方式一览(兼容多浏览器)

    为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方…

    2025年12月23日
    000
  • 浅谈css处理水平居中

    下面小编就为大家带来一篇浅谈css处理水平居中的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦 1、水平居中设置-行内元素 通过父元素设置 1 text-align:center; ,让父元素的内容居中 2、水平居中设置-定宽块状元素 块状元素的…

    好文分享 2025年12月23日
    000
  • 浅谈css和@import区别及用法详解

    下面小编就为大家带来一篇浅谈css和@import区别及用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法。 一、用法 (1)link: 立即学习“前端免费学习笔记(深入)”; (2)@import: 方法一(html中…

    好文分享 2025年12月23日
    000
  • 剖析CSS Position定位

           当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们。   一旦你更深入…

    2025年12月23日
    000
  • CSS的技巧

    有些经典的css技巧,我们还是需要记住的,这样可以节省我们大量的时间,下面零度就为大家推荐几个比较好的css技巧: 1、在不同页面上使用同样的导航代码 许多网页上都有导航菜单,当进入某页时,菜单上相应这一项就应该变灰,而其他页亮起来。一般要实现这个效果,需要写程序或专门为每一页做设计,现在靠CSS就…

    好文分享 2025年12月23日
    000
  • css中px、em和rem的区别

    前言 em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ,那么 1px 始终显示为完全 1px。 em 和 rem 的相同点 使用 em 和 r…

    好文分享 2025年12月23日
    000
  • rem — 低调的css单位

    rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么? rem(font size of the root element)是指相对于…

    2025年12月23日 好文分享
    000
  • 用CSS实现带箭头的流程进度条

    本文介绍的是利用纯css的带箭头流程进度条,兼容到ie8,需要的朋友们下面来一起学习学习。 首先写出一个基本的样式。 .cssNav li{ padding: 0px 20px; line-height: 40px; background: #50abe4; display: inline-bloc…

    2025年12月23日 好文分享
    000

发表回复

登录后才能评论
关注微信