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 ##### 播放次数

相关推荐
枷锁—sha4 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha6 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜22 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台39 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows