css常用属性初总结:伪元素和伪元素

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

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

伪类和伪元素的理解：

官方解释：

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

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

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

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

常见应用:
伪类：
1.a链接样式 <a href="#">点击链接</a> a:hover{color:red} 鼠标悬浮字体变红。

2.隔行变色 <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul> 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常用属性初总结:伪元素和伪元素相关推荐

Html中CSS常用属性
Html中CSS常用属性一.注释在style标签中注释的书写使用"/* 注释内容 */",而不是. 二.文字属性用于对文字进行修饰的属性 ...
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
CSS入门（CSS常用属性----字体、对齐方式、display属性、浮动）
CSS常用属性设置 3.字体设置字体 font-family ①当font-family的属性值包含空格或特殊字符时,需要将font-family的属性值用引号括起来. ②font-family有& ...
从零开始学前端 - 5. CSS常用属性
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
CSS常用属性之display属性（六）
display属性在日常使用中会经常用到,但是它的一些特点及作用可能有很多小伙伴都不太清楚,接下来就让我来详细介绍一下吧. CSS display属性 1.display 属性的作用 2.元素外部显示 ...
第四次网页前端培训（CSS常用属性与盒子模型）
CSS常用属性背景 <head><meta charset="utf-8"><title>常用属性设置</title><st ...
2021-11-15 入门前端VScode必装的常用插件, HTML+CSS常用属性速记.
Html + Css 学习一.VSCode常用 //1. VScode常用快捷键 * 新建文件:ctrl + N * 切换自动换行:alt + Z * 复制当前行:ctrl + C:ctrl + V ...
CSS常用属性之文本属性（四）
CSS常用文本属性主要有:text-decoration.text-indent.line-height.font.text-align.word-spacing.letter-spacing等等.. ...
5中div标签有没有url属性_[网页编程]-03 CSS 常用属性
字体处理常用属性 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...

css常用属性初总结:伪元素和伪元素

css常用属性初总结:伪元素和伪元素相关推荐

最新文章

热门文章