比较少见但很有用的css

一

<input type="text" readonly value="只读">用不能编辑

二

<input type="number" min="5" max="10">
```css
input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button{
        -webkit-appearance:none;
    }
    input:out-of-range{
        background: red;
    }
    input:in-range{
        font-size: 30px;
    }//范围内的样式

当input为number时，以上代码可以去掉上下箭头，在用户输入超出范围也会提示

三

<input type="text" required>

input:optional{
        border:1px yellow solid;
    }

选择没有required的input

四

p:only-of-type{
        background:yellow;
    }

当兄弟元素中只有自己一个p时（包括本身）的样式

五

:not(p) {
        border: #ff0000 1px solid;
    }

为非p设置样式

六

<input type="email">

input:invalid{
        font-size: 30px;
    }

当输入内容不合法时的样式

七

p{
    height: 20px;
}
p:empty{
    background: red;
}

当p为空时的样式

八

<div class="container">
        <div></div>
        <p class="stick">
            我是有粘性的
        </p>
    </div>

   div {
       height: 100px;
   }
   .container {
       height: 1000px;
       background: red;
   }
   .stick {
       position: sticky;
       top: 0;
   }

当向下滚动时，.stick就会粘在顶部，很适合导航栏的固定

九

<div>PKKJKlajsdfldlfjalfjlad</div>

div{
     font-variant: small-caps;
 }

效果：

十

<div>PKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjladPKKJKlajsdfldlfjalfjlad</div>

div{
    white-space:nowrap;
}

十一

还有以下些知识
text-align:justify两端对齐
background-attachment:fixed;背景不会随着滚动
text-transform:lowercase;
text-transform:capitalize;
text-indent:50px;第一行的缩进
div.ex1 {direction:rtl;}文字的居右
letter-spacing:-3px;文字间的距离
background-position:left center;背景图片的定位