CSS伪类和伪元素

来源：互联网发布：中山淘宝电商培训机构编辑：程序博客网时间：2024/05/16 08:57

从字义上来看都是伪的，假的，不存在的类和元素。看下，其w3c定义，如下

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

首先这2个都和选择器有关，用于”特殊“的效果。需要注意下的伪类是一个冒号：，为元素是两个：：，虽然一个冒号也认，严格点应该是2个冒号。

伪类：a标签有：a：link，a：visited，a：hover，a：active。还有input：focus，input：disabled，ul：first-child，q：lang等

还有一些特殊的如：first-child、last-child、nth-first-child(n)、nth-last-child(n)，n从1开始表示第一个元素，n的值还可能是odd和even。

还有nth-of-type(n)和nth-last-of-typle(n)。选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

伪元素：::first-line,::first-letter,::before,::after;好像只有这四个，

重点说明下before和after这2个伪元素，这2个元素主要是用来在标签前面或者后面添加内容，可以用来清除浮动或者添加图片，阴影什么的。因为是添加内容，所以需要在写样式时使用content，必须使用，如果没有内容可用""来替换。

伪元素还比较好理解些，写了一段关于before和after的示例，关于曲线阴影的。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>曲线阴影</title><style>*{margin: 0;padding: 0;}h1{text-align: center;}.wrap{position: relative;width: 500px;height: 200px;line-height: 200px;margin: 50px auto;border: 1px solid #ccc;background-color: #fff;box-shadow: 0 0 2px rgba(0,0,0,0.5),0 0 40px rgba(0,0,0,0.2) inset;}.wrap::before,.wrap::after{content: "";z-index: -1;position: absolute;top:50%;left: 20px;right:20px;bottom:0px;background-color: transparent;border-radius: 100px / 10px;box-shadow: 0 0 40px rgba(0,0,0,0.5);}</style></head><body><div class="wrap"><h1>盒子底边有一段曲线阴影</h1></div></body></html>

0 0