CSS3新特性
CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性,
弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
一、CSS3的兼容情况
CSS3给开发人员带来了很多有趣的功能,同时也为用户提供了更好的用户体验。但是,这一切并不是所有的浏览器都完全支持。目前主流的浏览器都采用了私有属性的形式来支持CSS3属性,以便让用户体验CSS3的新特性。
- Webkit引擎浏览器使用“-webkit-”作为私有属性,像Safari和Chrome浏览器。
- Gecko引擎浏览器使用“-moz-”作为私有属性,像Firefox浏览器。
- Konqueror引擎浏览器使用“-khtml-”作为私有属性。
- Opera浏览器浏览器使用“-o-”作为私有属性。
IE浏览器使用“-ms-”作为私有属性,只有IE8以上支持。
二、新增选择器
1.选择相邻兄弟
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器代码如下(示例):
h1 + p {
margin-top:50px;
}
2.匹配选择器
匹配所有在#div元素之后的同级p元素代码如下(示例):
div ~ p {
background-color: #f00;
}
3.属性选择器
CSS3新增加了属性选择器,使选择器引入了通配符的概念。常用的属性选择器如下所示:选择器 | 描述 |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
[attribute~=value] | 用于选取属性值中(包含)指定词汇的元素,后面还可以空格为分隔符。 |
[attribute|=value] 用于选取带有以指定值(开头)的属性值的元素,后面还可以连字符为分隔符。
4.结构性伪类选择器
4.1 整体结构类型
- :first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
- :last-child 匹配的是某父元素的最后一个子元素,可以说是结构上的最后一个子元素。
4.2 标签结构类型
- :first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。
- :last-of-type 匹配某个父元素中最后一个某一类型的元素。
4.3 指定子元素的序号
- :nth-child(n) 对指定序号的子元素设置样式(从前往后数)。参数可以使数字(1、2、3)、关键字(odd、even)、公式(2n、2n+3),参数的索引起始值时1,而不是0。
- :nth-last-child(n) 对指定序号的子元素设置样式(从后往前数)。参数同上。
- :nth-of-type(n) 匹配指定序号的同一种类型的子元素(从前往后数)。参数同上。
- :nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素(从后往前数)。参数同上。
4.4 其他伪类选择器
- :root:将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中,指的就是整个“html”部分。
- :empty 指定当元素内容为空白时使用的样式。
- :not(selector)排除selector选择器选中的元素,不对它们应用样式解析。
- :target 对页面中某个target元素指定样式,该样式只在用户单击了页面中的链接,并且跳转到target元素后生效。
5 、文本选择伪元素
- ::selection指定当前元素处于选中状态部分的样式。只能向选择器应用少量CSS属性:color、background、cursor等。
- :first-letter:对每个文本的首个字符
- :first-line:对每段文本的第一行
6、 内容追加伪元素
- ::before:向当前的元素前面追加内容(创建一个伪元素,其将成为匹配选中的元素的第一个子元素)
- ::after:向当前的元素内容后面追加内容(创建一个伪元素,作为已选中元素的最后一个子元素)
需要搭配content使用,示例如下:
p:before
{
content:"开心";
background-color:yellow;
color:red;
font-weight:bold;
}
a::after {
content: "每一天";
}
注意:
:before和::before写法的区别
• 相同点
1.都可以用来表示伪类对象,用来设置对象前的内容,:before和::before写法是等效的
2.伪类对象要配合content属性一起使用
3.伪类对象不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
4.所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,
• 不同点
:before是css2的写法,::before是css3的写法,在H5开发中建议使用::before比较好。
伪元素和伪类区别
- 伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
- 伪类:存在DOM文档中,逻辑上存在但在文档树中却无须标识的“幽灵”分类。
7、表单中使用的状态伪类选择器
- :disabled 指定当前元素处于不可用状态时的样式。
- :enabled 指定当前元素处于可用状态时的样式。
- :checked 指定表单中单选框或复选框处于选中状态时的样式。
8、JS新增的选择器
- querySelector();
- querySelectorAll();
三、CSS3样式补充
1、background-image多重背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
background-image: url(img/1.jpg),url(img/3.jpg),url(img/2.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 5% 100%, 95% 0%, top;
padding: 300px 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、background-image的渐变
CSS3 定义了两种类型的渐变(gradients):
• 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
• 径向渐变(Radial Gradients)- 由它们的中心定义
2.1 线性渐变
- direction:预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。
- 定义一个角度
如果不设置direction,那么从头部开始的线性渐变,从红色开 始,转为黄色,再到蓝色:代码如下:
#grad {
width:200px;
height: 200px;
background-image: linear-gradient(red, yellow, blue);
}
其他线性渐变:
#grad {
background-image: linear-gradient(to bottom right, red , yellow);
}
#grad {
background-image: linear-gradient(to right, red , yellow);
}
2.2 径向渐变
径向渐变由它的中心定义。
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
为了创建一个径向渐变,你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形)。shape 参数定义了形状,默认值是 ellipse。
#grad {
background-image: radial-gradient(red, yellow, green);
}
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
3、background-size背景缩放
其参数设置如下:
a) 可以设置长度单位(px)(img大小一样)或百分比(设置百分比时,参照盒子的宽高)
b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
温馨提示:background-size属性一定要写在background属性后面
4、background-origin背景定位原点
background-origin: padding-box|border-box|content-box;
其中比较常用的参数如下所示:
• padding-box: 默认值, 从padding区域开始显示背景。
• border-box: 从border区域开始显示背景。
• content-box: 从content区域开始显示背景。
5、background-clip背景图裁剪
background-clip属性用来指定背景的显示范围或者背景的裁剪区域。语法如下:
background-clip: border-box | padding-box | content-box;
其中比较常用的参数如下所示:
• border-box:默认值,背景从border区域向外裁剪,也就是超出border区域的背景将被裁剪掉。
• padding-box: 背景从padding区域向外裁剪,也就是超出padding区域的背景将被裁剪掉。
• content-box: 背景从content区域向外裁剪,也就是超出content区域的背景将被裁剪掉
6、CSS3的opacity 属性
opacity 属性是设置元素的不透明级别
opacity: value|inherit;
值 | 描述 |
---|---|
value | 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。 |
inherit | 应该从父元素继承 opacity 属性的值。 |