css小知识点

---

一、css取消默认样式

1. 取消a标签的下划线：text-decoration:none;
2. 取消a标签的蓝色字体颜色：color: #333;
3. 取消h1-h6的默认粗体：font-weight:normal；
4. dl、dt、dd、ul、ol、li取消默认样式：list-style: none;
5. 取消表单的边框：border: none;

二、css3选择器

:target选择器：可用于当前活动的target元素的样式,从地址栏的 # 后链接到目标元素

1. 锚点：
   同一页面不同位置的跳转
   向跳到哪里给哪里添加ID选择器
   超链接a的href属性值写#ID名称

style:
a{
     text-decoration:none;
     height:20px;
     display:block;
     background:pink;
     position:relative;
   }
   span{
     display: block;
     background-color: paleturquoise;
     height: 0;
     overflow: hidden;
   }
   a:after {
     content:"";
     display: block;
     width: 0;
     position: absolute;
     right: 15px;
     top:10px;
   }
   :target span{
     height: 100px;
   }
html:
<nav id="navbar1">
   <a href="#navbar1">第一个</a>
   <span>那年长街春意正浓</span>
 </nav>
 <nav id="navbar2"><!-- href的值要与地址栏中 # 后的一致-->
   <a href="#navbar2">第二个</a>
   <span>策马同游烟雨如梦</span>
 </nav>
 <nav class="navbar3"> <!--nav标签使用class时:target无效 -->
   <a href="#navbar3">第三个</a>
   <span>风吹过暗香朦胧</span>
 </nav>

三、css3伪类选择器

nth-child选择器

四、WebKit的CSS扩展

1. css控制多行文字溢出：-webkit-line-clampCSS 属性可以将 块容器中的内容限制为指定的行数。在巨幅情况下，还需要设置overflow属性 hidden，否则，里面的内容不会被裁减，并且在内容显示为指定行数后还原显示省略号（省略号）。
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp

单行溢出：
width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行溢出：
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

---

总结

取消a标签的默认样式错写了list-style: none，哈哈还是一点一点慢慢记录吧。