2020-03-23 18:47发布
这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。
:first-child
:first-letter
p>i:first-child {color: red}firstsecond
firstsecond
//伪类 :first-child 添加样式到第一个子元素如果我们不使用伪类，而希望达到上述效果，可以这样做：
.first-child {color: red}firstsecond
即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：
p:first-letter {color: red}I am stephen lee.
I am stephen lee.
//伪元素 :first-letter 添加样式到第一个字母那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？
.first-letter {color: red}I am stephen lee.
即我们给第一个字母添加一个 span，然后给 span 增加样式。两者的区别已经出来了。那就是：
span
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
css3
:Pseudo-classes ::Pseudo-elements
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 雨陵西 的问题《伪类与伪元素有什么区别？》','http://www.shouhuola.com/answer/640/2833.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
伪类种类
伪元素种类
区别
这里用伪类
:first-child和伪元素:first-letter来进行比较。p>i:first-child {color: red}
firstsecond
:first-child添加样式到第一个子元素如果我们不使用伪类，而希望达到上述效果，可以这样做：
.first-child {color: red}
firstsecond
即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：
p:first-letter {color: red}
I am stephen lee.
:first-letter添加样式到第一个字母那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？
.first-letter {color: red}
I am stephen lee.
即我们给第一个字母添加一个
span，然后给span增加样式。两者的区别已经出来了。那就是：
总结
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上
css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者
一周热门 更多>