CSS3 伪类和伪元素

伪类
- 静态伪类
- 动态伪类
伪元素

伪类

元素在不同状态表现不同样式，如点击a标签文本变红，放开变紫

静态伪类

只能用于超链接，用得少

:link 超链接未点击前的样式
:visited 超链接点击之后的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS3静态伪类</title><style type="text/css">a:link{color: aqua;}a:visited{color: yellow;}</style>
</head>
<body><a href="####">静态伪类</a>
</body>
</html>

动态伪类

能用于任何元素

:hover 鼠标放到元素上的状态，最常用的状态
:active 鼠标点击元素时没有松开鼠标的状态，用得不多
:focus 输入框在获得焦点时的状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态伪类</title><style type="text/css">div:hover{color: red; font-size: 30px;}div:active{color: yellow;}input:focus{color: green;}</style>
</head>
<body><div>动态伪类</div><input type="text" value="请输入">
</body>
</html>

伪元素

在文档结构中没有出现的元素，使用双冒号：：

::first-letter 选择的是元素第一个字符
::first-line 选择的是元素中的第一行字符，会根据浏览器缩放自动跳整
::before 在元素内容之前添加新内容，必须配合content使用
::after 在元素内容之后添加新内容，必须配合content使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪元素</title><style type="text/css">/* div::first-letter{color: red;} *//* div::first-line{color: red;} */div::before{content: "我很霸道，我要插队！！！";}div::after{content: "我排在最后！！！"; color: red;}</style>
</head>
<body><div>伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素伪元素</div>
</body>
</html>

CSS3 伪类和伪元素相关推荐

CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
css3伪类和伪元素基本使用
一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:target,:not(),:focus. 常见伪元素--::first-let ...
css3和css伪类和伪元素区别与兼容性
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素. 伪元素由双冒号和伪元素名称组成.双冒号是在当前规范中引入的,用于区分伪类和伪元素.但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比 ...
CSS3伪类和伪元素
1.伪类 CSS3给出的定义是: 伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息. 通过上面的概念我们知道了伪类的功能有两种: 1.格式化DOM树以外的 ...
【响应式Web前端设计】CSS3伪类与伪元素的区别
首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 CSS中伪类与伪元素的概念是很容易混淆的,今天就来谈谈伪类与伪元素之间的区别伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效 ...
详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
CSS之 :before :after的用法，伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
伪类、伪元素、锚伪类
伪类 CSS2中对伪类的定义是:CSS 伪类用于向某些选择器添加特殊的效果. 截止css2,伪类有以下几种: CSS3中对伪类的定义如下: 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信 ...

CSS3 伪类和伪元素

CSS3 伪类和伪元素

伪类

静态伪类

动态伪类

伪元素

CSS3 伪类和伪元素相关推荐

最新文章

热门文章