我的记事本

成长中的全栈开发者

分类目录归档:Div+CSS
  • CSS3 超实用属性:pointer-events

    1
    pointer-events: auto none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all
    本条目发布于2025-06-17。属于Div+CSS分类。
  • CSS 伪类参考手册

    伪类例子例子描述
    :activea:active选择活动链接
    :any-linka:anylink选择所有带有 href 属性的 <a> 或 <area> 元素。
    :auto-fillinput:autofill选择所有由浏览器自动填充值的 <input> 元素。
    :checkedoption:checked匹配所有被选中的 <input> 或 <option> 元素。
    :defaultinput:default选择一组相关元素中的默认表单元素。
    :defined:defined选择所有已定义的元素(标准或自定义元素)。
    :dir():dir(rtl)选择具有指定文本方向的元素。
    :disabledoption:disabled选择所有被禁用的元素,常用于表单元素。
    :emptydiv:empty选择所有没有子元素(包括文本节点)的元素。
    :enabledinput:enabled选择所有启用的元素,常用于表单元素。
    :first@page :first表示打印文档的第一页(与 @page 规则一起使用)。
    :first-childp:first-child选择作为其父元素第一个子元素的元素(在一组兄弟元素中)。
    :first-of-typeli:first-of-type选择一组兄弟元素中第一个特定类型的元素。
    :focusselect:focus选择获得焦点的元素,常用于表单元素。
    :focus-visiblebutton:focus-visible选择获得焦点的元素(仅在通过键盘而非鼠标聚焦时应用焦点样式)。
    :focus-withinform:focus-within匹配元素或其任何后代获得焦点的元素。
    :fullscreen:fullscreen选择当前处于全屏模式的元素。
    :has()h2:has(+p)选择紧接在 <p> 元素后的 <h2> 元素,并将样式应用于 <h2>。
    :hovera:hover选择鼠标悬停的元素。
    :in-rangeinput:in-range选择值在指定范围内的 <input> 元素。
    :indeterminateinput:indeterminate选择处于不确定状态的表单元素。
    :invalidinput:invalid选择无效的表单元素。
    :is():is(ul, ol)选择所有 <ul> 和 <ol> 元素。
    :lang()p:lang(it)选择 lang 属性为 "it"(意大利语)的 <p> 元素。
    :last-childli:last-child选择作为其父元素最后一个子元素的 <li> 元素。
    :last-of-typep:last-of-type选择作为其父元素最后一个 <p> 元素的 <p> 元素。
    :left@page :left表示打印文档的所有左侧页面(与 @page 规则一起使用)。
    :linka: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-childp:only-child选择作为其父元素唯一子元素的 <p> 元素。
    :only-of-typep:only-of-type选择作为其父元素唯一 <p> 元素的 <p> 元素。
    :optionaltextarea:optional选择没有 required 属性的 <input>、<select> 或 <textarea> 元素。
    :out-of-rangeinput:out-of-range选择值超出指定范围的 <input> 元素。
    :placeholder-showninput:placeholder-shown选择当前显示占位符文本的 <input> 或 <textarea> 元素。
    :popover-open:popover-open选择处于显示弹出状态的元素。
    :read-onlyinput:read-only选择带有 readonly 属性的输入元素。
    :read-writeinput:read-write选择可编辑的输入元素。
    :requiredinput:required选择带有 required 属性的输入元素。
    :right@page :right表示打印文档的所有右侧页面(与 @page 规则一起使用)。
    :root:root选择文档的根元素。
    :scope:scope选择作为选择器匹配参考点或范围的元素。
    :state():state()选择具有指定自定义状态的自定义元素。
    :target:target选择当前活动的目标元素。
    :user-invalid:user-invalid选择具有无效值的表单元素(在用户与其交互后)。
    :user-valid:user-valid选择具有有效值的表单元素(在用户与其交互后)。
    :validinput:valid选择所有具有有效值的输入元素。
    :visiteda:visited选择所有已访问的链接。
    :where():where(ol, ul)选择所有 <ul> 和 <ol> 元素。
    本条目发布于2025-06-08。属于Div+CSS分类。
  • html 单选框placeholder及字体颜色设置

    1
    2
    3
    4
    5
    .deal_sell4 input{  text-alignrightcolor#555font-size0.92rem; }
    .deal_sell4 input::-webkit-input-placeholder{ font-size0.88rem; color#cccccc;}
    .deal_sell4 input:-moz-placeholder{ font-size0.88rem; color#cccccc;}
    .deal_sell4 input::-moz-placeholder{ font-size0.88rem; color#cccccc;}
    .deal_sell4 input:-ms-input-placeholder{ font-size0.88rem; color#cccccc;}
    本条目发布于2025-04-21。属于Div+CSS分类。
  • video 配置详细参数

    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>
    本条目发布于2023-09-30。属于Div+CSS分类。
  • Flex布局详解

    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:默认值轴线占满整个交叉轴

    本条目发布于2022-07-22。属于Div+CSS分类。
  • 背景渐变动画

    CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色、透明度、元素大小添加动画。目前,你不能为渐变添加动画,但下面的代码可能有帮助。它通过改变背景位置,让它看起来有动画效果。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    button {
        background-image: linear-gradient(#5187c4#1c2f45);
        background-sizeauto 200%;
        background-position0 100%;
        transition: background-position 0.5s;
    }    
    button:hover {
        background-position0 0;
    }
    本条目发布于2020-05-31。属于Div+CSS分类。
  • input输入框自动消除空格

    1
    <input type="text" class="form-control" id="assetId" onkeyup="this.value=this.value.replace(/[, ]/g,'')"></input>

    1:在input框里面输入编号的过程中,出现空格,自动消除

    2:input首尾出现空格,自动消除

    3:复制粘贴的文本里面出现空格,自动消除

    本条目发布于2020-05-31。属于Div+CSS分类。
[ZY:PageStyle]