「1. CSS3属性选择器」
button {
cursor: pointer;
}
button[disabled] {
cursor: default;
}
input[type=search] {
color: skyblue;
}
span[class^=black] {
color: lightgreen;
}
span[class$=black] {
color: lightsalmon;
}
span[class*=black] {
color: lightseagreen;
}
「2. 结构伪类选择器」
ul li:first-child {
background-color: lightseagreen;
}
ul li:last-child {
background-color: lightcoral;
}
ul li:nth-child(3) {
background-color: aqua;
}
-
nth-child(n)参数n详解
-
注意：本质上就是选中第几个子元素
-
n 可以是数字、关键字、公式
-
n 如果是数字，就是选中第几个
-
常见的关键字有 even 偶数、odd 奇数
-
常见的公式如下(如果 n 是公式，则从 0 开始计算)
-
但是第 0 个元素或者超出了元素的个数会被忽略
-
-
nth-child与nth-of-type区别
-
nth-child 选择父元素里面的第几个子元素，不管是第几个类型
-
nth-of-type 选择指定类型的元素
-
「3. 伪元素选择器」
-
伪元素选择器注意事项
-
before 和 after 必须有 content 属性
-
before 在内容前面，after 在内容后面
-
before 和 after 创建的是一个元素，但是属于行内元素
-
创建出来的元素在 Dom 中查找不到，所以称为伪元素
-
伪元素和标签选择器一样，权重为 1
-
伪元素字体图标
p {
position: relative;
width: 220px;
height: 22px;
border: 1px solid lightseagreen;
margin: 60px;
}
p::after {
content: '\ea50';
font-family: 'icomoon';
position: absolute;
top: -1px;
right: 10px;
}
「4. 2D 转换之translate」
-
2D转换
-
2D转换是改变标签在二维平面上的位置和形状
-
移动：translate
-
旋转：rotate
-
缩放：scale
-
-
translate语法
-
x就是X轴上水平移动
-
y就是y轴上水平移动
-
transform: translate(x, y) transform: translateX(n) transfrom: translateY(n)
-
重点知识点
-
2D的移动主要是指水平、垂直方向上的移动
-
translate最大的优点就是不影响其他元素的位置
-
translate中的100%单位，是相对于本身的宽度和高度来进行计算的
-
行内标签没有效果
-
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* 水平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px);
/*百分比用法*/
transform: translateY(100%);
}
让一个盒子水平垂直居中
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/* 1. 我们tranlate里面的参数是可以用 % */
/* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
/* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
/* transform: translateX(50%); */
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/1.* margin-top: -100px;
margin-left: -100px; */
/2.* translate(-50%, -50%)
盒子往上走自己高度的一半 */
transform: translate(-50%, -50%);
}
span {
/* translate 对于行内元素是无效的 */
transform: translate(300px, 300px);
}
「5. 2D 转换之rotate」
-
rotate旋转
-
2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转
-
/* 单位是：deg */
img:hover {
transform: rotate(360deg)
}
-
rotate语法
-
rotate 里面跟度数，单位是 deg
-
角度为正时，顺时针，角度为负时，逆时针
-
默认旋转的中心点是元素的中心点
-
-
设置元素旋转的中心的(transform-origin)
transform-origin: x y;
-
注意
-
后面的参数 x 和 y 用空格隔开
-
x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center
-
还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)
-
「6. 2D 转换之scale」
-
scale的作用：用来控制元素的放大与缩小
transform: scale(x, y)
-
知识要点：
-
注意，x与y之间用逗号进行分隔
-
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
-
transform: scale(2, 2): 宽和高都放大了二倍
-
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
-
transform:scale(0.5, 0.5): 缩小
-
scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
-
div:hover {
/* 注意，数字是倍数的含义，所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等比缩放，同时修改宽与高 */
/* transform: scale(2) */
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
「7. 2D 转换综合写法以及顺序问题」
知识要点
-
同时使用多个转换，其格式为 transform: translate() rotate() scale()
-
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
-
当我们同时有位置或者其他属性的时候，要将位移放到最前面
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
