CSS —— 新特性
目录
一、新增选择器
1. 属性选择器
1.1 属性选择器:可根据元素特定属性的选择元素;
1.2 选择符:
1.3
① E[att] :
input[value] {
color: skyblue;
}
② E[att="val"] :
input[type=text] {
color: red;
}
<div class="num1">1</div>
<div class="num2">2</div>
<div class="num3">3</div>
<div class="nuc">four</div>
③ E[att^="val"] 、 E[att$="val"] : ^为开头, $为结尾
div[class^=num] {
color: red;
}
div[class$=uc]{
color: red;
}
④ E[att*="val"] :
div[class*=nu]{
color: red;
}
2. 结构伪类选择器
2.1 结构伪类选择器:通过文档类型来选择器元素;
2.2 选择符:
注:n 可以代表数字、关键字、公式;
当n为公式时:
2.3 使用:
① first-child 的使用:(last-child 相同)
li:first-child {
background-color : skyblue;
}
② nth-child(n) 的使用:n 可以代表数字、关键字、公式;
li:nth-child(5) {
font-size: 28px;
}
li:nth-child(even) {
font-size: 26px;
color: pink;
}
li:nth-child(n+5) {
font-size: 26px;
color: pink;
}
③ first-of-type 的使用:(last-of-type相同)
li:first-of-type {
color: red;
font-style: italic;
}
④ nth-of-type(n) 的使用:
ul li:nth-last-of-type(5) {
color: red;
font-size: 26px;
}
ul li:nth-of-type(odd) {
font-size: 26px;
}
2.4 nth-child(n)和nth-of-type(n) 区别:
① nth-child 对父元素里面所有子元素进行排序选择,序号是固定,找到第n个子元素,再看是否匹配;
② nth-of-type 对父元素里指定的子元素进行排序,先匹配E,再根据E找第n个子元素;
2.5 类选择器、属性选择器、伪类选择器权重为10;
3. 伪类选择器
3.1 伪类选择器:利用CSS创建新标签元素;
3.2 选择符:
3.3 使用:
div::before {
content: '书里总爱';
background-color: skyblue;
}
div::after {
content: '的傍晚';
background-color: skyblue;
}
3.4 注意:
① before、after创建一个元素,但属于行内元素,且在文档树中找不到;
② 必须要有 content 属性;
③伪类选择器、标签选择器权重为1;
二、新特性
1. CSS3盒子模型
1.1 css3可以通过 box-sizing 来指定盒子模型;
1.2 类型:
① box-sizing:content-box 盒子大小 = width + padding + border;
② box-sizing:border-box 盒子大小 = width;
(使用 ② 的前提: padding + border 不会超过 width)
1.3 使用:
p {
width: 150px;
height: 150px;
border: 10px solid pink;
background-color: skyblue;
padding: 30px;
box-sizing: border-box;
}
2. 滤镜属性
2.1 filter 属性:将模糊或者颜色偏移等效果应用于元素;
2.2 语法格式:(当前阶段只使用blur属性)
filter : 函数();
2.3 使用:数值越大,越模糊;
img {
filter: blur(5px);
}
3. 盒子宽度
3.1 calc() 属性:可改变盒子宽度高度;
3.2 语法格式:(calc括号里进行计算,可以进行加减乘除)
width : calc();
height: calc();
3.3 使用:(子盒子的大小会随着父盒子而变化,但始终与父盒子width差50px,height差100px)
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box1 {
width: calc(100% - 50px);
height: calc(100% - 100px);
background-color: blue;
}
4. 过渡
4.1 transition 属性:将元素从一种样式转换为另一种样式;
(经常和 :hover 搭配一起使用)
4.2 语法格式:(哪个元素过渡,就给哪个元素加 transition)
transition : 过渡的属性 花费时间 运动曲线 何时开始;
① 属性:变化的css属性,如果想要多个属性都变化,属性可以写all;
② 花费时间:单位默认为s;
③ 何时开始:单位为s,可以设置延迟触发的时间;
④ 运动曲线:默认为ease;
4.3 使用:
div {
width: 200px;
height: 100px;
background-color: skyblue;
transition: width 0.5s ease;
}
div:hover {
width: 300px;
background-color: pink;
}