CSS3-选择器+文字+边框+背景+颜色+渐变

本文链接：https://blog.csdn.net/weixin_47345929/article/details/110529153

本文详细介绍了CSS3的新特性，包括选择器的扩展如属性选择器、结构性伪类，文本阴影、边框效果如圆角和阴影，背景的多重设定和渐变，以及颜色函数。同时讨论了CSS3的浏览器兼容性和厂商前缀问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1 、介绍

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，它是对CSS的一个扩展。2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模
块。

CSS3的主要新特性：

1）选择器
2）阴影
3）形状转换（2D <-> 3D）
4）变形
5）动画（过渡动画、帧动画）
6）边框
7）多重背景
8）反射
9）文字
10）颜色函数（rgba/hsl/hsla）
11）滤镜（filter）
12）弹性布局
13）多列布局
14）栅格布局
15）盒模型
16）Web字体
17）媒体查询

CSS3的属性前缀

CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性。

1）主流浏览器内核

Trident内核：主要代表为IE浏览器
Gecko内核：主要代表为Firefox
Blink内核（是Webkit的一个分支）：主要代表为Chrome和Opera
Webkit内核：产要代表为Chrome和Safari
目前国内的浏览器大多都是双核的（IE内核+Chrome内核）

2）厂商前缀

IE： -ms-
Chrome&Safari： -webkit-
FireFox： -moz-
Opera： -o-

2、CSS3选择器

丰富选择的目的：在标签中减少class和id属性的使用。

1）属性选择器

[属性名]

/* 匹配具有class属性的元素 */
p[class]{
	color: #ff0000;
}

[属性名=属性值]

/* 匹配具有class属性且属性值为content的元素 */
p[class=content]{
	color: #ff0000;
}

[属性名^=属性值]

/* 匹配具有class属性且值以content开头的元素 */
p[class^=content]{
	color: #ff0000;
}

[属性名$=属性值]

/* 匹配具有class属性且值以content结尾的元素 */
p[class$=content]{
	color: #ff0000;
}

[属性名*=属性值]

/* 匹配具有class属性且值含有content的元素 ，div用~，p标签用**/
p[class*=p]{
	color: #ff0000;
}
div[class~=xxx]{
	color: #0000FF;
}

2）结构性伪类

①:root 匹配HTML标签,与body选择器效果一样

:root

/* :root{
	background: #BC8F8F;
}*/
body{
	background: #BC8F8F;
}

②子元素选择器:匹配父元素中连续的子元素

:first-child 匹配父元素中第一个子元素

p:first-child{
    background: #00FF00;
}

:last-child 匹配父元素中最后一个子元素
:nth-child(n) 匹配父元素中第n个子元素
:nth-last-child(n) 匹配父元素中倒数第n个子元素

③nth-of-type类：用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况

:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素

/* 找的是p标签中的第三个兄弟p标签，如果第三个不是P标签，将跳过，继续向下寻找，直到找到为止 */
p:nth-of-type(3){
	color: #005FBD;
}

:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素

/* 找的是p标签中倒数第二个兄弟p标签，如果不是P标签，将跳过，继续向前寻找，直到找到为止 */
 p:nth-last-of-type(2){
	color: #8B008B;
}

④其他

:only-child 父元素中仅有一个子元素

p:only-child{
	width: 100px;
	height: 100px;
	background-color: #888888;
} /* 查找的是父元素中仅有一个标签且为p标签 */

:only-of-type 父元素中仅有一个兄弟元素

p:only-of-type{
	width: 100px;
	height: 100px;
	background-color: #FF0000;
}/* 父元素中只有一个p标签，但是有其他兄弟标签 */

:empty没有元素，包括文本元素，既查找空元素

3）目标伪类

:target 匹配相关URL指向的元素

<a href="#jump1">跳转1</a>
<a href="#jump2">跳转2</a>
<a href="#jump3">跳转3</a>
<p id="jump1">这是段落1的内容</p><!-- id="jump1"这里的id表示设置了1个锚点，进行页内跳转 -->
<p id="jump2">这是段落2的内容</p>
<p id="jump3