1 | pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all |
伪类 | 例子 | 例子描述 |
---|---|---|
:active | a:active | 选择活动链接 |
:any-link | a:anylink | 选择所有带有 href 属性的 <a> 或 <area> 元素。 |
:auto-fill | input:autofill | 选择所有由浏览器自动填充值的 <input> 元素。 |
:checked | option:checked | 匹配所有被选中的 <input> 或 <option> 元素。 |
:default | input:default | 选择一组相关元素中的默认表单元素。 |
:defined | :defined | 选择所有已定义的元素(标准或自定义元素)。 |
:dir() | :dir(rtl) | 选择具有指定文本方向的元素。 |
:disabled | option:disabled | 选择所有被禁用的元素,常用于表单元素。 |
:empty | div:empty | 选择所有没有子元素(包括文本节点)的元素。 |
:enabled | input:enabled | 选择所有启用的元素,常用于表单元素。 |
:first | @page :first | 表示打印文档的第一页(与 @page 规则一起使用)。 |
:first-child | p:first-child | 选择作为其父元素第一个子元素的元素(在一组兄弟元素中)。 |
:first-of-type | li:first-of-type | 选择一组兄弟元素中第一个特定类型的元素。 |
:focus | select:focus | 选择获得焦点的元素,常用于表单元素。 |
:focus-visible | button:focus-visible | 选择获得焦点的元素(仅在通过键盘而非鼠标聚焦时应用焦点样式)。 |
:focus-within | form:focus-within | 匹配元素或其任何后代获得焦点的元素。 |
:fullscreen | :fullscreen | 选择当前处于全屏模式的元素。 |
:has() | h2:has(+p) | 选择紧接在 <p> 元素后的 <h2> 元素,并将样式应用于 <h2>。 |
:hover | a:hover | 选择鼠标悬停的元素。 |
:in-range | input:in-range | 选择值在指定范围内的 <input> 元素。 |
:indeterminate | input:indeterminate | 选择处于不确定状态的表单元素。 |
:invalid | input:invalid | 选择无效的表单元素。 |
:is() | :is(ul, ol) | 选择所有 <ul> 和 <ol> 元素。 |
:lang() | p:lang(it) | 选择 lang 属性为 "it"(意大利语)的 <p> 元素。 |
:last-child | li:last-child | 选择作为其父元素最后一个子元素的 <li> 元素。 |
:last-of-type | p:last-of-type | 选择作为其父元素最后一个 <p> 元素的 <p> 元素。 |
:left | @page :left | 表示打印文档的所有左侧页面(与 @page 规则一起使用)。 |
:link | a:link | 选择所有未访问的链接。 |
:modal | :modal | 选择处于模态状态的元素。 |
:not() | :not(p) | 选择所有不是 <p> 元素的元素。 |
:nth-child() | p:nth-child(2) | 选择作为其父元素第二个子元素的 <p> 元素。 |
:nth-last-child() | p:nth-last-child(2) | 选择作为其父元素倒数第二个子元素的 <p> 元素。 |
:nth-last-of-type() | p:nth-last-of-type(2) | 选择作为其父元素倒数第二个 <p> 元素的 <p> 元素。 |
:nth-of-type() | p:nth-of-type(2) | 选择作为其父元素第二个 <p> 元素的 <p> 元素。 |
:only-child | p:only-child | 选择作为其父元素唯一子元素的 <p> 元素。 |
:only-of-type | p:only-of-type | 选择作为其父元素唯一 <p> 元素的 <p> 元素。 |
:optional | textarea:optional | 选择没有 required 属性的 <input>、<select> 或 <textarea> 元素。 |
:out-of-range | input:out-of-range | 选择值超出指定范围的 <input> 元素。 |
:placeholder-shown | input:placeholder-shown | 选择当前显示占位符文本的 <input> 或 <textarea> 元素。 |
:popover-open | :popover-open | 选择处于显示弹出状态的元素。 |
:read-only | input:read-only | 选择带有 readonly 属性的输入元素。 |
:read-write | input:read-write | 选择可编辑的输入元素。 |
:required | input:required | 选择带有 required 属性的输入元素。 |
:right | @page :right | 表示打印文档的所有右侧页面(与 @page 规则一起使用)。 |
:root | :root | 选择文档的根元素。 |
:scope | :scope | 选择作为选择器匹配参考点或范围的元素。 |
:state() | :state() | 选择具有指定自定义状态的自定义元素。 |
:target | :target | 选择当前活动的目标元素。 |
:user-invalid | :user-invalid | 选择具有无效值的表单元素(在用户与其交互后)。 |
:user-valid | :user-valid | 选择具有有效值的表单元素(在用户与其交互后)。 |
:valid | input:valid | 选择所有具有有效值的输入元素。 |
:visited | a:visited | 选择所有已访问的链接。 |
:where() | :where(ol, ul) | 选择所有 <ul> 和 <ol> 元素。 |
1 2 3 4 5 | .deal_sell 4 input{ text-align : right ; color : #555 ; font-size : 0.92 rem; } .deal_sell 4 input::-webkit-input-placeholder{ font-size : 0.88 rem; color : #cccccc ;} .deal_sell 4 input:-moz-placeholder{ font-size : 0.88 rem; color : #cccccc ;} .deal_sell 4 input::-moz-placeholder{ font-size : 0.88 rem; color : #cccccc ;} .deal_sell 4 input:-ms-input-placeholder{ font-size : 0.88 rem; color : #cccccc ;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < video id = "video" src = "video.mp4" controls = "true" poster = "images.jpg" // 视频封面 preload = "auto" webkit-playsinline = "true" /* 这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/ playsinline = "true" // IOS微信浏览器支持小窗内播放 x-webkit-airplay = "allow" x5-video-player-type = "h5" // 启用H5播放器,是wechat安卓版特性 x5-video-player-fullscreen = "true" // 全屏设置,设置为 true 是防止横屏 x5-video-orientation = "portraint" // 播放器的方向, landscape横屏,portraint竖屏,默认值为竖屏 style = "object-fit:fill" > </ video > |
flex-direction
row:默认值,主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在有段
column:主轴为垂直方向,起点在上方
column-reverse:主轴为垂直方向,起点在下方
flex-wrap
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
justify-content
flex-start:默认值左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等。
align-items
flex-start:交叉轴的起点对齐
flex-end:价差周的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch:默认值,如果项目未设置豪赌或者auto,将占满整个容器的高度
align-content
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与检查周两端对齐,轴线之间的间隔平均分布
space-around:没跟轴线两侧的间隔都相等。
strech:默认值轴线占满整个交叉轴
CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色、透明度、元素大小添加动画。目前,你不能为渐变添加动画,但下面的代码可能有帮助。它通过改变背景位置,让它看起来有动画效果。
1 2 3 4 5 6 7 8 9 | button { background-image : linear-gradient( #5187c4 , #1c2f45 ); background- size : auto 200% ; background-position : 0 100% ; transition: background-position 0.5 s; } button:hover { background-position : 0 0 ; } |
1 | < input type = "text" class = "form-control" id = "assetId" onkeyup = "this.value=this.value.replace(/[, ]/g,'')" ></ input > |
1:在input框里面输入编号的过程中,出现空格,自动消除
2:input首尾出现空格,自动消除
3:复制粘贴的文本里面出现空格,自动消除