css3 笔记01

目录

[01 css3选择器](#01 css3选择器)

[02 伪类选择器](#02 伪类选择器)

[03 伪元素选择器](#03 伪元素选择器)

[04 文章分割列](#04 文章分割列)

[05 浏览器hack写法](#05 浏览器hack写法)

[06 css3中的2D转换](#06 css3中的2D转换)


01 css3选择器

选择器+选择器{} 表示选择下一个兄弟

选择器1~选择器2{} 表示选中选择1后面所有包含选择器2的元素.

[属性名]{} 包含属性名的选择器

选择器[属性名]{}

['属性名'='属性值']{}

['属性名'^='属性值']{} 表示属性以属性值开头

['属性名'$='属性值']{} 表示属性以属性值结尾

['属性名'~='属性值']{} 表示属性中是否包含属性值

动态伪类 :focus

目标伪类

:target 锚点激活的对应元素的选择器

:enabled 元素可用状态的时候生效 只要针对表单元素

只要这个表单元素没有设置disabled属性 都属性可用状态

:disabled 当表单元素设置了disable属性的时候生效

:checked 单选多选按照被选中的时候的状态

02 伪类选择器

结构伪类:

li :first-child 表示选中第一个li

li:last-child 表示选中最后一个li

:only-child 当前选择器选择的所有的元素中

如果当前元素在父元素中是独生子元素 则选择器生效

:empty{} 当前选择器选择到的所有的元素中 元素内容为空时选中

:nth-child(){}

当前选择器选择到的所有元素中 在父元素中排行指定序号的元素 序号从1开始

否定伪类:

:not(选择器) 表示选中不包含这个选择器的元素

03 伪元素选择器

::first-letter 选择第一个字符

::first-line 选择第一行

::selection 针对选中的内容

伪元素选择器

:after :before

动态给当前元素的前一位/后一位添加内容

content必写属性 伪元素是行内元素

04 文章分割列

文章分割列属性:

column-count: 分割的列数

column-gap:px值 列和列之间的间隔

column-rule:px值 边框样式 边框颜色

列和列之间的间隔边框

05 浏览器hack写法

某些属性不同内核的浏览器有兼容性问题 需要需要加入 css前缀

针对 谷歌的兼容:

-webkit-属性名:属性值

针对火狐的兼容

-moz-属性名:属性值

针对欧朋的兼容

-o-属性名:属性值

针对IE的兼容

-ms-属性名:属性值

06 css3中的2D转换

转换的四个方式:

1.位移 transform:translate()

位移:

transform:translateX(px值) 横向位移

transform:translateY(px值) 纵向位移

transform:translate(x,y) 横纵位移

2.旋转 transform:rotate()

旋转:

transform:rotateX(deg角度); 3D转换下效果明显

transform:rotateY(deg角度); 3D转换下效果明显

transform:rotateZ(deg角度); 圆心在图片中间 顺时针旋转

修改转换属性的圆心:

transform-origin:x位置 y位置

默认值是center 0 0 是当前元素的 左上角

3.缩放 transform:scale()

缩放:

transform:scale(整数或者小数)

1为不缩放, 大于1为放大, 小于1的小数位缩小

0.9缩小10分之一

4.倾斜 transform:skew()

倾斜:

transform:skew(deg角度)

transform:skewX() 横向倾斜

transform:skewY() 纵向倾斜

transform:skew(x,y) 横纵向倾斜

相关推荐
cuisidong199712 分钟前
5G学习笔记三之物理层、数据链路层、RRC层协议
笔记·学习·5g
乌恩大侠14 分钟前
5G周边知识笔记
笔记·5g
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js