伪类和伪元素的异同
相同点:
- 伪类和伪元素存在的意义都是为了操作一些通过普通的CSS选择器无法直接取到的节点。它们都相当于CSS选择器的一种扩展。
- 在 CSS2 之前,伪类和伪元素的语法相同。
selector.class:pseudo-element {property:value;}
不同点
- 伪类是通过一个抽象的类名(伪类名)捕获不存在的或者普通CSS选择器无法捕获到的信息。
伪元素是通过一个抽象的元素名(伪元素名)创建一个原本不存在的抽象元素。开发者可以通过操作这个抽象元素来达到影响其他元素的目的。 - 在 CSS3 中,伪类的语法使用单冒号指定伪类名。
selector.class:pseudo-element {property:value;}
伪元素的语法使用双冒号指定伪元素名。selector.class::pseudo-element {property:value;}
常用的伪类(更多请查看官方文档)
- :link 未访问的节点,通常用于 a 标签
- :visited 已访问的节点,通常用于 a 标签
- :hover 鼠标悬浮的节点
- :active 当前选中的节点
- :first-child 第一个子节点
- :last-child 最后一个子节点
- :enabled 启用的元素,通常用于表单
- :focus 当前取的焦点的元素
- :checked 选中的元素,通常用于表单 checkbox 元素
- :disabled 未启用的元素,通常用于表单
<style>
/*未访问的 a 标签*/
a:link {
background-color: red;
}
/*已访问的 a 标签*/
a:visited {
background-color: yellow;
}
/*鼠标悬浮的 a 标签 -- 需放置于 link 和 visited 之后*/
a:hover {
background-color: green;
}
/*当前选中的 a 标签 -- 需要放置于上面三种状态之后*/
a:active {
background-color: purple;
}
/* class 为 demo 的类下的第一个 div 子节点下的第一个 p 节点*/
.demo div:first-child p:first-child {
background-color: aqua;
color: blue;
font-size: 5px;
}
/* class 为 demo 的类下的第一个 div 子节点下的最后一个 p节点*/
.demo div:first-child p:last-child {
color: cornflowerblue;
font-size: 30px;
}
</style>
<div>
<a href='#' target="_blank">点击此处超链接1</a>
<a href='/demo01' target="_blank">点击此处超链接2</a>
<a href='/demo02' target="_blank">点击此处超链接3</a>
<a href='/demo03' target="_blank">点击此处超链接4</a>
</div>
<hr>
<div class="demo">
<div>
<p>第一个 p 节点</p>
<p>第二个 p 节点</p>
<p>第三个 p 节点</p>
<p>第四个 p 节点</p>
</div>
</div>
常用伪元素
- ::before 元素内容前插入新内容
- ::after元素内容之后插入新内容
- ::first-letter 文本首字母。常用于对文本首字母设置样式
- ::first-line 文本首行。常用于对文本首行设置样式。仅用于块级元素。
- ::selection 选中的内容。常用于文本。
- ::placeholder 占位符。用于设置占位符的样式。
<style>
p {
width: 960px;
text-indent: 2em;
}
/*p 标签第一个字放大*/
p::first-letter {
font-size: 40px;
}
/*p 标签首行变色*/
p::first-line {
color: lightcoral;
}
/*p 标签选中变色*/
p::selection {
background-color: #360;
}
/*p 标签后面追加文本。*/
/*这里可以插入的内容很多:图标icon、文本、css样式 ……*/
p::after {
content: 'From 文学网'
}
</style>
<div>
<p>
有一段青春,留作永恒。剪一段时光,放在最美的段落。好好保存留作永远,时间过去岁月的路过。
只是多了一道曾经,流年一路改变了我们的模样。送走了我们的青春,留给了我们曾经。
这样的夜别样的心情,倒影的年华。深夜想用文字表达我内心的段落,可是终究写不出整个心情。
背着这些流年在岁月里流浪,终究没有安静的场所。来安放我这沉淀的一切,似乎不能放也不能放。
因为只有装进心里,才最为合适。也没有地方比装进心里,更安全。就这样让这段流年,从此埋在心里。
不再提起,让时间的尽头。留作无声的永恒。
</p>
</div>
::after 和 ::before 的实例
这两个伪元素经常被用来合并组合 CSS 样式。
例如:气泡对话框、Icon 小图标等
<style>
.tip {
width: 200px;
height: 100px;
background: rgb(26, 26, 179);
border-radius: 20px;
position: relative
}
.tip:after {
content: "因为我们追加的图形整体旋转了90°。所以追加的文本也会旋转";
width: 70px;
height: 30px;
border: 0 solid transparent;
border-bottom: 30px solid rgb(26, 26, 179);
border-radius: 0 0 0 230px;
margin-top: 20px;
position: absolute;
top: 50px;
left: 20px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
</style>
<div>
<div class="tip"></div>
</div>