CSS 基础 例子 伪元素和伪类 & 区别
一、概念
CSS
伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果CSS
伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到效果
伪类种类
伪元素种类
二、基本例子
伪类:
p>i:first-child {color;red}
p下边的第一个子元素的颜色为红色
<p>
<i>first</i>
<i>second</i>
</p>
要达到同等效果,可以这么实现:
.first-child {color;red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>
即,通过设置class来实现
伪元素:
p:first-letter {color: red}
p元素的中文本的第一个字母,颜色为红色
<p>I am stephen lee.</p>
即字母I为红色
要达到同样效果,要讲字母I放在一个元素span中,再给span设置样式
.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>
区别:伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。
三、其他例子
伪元素
1、向h1元素之前添加图片
h1:before
{
content:url(smiley.gif);
}
2、向h1元素之后添加图片
h1:after
{
content:url(smiley.gif);
}
3、为元素和css类结合
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
即,样式为article的p元素中的第一个字母的样式
伪类:
1、a伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
2、伪类和 css类
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
样式类为red的a元素已经访问的样式
3、伪类和组合选择器
p:first-child i { color:blue; }
p元素下的第一个元素里边的所有i元素的样式
CSS 基础 例子 伪元素和伪类 & 区别的更多相关文章
- CSS的伪元素和伪类
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-l ...
- CSS伪元素与伪类的区别
伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...
- CSS3伪类和伪元素的特性和区别尤其是 ::after和::before
伪类和伪元素的理解 官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“ ...
- css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
- css基础--深入理解opacity和rgba的区别
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- CSS基础知识(颜色、伪类、盒子模型)
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
- CSS(二)- 选择器 - 伪元素和伪类(思维导图)
伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...
- CSS——伪元素与伪类
伪类与伪元素 伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :vi ...
随机推荐
- Nginx 的 docker 部署
1.输入命令 docker pull nginx:1.15 拉取 nginx 的镜像: 2.使用 docker images 查看拉取到的镜像信息: 3.在主机上创建用于映射的目录 mkdir -p ...
- Android.Tools.Ant
ant 1. ant手册翻译 ant手册翻译是一项大工程!!!!!! ant在线手册的链接好不明确. 2. ant 支持for循环 安装ant-contrib Ref[1.1]. 要在ant的buil ...
- python 找出一篇文章中出现次数最多的10个单词
#!/usr/bin/python #Filename: readlinepy.py import sys,re urldir=r"C:\python27\a.txt" disto ...
- HDU 3861.The King’s Problem 强联通分量+最小路径覆盖
The King’s Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Laravel 5.5 + Vue 开发单页应用
上次我用 laravel5.3 + Vue 开发了一个简单的单页应用,这次我打算将其升级到 laravel5.5,在升级的过程中,做一下记录,其源码放在 github 上面,源码地址 开发环境 软 ...
- About the Cron Expression
About the Cron Expression Cron is use in Linux for the time schedule Format Seconds Minutes Hours Da ...
- Python之路(第二十二篇) 面向对象初级:概念、类属性
一.面向对象概念 1. "面向对象(OOP)"是什么? 简单点说,“面向对象”是一种编程范式,而编程范式是按照不同的编程特点总结出来的编程方式.俗话说,条条大路通罗马,也就说我们使 ...
- 获取input输入框中的值的方法
方法一:获取input的文本值 <input class="form-text-normal" id="txtName" name="Name& ...
- centOS 6.5下升级mysql,从5.1升级到5.6
转载:https://www.cnblogs.com/vickygu2007/p/5066409.html #mysqldump -uroot -p --all-databases > data ...
- windows mysql绿色版配置
MySQL绿色版安装 1.下载地址 https://dev.mysql.com/downloads/mysql/ 2.配置my.ini 文件 解压下载文件到指定目录.如: my.ini文件内容: [m ...