1 伪类
CSS 伪类结合选择器来基于状态对元素进行样式化，比如之前提到过的 :hover ，其实就是鼠标放在一个元素上时的元素状态。
1.1 使用
CSS 伪类其实就是使用 : 开头的一些属性，它们和选择器结合在一起使用，用来特指某些元素的某些状态或者更小范围的元素主体（比如 :first-letter 就是元素当中的第一个字母），格式如下：
selector : pseudo-class {
property : value ;
}
我已经把所有常用的选择器和伪类都做成了列表，这里就不再重复了；这一章节，我们也看到了伪类的基础使用，当时举的例子如下：
/* unvisited link */
a : link {
color : red ;
}
/* visited link */
a : visited {
color : blue ;
}
/* mouse over link */
a : hover {
color : yellow ;
}
/* selected link */
a : active {
color : black ;
}
实际的效果可以回看那一章节，下面主要介绍几个经常用的其他伪类。
1.2 焦点
:focus 选择具有焦点的元素，然后通过样式声明设置特征，比如下面的例子：
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > hello</ title >
< style >
input : focus {
background-color : yellow ;
}
</ style >
</ head >
< body >
< p > 点击文本输入框表单可以看到黄色背景:</ p >
< form >
First name: < input type = "text" name = "firstname" />< br >
Last name: < input type = "text" name = "lastname" />
</ form >
</ body >
</ html >
上面的代码，可以看到当输入框获得焦点之后背景就改变为黄色了，而失去焦点之后，这个样式就没有用了，输入框的背景会变回默认样式。
1.3 首字母选择器
:first-letter 将样式添加到所选择的首字母，这个伪类同样适合中文，可以看看下面的例子：
<! DOCTYPE html >
< html >
< head >
< style >
p : first-letter {
font-size : 200% ;
color : # 8A2BE2 ;
}
</ style >
</ head >
< body >
< p > www.google.com </ p >
< p > 这是个测试 </ p >
</ body >
</ html >
1.4 启用和禁用选择器
通过使用 :enabled 和 :disabled 可以选择已启用和已禁用的元素，然后通过样式声明添加特征，如下代码：
<! DOCTYPE html >
< html >
< head >
< style >
input : disabled {
background : grey ;
}
input : enabled {
background : wheat ;
}
</ style >
</ head >
< body >
< input type = " number " value = "" placeholder = " Please input number here " />
< button > enabled </ button >
< button > disabled </ button >
< script >
const btns = document . querySelectorAll ( ' button ' ) ;
for ( let b of btns ) {
b . onclick = e => {
const input = document . querySelector ( ' input ' ) ;
if ( e . target . innerHTML === ' disabled ' ) {
input . disabled = true ;
} else {
input . disabled = false ;
}
}
}
</ script >
</ body >
</ html >
启用状态
禁用状态
1.5 合法和非法选择器
:valid 和 :invalid 伪类可以用来通过判断当前元素内容是否满足元素制定的规则，来更改元素样式，如下：
<! DOCTYPE html >
< html >
< head >
< style >
input : valid {
color : green ;
}
input : invalid {
color : red ;
}
</ style >
</ head >
< body >
< input type = " email " value = " john.doe@example.com " />
< button > enabled </ button >
< button > disabled </ button >
</ body >
</ html >
合法，字体为绿色
非法，因为不是邮件地址，字体为红色
如上我们可以看到，合理的使用伪类，可以大幅度地减少JavaScript 的代码，而且因为减少了JS 的条件判断，整体的反应速度和效率也会更高。
2 圆角
因为现代设计理念和UI美学的进步，我们可以发现锋利的直角越来越少用到了，这就要求边框、背景乃至图片有圆角的出现，CSS 3 于是增加了圆角属性，它就是 border-radius 。
下面是个例子：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# rcorners1 {
border-radius : 25px ;
background : # 8AC007 ;
padding : 20px ;
width : 200px ;
height : 150px ;
}
# rcorners2 {
border-radius : 25px ;
border : 2px solid # 8AC007 ;
padding : 20px ;
width : 200px ;
height : 150px ;
}
# rcorners3 {
border-radius : 25px ;
background : url ( paper.gif );
background-position : left top ;
background-repeat : repeat ;
padding : 20px ;
width : 200px ;
height : 150px ;
}
</ style >
</ head >
< body >
< p > border-radius 属性允许向元素添加圆角 </ p >
< p > 指定背景颜色元素的圆角： </ p >
< p id = " rcorners1 " > 圆角 </ p >
< p > 指定边框元素的圆角： </ p >
< p id = " rcorners2 " > 圆角 </ p >
< p > 指定背景图片元素的圆角： </ p >
< p id = " rcorners3 " > 圆角 </ p >
</ body >
</ html >
2.1 指定每个圆角
如果在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
也可以在四个角上一一指定，使用以下规则：
四个值 ：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
三个值 ：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值 ：第一个值为左上角与右下角，第二个值为右上角与左下角
一个值 ：四个圆角值相同
下面是分别设置4个值、3个值和2个值的例子：
<!DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# rcorners4 {
border-radius : 15px 50px 30px 5px ;
background : # 8AC007 ;
padding : 20px ;
width : 200px ;
height : 150px ;
}
# rcorners5 {
border-radius : 15px 50px 30px ;
background : # 8AC007 ;
padding : 20px ;
width : 200px ;
height : 150px ;
}
# rcorners6 {
border-radius : 15px 50px ;
background : # 8AC007 ;
padding : 20px ;
width : 200px ;
height : 150px ;
}
</ style >
</ head >
< body >
< p > 四个值 - border-radius: 15px 50px 30px 5px: </ p >
< p id = " rcorners4 " ></ p >
< p > 三个值 - border-radius: 15px 50px 30px: </ p >
< p id = " rcorners5 " ></ p >
< p > 两个值 - border-radius: 15px 50px: </ p >
< p id = " rcorners6 " ></ p >
</ body >
</ html >
2.2 椭圆边角
当然，通过合理的组合还可以设置为椭圆形的边角，甚至椭圆框，如下例：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# rcorners7 {
border-radius : 50px / 15px ;
background : # 8AC007 ;
padding : 20px ;
width : 200px ;
height : 150px ;
}
# rcorners8 {
border-radius : 15px / 50px ;
background : # 8AC007 ;
padding : 20px ;
width : 200px ;
height : 150px ;
}
# rcorners9 {
border-radius : 50% ;
background : # 8AC007 ;
padding : 20px ;
width : 200px ;
height : 150px ;
}
</ style >
</ head >
< body >
< p > 椭圆边框 - border-radius: 50px/15px: </ p >
< p id = " rcorners7 " ></ p >
< p > 椭圆边框 - border-radius: 15px/50px: </ p >
< p id = " rcorners8 " ></ p >
< p > 椭圆边框 - border-radius: 50%: </ p >
< p id = " rcorners9 " ></ p >
</ body >
</ html >
这里因为较少使用的原因，并没有把圆角的四个角单独属性拿出来讲，和边框属性类似，它也有四个角属性，如下：
border-top-left-radius ：左上角
border-top-right-radius ：右上角
border-bottom-left-radius ：左下角
border-bottom-right-radius ：右下角
3 背景渐变
CSS 3 渐变（gradients ）可以在两个或多个指定的颜色之间显示平稳的过渡。
以前，必须使用图像来实现这些效果。但是，通过使用 CSS 3 渐变，可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。
CSS 3 定义了两种类型的渐变：
线性渐变（Linear Gradients ）：向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients ）：由它们的中心定义
3.1 线性渐变
为了创建一个线性渐变，必须至少定义两种颜色结点，颜色结点即是我们想要呈现平稳过渡的颜色；同时，也可以设置一个起点和一个方向（或一个角度）。
格式如下：
background : linear-gradient ( direction , color-stop1 , color-stop2 , ...);
（1）线性渐变：从上到下（默认情况下）
下面的例子演示了从顶部开始的线性渐变，起点是红色，慢慢过渡到蓝色：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# grad1 {
height : 200px ;
background : linear-gradient ( red , blue );
}
</ style >
</ head >
< body >
< h3 > 线性渐变 - 从上到下 </ h3 >
< p > 从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色： </ p >
< div id = " grad1 " ></ div >
</ body >
</ html >
（2）线性渐变 - 从左到右
下面的例子演示了从左边开始的线性渐变，起点是红色，慢慢过渡到蓝色：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# grad1 {
height : 200px ;
width : 500px ;
background : linear-gradient (to right , red , blue );
}
</ style >
</ head >
< body >
< h3 > 线性渐变 - 从左到右 </ h3 >
< p > 从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色： </ p >
< div id = " grad1 " ></ div >
</ body >
</ html >
（3）线性渐变 - 对角
可以通过指定水平和垂直的起始位置来制作一个对角渐变。
下面的例子演示了从左上角开始（到右下角）的线性渐变，起点是红色，慢慢过渡到蓝色：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# grad1 {
height : 200px ;
width : 500px ;
background : linear-gradient (to bottom right , red , blue );
}
</ style >
</ head >
< body >
< h3 > 线性渐变 - 对角 </ h3 >
< p > 从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色： </ p >
< div id = " grad1 " ></ div >
</ body >
</ html >
3.2 使用角度
如果想要在渐变的方向上做更多的控制，可以定义一个角度，而不用预定义方向（to bottom ，to top ，to right ，to left ，to bottom right ，等等）。
格式如下：
background : linear-gradient ( angle , color-stop1 , color-stop2 );
这里角度的单位，在最开始 CSS的 值 这个章节里面讲到过，这里就不复述了，下面是个例子：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
div {
height : 100px ;
width : 500px ;
color : white ;
text-align : center ;
}
# grad1 {
background : linear-gradient ( 0deg , red , blue );
}
# grad2 {
background : linear-gradient ( 30deg , red , blue );
}
# grad3 {
background : linear-gradient ( 145deg , red , blue );
}
# grad4 {
background : linear-gradient ( -90deg , red , blue );
}
</ style >
</ head >
< body >
< h3 > 线性渐变 - 使用不同的角度 </ h3 >
< div id = " grad1 " > 0deg </ div >< br >
< div id = " grad2 " > 30deg </ div >< br >
< div id = " grad3 " > 145deg </ div >< br >
< div id = " grad4 " > -90deg </ div >
</ body >
</ html >
角度是指水平线和渐变线之间的角度，仔细看我们可以发现，角度是按照顺时针的方向来定义的，但 0deg 其实就是 to top ，即从下到上的方向，在实际应用的时候请记住这一点。
3.3 使用多个颜色结点
下面的例子演示了如何设置多个颜色结点：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
div {
height : 200px ;
width : 500px ;
}
# grad1 {
background : linear-gradient ( red , green , blue );
}
# grad2 {
background : linear-gradient ( red , orange , yellow , green , blue , indigo , violet );
}
# grad3 {
background : linear-gradient ( red 10% , green 85% , blue 90% );
}
</ style >
</ head >
< body >
< h3 > 3 个颜色结点（均匀分布） </ h3 >
< div id = " grad1 " ></ div >
< h3 > 7 个颜色结点（均匀分布） </ h3 >
< div id = " grad2 " ></ div >
< h3 > 3 个颜色结点（不均匀分布） </ h3 >
< div id = " grad3 " ></ div >
</ body >
</ html >
下面的例子则演示了如何创建一个带有彩虹颜色和文本的线性渐变：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# grad1 {
height : 55px ;
width : 500px ;
text-align : center ;
margin : auto ;
color : # 888888 ;
font-size : 40px ;
font-weight : bold ;
background : linear-gradient (to right , red , orange , yellow , green , blue , indigo , violet );
}
</ style >
</ head >
< body >
< div id = " grad1 " > 渐变背景 </ div >
</ body >
</ html >
3.4 透明（Transparency）
CSS 3 渐变也支持透明度（transparency ），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
下面的例子演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# grad1 {
height : 200px ;
width : 800px ;
background : linear-gradient (to right , rgba ( 255 , 0 , 0 , 0 ), rgba ( 255 , 0 , 0 , 1 ));
}
</ style >
</ head >
< body >
< h3 > 线性渐变 - 透明度 </ h3 >
< p > 为了添加透明度，我们使用 rgba() 函数来定义颜色结点 </ p >
< p > rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明 </ p >
< div id = " grad1 " ></ div >
</ body >
</ html >
3.5 重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# grad1 {
height : 200px ;
width : 500px ;
background : repeating-linear-gradient ( blue , lightblue 10% , green 20% );
}
</ style >
</ head >
< body >
< h3 > 重复的线性渐变 </ h3 >
< div id = " grad1 " ></ div >
</ body >
</ html >
3.6 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，必须至少定义两种颜色结点。颜色结点即我们想要呈现平稳过渡的颜色，同时，也可以指定渐变的中心、形状（圆形或椭圆形）、大小。
默认情况下，渐变的中心是 center （表示在中心点），渐变的形状是 ellipse （表示椭圆形），渐变的大小是 farthest-corner （表示到最远的角落）。
格式如下：
background : radial-gradient ( center , shape size , start-color , ..., last-color );
（1）径向渐变 - 颜色结点均匀分布（默认情况下）
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# grad1 {
height : 200px ;
width : 200px ;
background : radial-gradient ( red , orange , yellow );
}
</ style >
</ head >
< body >
< h3 > 径向渐变 - 颜色结点均匀分布 </ h3 >
< div id = " grad1 " ></ div >
</ body >
</ html >
（2）径向渐变 - 颜色结点不均匀分布
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# grad1 {
height : 200px ;
width : 200px ;
background : radial-gradient ( red 5% , orange 15% , yellow 60% );
}
</ style >
</ head >
< body >
< h3 > 径向渐变 - 颜色结点不均匀分布 </ h3 >
< div id = " grad1 " ></ div >
</ body >
</ html >
3.7 设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse ，其中：circle 表示圆形，默认值 ellipse 表示椭圆形。
下面是个例子：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
div {
height : 200px ;
width : 250px ;
}
# grad1 {
background : radial-gradient ( red , yellow , blue );
}
# grad2 {
background : radial-gradient ( circle , red , yellow , blue );
}
</ style >
</ head >
< body >
< h3 > 径向渐变 - 形状 </ h3 >
< p >< strong > 椭圆形 Ellipse（默认）： </ strong ></ p >
< div id = " grad1 " ></ div >
< p >< strong > 圆形 Circle： </ strong ></ p >
< div id = " grad2 " ></ div >
</ body >
</ html >
3.8 重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
# grad1 {
height : 150px ;
width : 200px ;
background : repeating-radial-gradient ( red , yellow 10% , green 15% );
}
</ style >
</ head >
< body >
< h3 > 重复的径向渐变 </ h3 >
< div id = " grad1 " ></ div >
</ body >
</ html >
3.9 不同尺寸大小关键字的使用
size 参数定义了渐变的大小，它可以是以下四个值：
closest-side
farthest-side
closest-corner
farthest-corner
下面是个例子：
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< title > hello </ title >
< style >
div {
height : 150px ;
width : 150px ;
}
# grad1 {
background : radial-gradient ( 60% 55% , closest-side , blue , green , yellow , black );
}
# grad2 {
background : radial-gradient ( 60% 55% , farthest-side , blue , green , yellow , black );
}
# grad3 {
background : radial-gradient ( 60% 55% , closest-corner , blue , green , yellow , black );
}
# grad4 {
background : radial-gradient ( 60% 55% , farthest-corner , blue , green , yellow , black );
}
</ style >
</ head >
< body >
< h3 > 径向渐变 - 不同尺寸大小关键字的使用 </ h3 >
< p >< strong > closest-side： </ strong ></ p >
< div id = " grad1 " ></ div >
< p >< strong > farthest-side： </ strong ></ p >
< div id = " grad2 " ></ div >
< p >< strong > closest-corner： </ strong ></ p >
< div id = " grad3 " ></ div >
< p >< strong > farthest-corner（默认）： </ strong ></ p >
< div id = " grad4 " ></ div >
</ body >
</ html >
这里要留意，自己测试的时候如果出现没有背景的现象，可能需要针对不同的浏览器增加内核声明，比如 Chrome （Safari ）要在属性名之前添加 -webkit- ，即完整属性名是 -webkit-radial-gradient ，同理 Opera 要添加 -o- ，FireFox 要添加 -moz- ，为了兼容性的考虑，在实际应用的时候可以写成如下方式确保大多数浏览器可以进行识别并渲染：
div {
/* Safari 5.1 - 6.0 */
background : -webkit- radial-gradient ( 60 % 55 % , closest - side , blue , green , yellow , black );
/* Opera 11.6 - 12.0 */
background : -o- radial-gradient ( 60 % 55 % , closest - side , blue , green , yellow , black );
/* Firefox 3.6 - 15 */
background : -moz- radial-gradient ( 60 % 55 % , closest - side , blue , green , yellow , black );
/* 标准的语法 */
background : radial-gradient ( 60 % 55 % , closest - side , blue , green , yellow , black );
}
这篇一、css伪元素的应用——html5教程，文章就结束了，有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作，谢谢观看，祝您生活愉快。
2023-11-21 14:58
文章点击量：
作者：【前端大G 】
文章标签：
一,、,html,教程,css,伪,元素,的,应用,伪类,我
2023-11-21 14:58
文章点击量：
作者：【前端大G】
