CSS3 怎么分清伪元素和伪类。举例子

上周我的朋友正在做一个网页设计项目，他遇到了一个问题。
他想使用 CSS 将段落中的第一个单词涂成红色，但他不想使用伪类。

2 02 3 年，我建议他使用类名来达到这个效果。
代码如下：
<风格> .第一个字母{ 颜色: 红色; } </风格>

我 是斯蒂芬·李。


我的朋友尝试了一下，效果非常好。
然后他问我如何在不使用伪元素的情况下为段落的第一个字母添加红色。

我告诉他可以使用类似的方法在第一个字母上添加一个span标签，然后定义这个span的样式。
代码如下：
<风格> .第一个字母{ 颜色: 红色; } </风格>

我 是斯蒂芬·李。


朋友听了我的建议，觉得很有道理。
他说，以前他总是把伪类和伪元素混为一谈，现在他明白了，伪类的效果可以通过添加一个实际的类来实现，而伪元素的效果则必须通过添加一个实际的元素来实现。

我笑着说，其实，虽然现在大多数浏览器都使用单个冒号来表示伪类和伪元素，但是我们还是应该区分两者，养成良好的习惯。

css3新增的属性有哪些

说实话，CSS3 的新属性确实很有趣，而且使用时可以省去很多麻烦。
刚接触它的时候，我不得不考虑RGBA和透明度的问题。

我们先来说说RGBA。
这个东西绝对是前端老手必备的技能。
上次我为一个项目转换为深色模式时，我直接使用RGBA来处理透明度过渡。
且不说代码量少，效果如丝般顺滑。
我记得调试的时候，alpha值0.5 和0.5 1 的差别还是挺明显的。
0.5 1 明显更亮。
你必须注意这个细节。
有一个小提示。
使用RGBA时，要注意兼容性。
IE1 0及以上版本仍然可以接受，但更早的版本可能要恢复到旧的写法。

背景属性是最常用的组。
背景大小属性多次救了我。
我记得有一次我对横幅图像进行了响​​应式改编。
我用cover和contain反复调试了两个小时。
最后，我发现封面会以最大比例填充图像，而包含会保持原始比例。
这取决于需求。
背景起源甚至更好。
我曾经遇到过一个案例，我正在制作浮层效果，如果我不使用它，它几乎崩溃。
设置为border-box后，定位就准确多了。

我经常忘记写word-wrap属性，但当遇到长网址溢出问题时我就后悔了。
有一个使用WordPress的客户网站，文章中的URL经常太长。
添加break-word就可以立即解决问题，简单粗暴。
不过请注意，很多新浏览器也可以直接使用overflow-wrap来达到效果，大家可以多尝试一下。

text-shadow绝对是一个强大的炫耀工具。
刚学的时候我把文字阴影做成了5 px，但是用户反映看起来像像素风格的游戏字体，所以我把它改成了1 px，让它更和谐。
不记得参数的顺序。
对于水平和垂直模糊距离颜色，我总是首先把颜色放在第一位。
调试了半天，发现是顺序问题。
有一个很酷的操作，利用多层阴影打造立体效果，效果非常高端。

Font-face对于我来说是最麻烦的属性，但是用多了之后感觉就简单了。
我记得第一次定义自己的字体并寻找字体文件。
后来发现OTF和TTF都可以转换为WOFF格式，兼容性更好。
一个陷阱是 @font-face 应该放在 CSS 的前面。
我有一个项目被这个欺骗了。
背景图片和字体同时加载，用户在等待中疲惫不堪。

现在写border-radius的缩写，border-radius: 1 0px，把四个角固定在一行，省事。
但请注意，早期的浏览器不支持缩写。
比如IE9 以下，还是要单独写。
我有一个用百分比写的旧项目。
兼容性测试发现老版本浏览器直接显示方块，让人哭笑不得。

border-image 最考验你的耐心，尤其是带有一堆前缀的。
我调整了一个H5 活动页面，使用border-image作为装饰边框。
结果是Android 4 的屏幕。
记住，border-image-slice属性很关键，否则图像可能只显示边框部分。

box-shadow属性现在被广泛使用，对于制作毛玻璃效果至关重要。
我有一个案例，我使用了1 0px的阴影来营造深度感，但我发现移动版消耗了很多性能，所以我把它改为3 px才变得更平滑。
不忘记混合参数的顺序，x 偏移 y 偏移模糊半径颜色。
一个小问题是，inset 值会在元素内部产生阴影，适合发光效果。

最后我们来谈谈媒体查询，这绝对是响应式设计的核心。
我调整过无数响应式网站，最烦人的就是反复调整断点位置。
记得使用Chrome DevTools的设备模式来测试，这比使用真机容易多了。
一个技巧是编写最小宽度和最大宽度的组合，以防止小屏幕手机显示不必要的元素。
有一个案例，利用媒体查询隐藏手机上的侧边栏，替换为汉堡菜单，立马提升了用户体验。

如果你多使用这些属性，你会发现你写CSS的速度越来越快，但是调试bug的时间也会增加。
技术就是这样，必须不断踩坑才能进步。