1.控制单行文本与多行文本超出显示…

单行文本：

  1. overflow:hidden;
  2. text-overflow:ellipsis;
  3. white-space:nowrap;

多行文本：

  1. overflow: hidden;
  2. display: -webkit-box;
  3. -webkit-box-orient: vertical;
  4. -webkit-line-clamp: 2;

2.禁止文本选择

  1. <p>你可以选择我。</p>
  2. <p class="unselectable">你不能选择我！</p>
  7. .unselectable {
  8.   user-select: none;
  9. }

3.计数器(ul，li的嵌套)

image.png

  1. <ul>
  2.   <li>List item</li>
  3.   <li>List item</li>
  4.   <li>List item
  5.     <ul>
  6.       <li>List item</li>
  7.       <li>List item</li>
  8.       <li>List item</li>
  9.     </ul>
  10.   </li>
  11. </ul>
  15. ul {
  16.   counter-reset: counter;
  17. }
  18. li::before {
  19.   counter-increment: counter;
  20.   content: counters(counter, '.') ' ';
  21. }

4.当标签没有默认样式时，为其设置默认样式

  1. //当a标签没有class类时，设置下面的样式
  2. a[href]:not([class]){
  3.   color: #4f4f34;
  4.   text-decoration: underline;
  5. }

5.使用min-height设置如浏览器右边内容较多时的滑块样式

  1. .slider{
  2.   max-height: 200px;
  3.   overflow-y : hidden;
  4.   width: 300px;
  5. }
  7. .slider:hover{
  8.   max-height: 600px;
  9.   overflow-y: scroll;
  10. }

6.迟钝的猫头鹰选择器

  1. //
  2. *+*{margin-top:10px;}

7.点击事件,点击元素时的交互行为(元素变灰并且不能再次点击了)。

  1. .button-disabled{
  2.   opacity: .5;
  3.   pointer-events: none;
  4. }

pointer-events：auto| none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
其中none值能阻止点击、状态变化和鼠标指针变化,意思是元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
除了auto和none,其他值只能应用在SVG上
兼容性：红色不兼容，绿色兼容
image.png

8.使用：not排除法

大多写法：

  1. / *添加边框* /
  2.  .nav  li {
  3.    border-right： 1 px  solid  ＃666 ;
  4. }
  6. / *删除边框* /
  7.  .nav  li ：last-child {
  8.    border-right： none ;
  9. }

简单写法：

  1. .nav  li ：not（：last-child）{
  2.    border-right：1 px  solid  ＃666 ;
  3. }

9.添加line-height到body，文本元素继承

  1. body{line-height:1.5}

30秒学css

JSON在线解析

3种纯css实现彩虹渐变圆环方法

开发者手册

移动端总结