CSS3新增的特性
CSS3的现状:
- 新增的CSS3特性有兼容性问题,ie9+才支持
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
一、CSS3新增的选择器
CSS3新增的选择器:
CSS3新增了一些选择器,可以更加便捷,更加自由选择目标元素。
1、属性选择器
2、结构伪类选择器
3、伪类选择器
1.属性选择器:
语法:
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性且值以val开头的E元素
E[att$="val"] 匹配具有att属性且值以val结尾的E元素
E[att*="val"] 匹配具有att属性且值中含有val的E元素
优点:
1、利用属性选择器就可以不用借助于类或者id选择器
2、属性选择器还可以选择属性=值的某些元素 (重点)
3、属性选择器可以选择属性值开头的某些元素
4、属性选择器可以选择属性值结尾的某些元素
<style>
/* input[value] {
color: aqua;
} */
input[type=text] {
color: blanchedalmond;
}
div[class^="icon"] {
color: blueviolet;
}
section[class$="data"] {
color: brown;
}
</style>
</head>
<body>
<!-- 1、利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" name="" id="" value="请输入用户名">
<input type="text" name="" id=""> -->
<!-- 2、属性选择器还可以选择属性=值的某些元素 (重点) -->
<input type="text">
<input type="password">
<!-- 3、属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>hhhhhh</div>
<!-- 4、属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">1234</section>
<section class="icon2-data">5678</section>
<section class="icon3-ico">345678</section>
</body>
注意:
类选择器、属性选择器、伪类选择器的权重都为10。
2.结构伪类选择器:
结构伪类选择器主要根据文档结构来选择器元素,常用语改呢根据父级选择器里面的子元素
语法:
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中的最后一个子元素E
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个
其中:
- nth-child(n)选择某个父元素的一个或多个特定的子元素。
- n可以是数字,关键字和公式;
- n如果是数字,就是选择第n个子元素,里面数字从1开始..;
- n可以是关键字 :even 偶数,odd 奇数;
- n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)。
公式:
2n 偶数
2n+1 奇数
5n 5的倍数 "5"可以为其他值
n+5 从第5个开始(包含第5个)到最后 "5"可以为其他值
-n+5 前五个(包含第5个) "5"可以为其他值
<style>
/* 1.选择ul里面的第一个孩子 li */
ul li:first-child {
background-color: coral;
}
ul li:last-child {
background-color: cornflowerblue;
}
ul li:nth-child(2) {
background-color: sandybrown;
}
/* 把所有偶数的孩子选出来 */
/* ul li:nth-child(even) {
background-color: sandybrown;
} */
/* 把所有奇数的孩子选出来 */
/* ul li:nth-child(odd) {
background-color: sandybrown;
} */
ul li:nth-child(6) {
background-color: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
</body>
nth-of-type(n)和nth-child(n)的区别:
- nth-child 对父元素里面所有的孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配;
- nth-of-type对父元素里面指定子元素进行排序选择,先去匹配E,然后再根据E找第n个孩子。
<style>
/* nth-child(n) 从0开始,每次加1,往后面计算 这里边必须是n,不能是其他字母 相当于选择了所有孩子*/
/* ol li:nth-child(n) {
background-color: pink;
} */
/* nth-child(2n)选择了所有的偶数孩子,相当于even */
/* ol li:nth-child(n) {
background-color: pink;
} */
/* nth-child(n+5) 从第5个开始选择一直到最后 */
/* ol li:nth-child(n+5) {
background-color: pink;
} */
/* nth-of-type(n) */
ol li:nth-of-type(even) {
background-color: purple;
}
/* nth-child 会把所有的孩子都排列序号
他在执行的时候首先看nth-child(1),之后回去看前面的div*/
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号
执行的时候首先看:div (指定的元素) 之后回去看 nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: royalblue;
}
</style>
</head>
<body>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
总结:
- 结构伪类选择器一般用于选择父级里面的第几个孩子;
- nth-child对父元素里面所有的孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是和否和E匹配;
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E,找到第n个孩子;
- 关于nth-child(n)我们要知道n是从0开始计算的,要记住常用公式;
- 如果是无序列表,我们肯定用nth-child多一些;
- 类选择器、属性选择器、伪类选择器的权重都为10。
<style>
div {
width: 200px;
height: 200px;
background-color: seagreen;
}
/* div::before 权重是2 */
div::before {
/* 这个content是必须写的 */
content: '佩奇';
}
div::after {
content: 'pig';
}
</style>
</head>
<body>
<div>是</div>
</body>
注意:
before和after创建一个元素,但是属于行内元素;
新创建的这个元素在文档树中是找不到的,所以我们成为伪元素;
语法:element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素,after在父元素内容的后面插入元素;
伪元素选择器和标签选择器一样,权重为1;
二、CSS3的盒子模型
CSS3中可以通过box-sizing来指定盒模型,有两个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
1、box-sizing:content-box 盒子大小为width+padding+border(以前默认的);
2、box-sizing:border-box 盒子大小为width。
如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了。(前提是padding和border不会超过width的宽度)
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* CSS3盒子模型 最终大小就是width */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪佩奇
</div>
<p>小猪佩奇</p>
</body>
三、CSS3新增的的过渡
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种形式变换为另一种样式时为元素添加效果。
过渡动画:是从一个状态渐渐地过渡到另外一个状态。
可以让我们的页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本)但是不会影响页面布局。
我们现在经常和:hover 一起搭配使用。
transition :要过度的属性 花费时间 运动曲线 何时开始;
1.属性:想要变化的css属性,宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过度,写一个all就可以。
2.花费时间:单位是 秒 (必须写单位) 比如0.5s。
3.运动曲线:默认是ease。
参数:linear 匀速 ease 逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速。(可以省略)
4.何时开始:单位是 秒 (必须写单位) 可以设置延迟触发时间 默认是0s (可以省略)。
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
}
div:hover {
transition: width 1s ease-in-out 0s,height 1s ease-in-out 1s;
/* 如果想要写多个属性,用逗号分割。想要所有属性都变化,就写all就可以 */
/* transition: all 1s; */
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
四、CSS3的其它特性(了解)
1。图片变模糊
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移的图形效果应用于元素。
filter:函数(); 例如:filter:blur(5px); blur模糊处理 数值越大越模糊
<style>
img {
/* blur 是一个函数 小括号里面数值越大,图片越模糊 注意数值要加px单位 */
filter:blur(5px)
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="images/bg.jpg" alt="">
</body>
2.计算盒子宽度width:calc 函数
CSS3 calc函数:
calc()此CSS3函数让你在声明CSS属性值是执行一些计算。
width:calc(100%-80px);
括号里面可以使用+ - * /来进行计算。
<style>
.father {
width: 200px;
height: 200px;
background-color: royalblue;
}
.son {
/* width: calc(150px+100px); */
/* 需求我们的子盒子宽度永远比父盒子小30px */
width: calc(100%-30px);
height: 30px;
background-color: chartreuse;
}
</style>
</head>
<body>
<!-- 需求我们的子盒子宽度永远比父盒子小30px -->
<div class="father">
<div class="son">
</div>
</div>
</body>