css notes

CSS（层叠样式表）

简介

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。CSS节省了大量的工作。 样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。

伪类

简介

开头为冒号的关键字：
:pseudo-class-name

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

:ntd-child

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）。示例：

• 0n+3 或简单的 3 匹配第三个元素。
• 1n+0 或简单的 n 匹配每个元素。
• 2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
• 2n+1 匹配位置为 1、3、5、7…的元素。你可以使用关键字 odd 来替换此表达式。
• 3n+4 匹配位置为 4、7、10、13…的元素。

a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, …} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

示例：

// 1.偶数行
// .main-box div:nth-child(2n){
// 或者使用even
.main-box div:nth-child(even){
  background-color: gray;
}

// 2.奇数行
.main-box div:nth-child(2n+1){
// 或者使用odd
// .main-box div:nth-child(odd){
  background-color: gray;
}

// 3.匹配前2个
.main-box div:nth-child(-n+2){
// 或者使用odd
// .main-box div:nth-child(odd){
  background-color: gray;
}
// 4.匹配后2个
.main-box div:nth-child(n+5){
// 或者使用odd
// .main-box div:nth-child(odd){
  background-color: gray;
}

div内容超出显示省略号(-webkit-line-clamp)

    .feedback-content {
      padding: 10px 0 0 0;
      font-size: 13px;
      // font-size: 0.7rem;
      cursor: pointer;
      height: 60px;
      // 省略号配置
      width: 100%;
      overflow: hidden;
      display: -webkit-box; /*弹性伸缩盒子*/
      -webkit-box-orient: vertical; /*子元素垂直排列*/
      -webkit-line-clamp: 3; /*可以显示的行数，超出部分用...表示*/
      text-overflow: ellipsis; /*（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)*/
    }

-webkit-line-clamp
-webkit-line-clamp CSS 属性 可以把块容器中的内容限制为指定的行数.
它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果
在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).
当他应用于锚(anchor)元素时,截取动作可以发生在文本中间,而不必在
尾.
webkit-line-clamp