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常用属性初总结:伪元素和伪元素的更多相关文章
- css常用属性初总结:font
平时在做项目时,UX常说的一句话就是“这里的字体不对吧,字体大小也不太对,你们前端有没有按规范来”,今天,我们就一起来看看这折磨人的font属性. 字体属性font-family 允许值 系列名 初始 ...
- css常用属性初总结第一弹:id和class选择器
前言:这是我第二次写博客,记录自己所学的点点滴滴,希望大家一起共勉! 说到选择器大家都不陌生,估计用的最多的还是id选择器和类选择器,至于其他的选择器,今天在这里我避而不谈. 类选择器:将html元素 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- css常用属性2
1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动 ...
- css常用属性1
1 背景相关 背景颜色 background-color = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...
- CSS常用属性-xy
一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- css常用属性总结第二弹:id选择器
承接上一篇class选择器,这一篇我们来说说css的id选择器. id选择器类似于类选择器,不过也有一些重要的差别,首先,id选择器前面有一个#号----称它为棋牌号吧,class为点号,用法就和cl ...
随机推荐
- HDU 5186 zhx's submissions 模拟,细节 难度:1
http://acm.hdu.edu.cn/showproblem.php?pid=5186 题意是分别对每一位做b进制加法,但是不要进位 模拟,注意:1 去掉前置0 2 当结果为0时输出0,而不是全 ...
- 抽象工厂 C++实现
抽象工厂(Abstract Factory) 抽象工厂是为了提供一系列相关或相互依赖对象的接口.对象创建型模式的一种. 客户Client 抽象工厂接口AbstractFactory 抽象工厂的实现类C ...
- 启动tornado项目,hello world
新建一个env虚拟环境 mkvirtualenv toenv 在虚拟环境中安装tornado workon toenv pip install tornado 在D盘中新建tornado项目文件夹,就 ...
- 64位的ubuntu14.04 LTS安装 Linux交叉编译工具链及32位“ia32-libs”依赖库
ubuntu又迎来了其新一代的长期支持版本 14.04 LTS,其带来了许多令人期待的新特新,遂决定进行升级. 装好了64位版本及安装 Linux交叉编译工具链 运行GCC,${CROSS_COMPI ...
- Python学习思维导图
刚学习Python时,边学边总结的,采用思维导图的形式, 适合回顾使用.内容参考<Python:从入门到实践>一书. 再给出一张Datacamp网站上的一张关于Python基础的总结 ...
- PHP 中的文本截取分析之效率
PHP 中的文本截取分析之效率 在使用 ThinkPHP 或 Laravel 时都会有用到文本截取的帮助函数. 分别是 msubstr (ThinkPHP 3,ThinkPHP 5 没找到) mb_s ...
- bzoj2004公交线路
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2004 好美妙的矩阵乘. 思考: 0.在一个序列上.所以考虑dp. 1.p<=10,k& ...
- Androoid studio 2.3 AAPT err(Facade for 596378712): \\?\C:\Users\中文文件夹\.android\build-cache
错误如下: Error:Some file crunching failed, see logs for details Error:Execution failed for task ':app:m ...
- tomcat 注冊成操作系統服務
nginx注冊成服務1.把srvany.exe和instsrv.exe拷貝到nginx安裝路徑下面.2.執行命令Command代碼instsrv Nginx D:\nginx\srvany.exe3. ...
- /etc/sysctl.conf参数解释(转)
来自<深入理解Nginx模块开发与架构解析> P9 #表示进程(例如一个worker进程)可能同时打开的最大句柄数,直接限制最大并发连接数fs.file max = 999999 #1代表 ...