css3-学习

css 特性

选择器

基础选择器

标签选择器

ID 选择器

类选择器

CSS 的优先级是什么?

!important > 内联样式(style="") > ID 选择器 > 类选择器 = 属性选择器 = 伪类 > 标签选择器 = 伪元素选择器。

层级选择器

  • foo bar 后代选择器,元素的后代元素
  • foo > bar 子代选择器,元素的子代元素
  • foo + bar 相邻同胞选择器
  • foo ~ bar 通用同胞选择器
  • foo, bar 并集选择器
  • foo.class 交集选择器

条件选择器

:lang 具体语言标记的元素

:dir() 指定编写方向的元素

:has 包括指定元素的元素

:is 指定条件的元素

:not 非指定条件的元素

:where 指定条件的元素

状态选择器

:active

:hover

:link

:visited

:focus

表单

:valid

:invalid

:checked switch

结构选择器

:root 文档的根元素

:empty 无子元素的元素

:nth-child(n) 元素中指定顺序索引的元素。odd/even

:nth-last-child(n) 倒序索引

:first-child 元素中为首的元素

:last-child 元素中为尾的元素

:only-child 仅有该元素的元素

属性选择器

attr\] 指定属性的元素 \[attr=val\] 属性等于指定值的元素 \[attr\*=val\] 包括指定元素的元素 \[attr\^=val\] 包括开头 \[attr$=val\] 包括结尾 #### 伪元素 ::before 在元素前加入 ::after 在元素后面加入 ::first-letter ::first-line ::backdrop 全屏模式的元素 (Document.fullscreen) ::placeholder ```html

helloluyiteather
luyi
``` ### flex 布局 flex -- flexible box 弹性布局。 display: flex #### 容器属性 * flex-direction 主轴的方向 * row -- default * column * flex-wrap 如果一个轴线排不下,如何换行 * nowrap -- default * wrap * wrap-reverse * flex-flow 是以上两者的简写 * justify-content * flex-start * flex-end * center * space-between * space-around * space-evenly * align-items * flex-start * flex-end * center * baseline 项目的第一行文字的基线对齐 * stretch 占满高度 #### 项目属性 * order * 属性定义项目的排列顺序,数值越小,排列越靠前,默认为0. * flex-grow * 放大比例,剩余空间。默认为0; * flex-shrink * 缩小比例,剩余空间,默认为1; * flex-basis * 定义在分配多余空间之前,项目占据的空间。 * flex * flex: 1 是什么意思 * 如果直接赋值数字,flex:1 -- flex: 1 1 0% * 如果给 auto, flex: auto -- flex: 1 1 auto * flex:none flex: 0 0 none ### 动画和变换 tranform, transition, animation #### transfrom 变换,2d 变换、3d 变化 * transfrom * flat * preserve-3d ##### translate 平移 translate(x, y) translate3d(x, y, z) -- translateZ(0) ##### scale 缩放 scale(x,y) scale3d(x, y, z) ##### skew 扭曲 ##### rotate 旋转 rotate() rotate(x, y, z, a) #### transition ##### transition-property * all * none * string ##### transition-duration 持续时间 ##### transition-timimg-function ##### transition-delay #### animation ##### name 有一个动画的名称 ##### duration 持续时间 ##### timimg-function ##### delay ##### 播放次数

相关推荐
许白掰32 分钟前
Linux入门篇学习——Linux 编写第一个自己的命令
linux·运维·数据库·嵌入式硬件·学习
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
生如夏花℡1 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
彤银浦1 小时前
Web学习笔记2
笔记·学习
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架