本文详细介绍了HTML5中的复杂选择器，包括相邻兄弟选择器和通用兄弟选择器的语法与应用场景。此外，还探讨了属性选择器的多种匹配方式，如通过元素属性值的开始、结束、包含等进行匹配。伪类选择器部分讲解了链接伪类、动态伪类以及新伪类，如目标伪类、元素状态伪类和结构伪类。最后，提到了伪元素选择器和内容生成的相关内容，包括:before和:after伪元素以及counter()函数的应用。
1、复杂选择器
1、兄弟选择器
兄弟:具备相同父元素的一组元素称为兄弟元素
1、相邻兄弟选择器
1、什么是相邻兄弟选择器
匹配指定元素的相邻兄弟元素
2、语法：
结合符:+
选择器1+选择器2
2、通用兄弟选择器
1、什么是通用兄弟选择器
匹配指定元素下面所有的兄弟选择器的元素
2、语法
结合符:~
选择器1~选择器2
2、属性选择器
1、作用：
允许通过元素所附带的属性以及值，来匹配页面上的元素
2、语法[]
1、[attr]
匹配页面上元素所附带attr属性的元素
eg
[title]
2、elem[attr]
作用：匹配具备attr属性的elem 元素
3、elem[attr1][attr2]
匹配页面上同时具备attr1属性以及attr2属性的elem元素
4、elem[attr=value]
匹配attr属性的值为value的elem元素
5、elem[attr~=value]
匹配attr属性值，value是值列表中的一个
6、elem[attr^=value]
匹配attr属性值是以value作为开始的elem元素
7、elem[attr$=value]
匹配attr属性值是以value作为结尾的elem元素
8、elem[attr*=value]
匹配attr属性值中包含value字符的elem元素
3、伪类选择器
匹配元素不同的状态
已学
1、链接伪类 :link :visited
2、动态伪类 :hover :active :focus
新伪类
1、目标伪类
作用：突出显示活动的html锚元素
语法：:target
2、元素状态伪类
元素状态：启用的，禁用的，被选中的
使用场合：在表单元素中使用
1、语法：
1、:enabled 匹配每个已启用的元素
2、:disabled 匹配每个被禁用的元素
3、:checked 匹配每个被选中的元素
3、结构伪类
1、:first-child 作用：匹配属于其父元素中的第一个子元素
2、:last-child 作用：匹配属于其父元素中的最后一个子元素
3、:empty 作用:匹配没有子元素的每个元素
4、:only-child 作用：匹配属于其父元素中的唯一子元素
<div><p>hello world</p></div>
5、:nth-child(n) 作用：匹配属于其父元素的第n个子元素
4、否定伪类
作用:在获取到的元素中，进行进一步的筛查和排除
语法 :not(选择器)
选择器:not(选择器)
4、伪元素选择器
伪类:匹配元素不同的状态
伪元素：匹配元素内容中的一部分
1、:first-letter或::first-letter
作用：匹配元素的第一个字符
2、:first-line或::first-line
匹配元素的首行文本
3、::selection
匹配用户选取的部分
:和::的区别
在css2.0中，伪元素选择器和伪类选择器统一使用:来表示
在css3开始，w3c规范，所有的伪类选择器使用:表示，
所有的伪元素选择器，使用::表示
为了实现兼容性，尽可能的使用:来表示伪元素， ::selection使用两个冒号
2、内容生成
1、什么是内容生成
通过css生成一部分新的内容，插入到网页元素中
2、伪元素选择器
1、:before 或::before
作用：匹配指定元素的内容区域之前
2、:after 或::after
作用：匹配指定元素的内容区域之后
3、属性:content
作用：生成的内容是什么
取值：
1、字符串，使用"括起来的文本"
2、图像，url()
3、计数器
1、什么是计数器
通过css生成一组有顺序的数字，并且添加到元素的内容区域中
2、语法：
1、counter-reset属性
作用：声明/复位一个计数器
语法：counter-reset:计数器名称 初始值；
初始值
默认为0；
可以为正数，负数
一次声明多个计数器
counter-reset:计数器名称1 初始值1 计数器名称2 初始值2；
声明计数器的位置
不能放在使用计数器的元素中
推荐：将计数器放在使用元素的父元素中，如果页面中所有的元素有相同的计数器，可以声明在body中
2、counter-increment
作用：设置某个选择器每次使用计数器的增量，默认值为1
取值：正数，递增
负数，递减
语法counter-increment:计数器名称 增量
位置：哪个元素使用计数器，就放在哪个元素中
3、counter()函数
注意：配合content属性一起使用
语法:content:counter(计数器名称)
4、多列
1、分隔列
作用：将文本分成几列
属性：column-count
取值：数字
2、列间隔
作用：每两列之间的距离
属性：column-gap
取值：px
3、列规则、
作用：设置每两列之间的边框的大小样式颜色
属性：column-rule
取值：width style color
4、兼容性
ie10+，opera：支持多列属性
firefox： -moz-前缀
chrome safari -webkit
day01 pm
1、转换
1、什么是转换
转换就是改变元素的形状、位置和尺寸的一种效果
2d在x轴、y轴的转换效果
3d转换：x、y、z
转换：旋转、缩放、移动、倾斜
2、转换属性
属性：transform
取值：
1、none 默认值，表示 无转换效果
2、transform-function
指定一个或多个转换函数，中间用空格隔开
缩放：scale()函数
位移：translate()函数
3、转换的原点
属性：transform-origin
作用：指定转换元素的原点
取值：1、默认情况，转换原点会存在于元素的中心位置
2、数值/百分比/关键字
两个值：x轴和y轴
三个值：x轴和y轴和z轴
一般在旋转的时候，会更改转换原点，其他情况一般不会。
4、2d转换
1、什么是2d转换
围绕着x轴和y轴的转换操作
2、2d位移
1、位移
改变元素在x轴和y轴的位置
2、属性与函数
属性:transform
函数
translate(x):改变元素在x轴的位置
translate(x,y)：改变元素在x轴和y轴的位置
取值：数值、百分比
x为正，向右移动
y为正，向下移动
单向位移函数
translateX(x)/translateY(y)
3、2d缩放
1、改变元素的显示比例
2、属性和函数
属性：transform
函数
scale(x):x轴与y轴等比例缩放
scale(x,y)
取值
1、默认值为1
2、放大：大于1的值
3、缩小：0-1之间的小数
单向缩放函数 scaleX（x）、scaleY(y)
4、2d旋转
1、什么是旋转
围绕着一个点，产生角度的变化
2、属性和函数
属性：transform
函数：rotate(ndeg)
n为旋转角度，
取值为正，按顺时针方向旋转
取值为负，逆时针
注意：旋转过程中，连同坐标轴，跟着旋转
5、2d倾斜
1、按照一定的角度去产生倾斜的效果，倾斜会改变元素的形状
2、属性和函数
属性：transform
函数
skew(x)
skew(x,y)
skewX(x)
skewY(y)
x轴倾斜：让元素向左或向右产生倾斜的变换，
y轴倾斜：让元素向上或向下
5、3d转换
1、什么是3d
2d与3d的区别：空间距离
2、perspective属性
作用：假定人眼与投射平面的距离
注意：
1、该属性定义在3d变换元素的父元素上，元素本身不会有3d效果，但是子元素会呈现出3d效果
2、chrome和safari需要使用-webkit-perspective来替代
3、3d旋转
1、什么是3d旋转
让元素在x轴、y轴、z轴分别产生旋转的效果。
2、x轴旋转
属性：transform函数：rotateX(x)
3、y轴旋转
属性：transform函数：rotateY(y)
4、z轴旋转
属性：transform函数：rotateZ(z)
5、rotate3d函数
函数：rotate3d(x,y,z,deg)
x,y,z表示的不是角度，而是该轴是否参与到旋转操作中来。
取值：
0：不参与
大于0：参与
rotate3d(1,0,0,45deg) rotateX(45deg)
4、3d位移
3d位移改变元素在z轴上的位置
属性：transform
函数：translateZ(z);
translate3d(x,y,z)
5、transform-style属性
作用：规定如何在3d空间中呈现被嵌套的元素
取值：
1、flat：默认值，子元素将不保留其3d位置
2、preserve-3d：子元素保留3d位置
2、过渡
1、什么是过渡
让css属性在一段时间内进行平滑的过渡
2、触发过渡
鼠标悬停
点击、移入、移出
3、过渡相关属性
1、过渡属性
属性：transition-property
取值：none无过渡效果
all全部，
具体的属性名称
以下属性可以设置效果
1、颜色属性
2、取值为数值的属性
3、转换属性 :transform
4、渐变属性
5、visibility
6、阴影属性
2、过渡时间
以s、ms作为单位
属性:transition-duration
默认值为0
3、过渡速度和时间曲线函数
transition-timing-function
ease 默认值，慢速开始，快速变快，在慢速结束
linear：匀速
ease-in 加速效果
ease-out减速效果
ease-in-out 慢速开始和结束，中间先加后减
4、过渡延迟
transition-delay
以s/ms作为单位
5、综合属性
transition:property duration timing-function delay
3、动画
1、通过关键帧来控制
使用步骤
1、声明动画
1、为动画指定名称
2、指定关键帧的状态
语法:
@keyframes 动画名称{
/*关键帧的声明
1、时间点
2、该时间点上的状态
*/
时间点{
很多css属性
}
}
0%|from{
width:100px;
}
50%{
width:200px
}
100%|to{
}
2、调用动画
属性：
1、animation-name
名称
2、animation-duration 动画执行时间
3、animation-timing-function 曲线函数
4、animation-delay 延迟
5、animation-iteration-count：动画播放次数
取值：
1、数值
2、infinite 无限次播放
6、animation-direction
动画播放方向
取值：
normal 正向播放 从0-100
reverse 逆向播放
alternate 奇数 正向播放 偶数逆向播放
7、animation:name duration timing-function delay iteration-count direction
扫一扫
4399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
