css的奇技淫巧

发表于 更新于 分类于

选择同级元素中第一个拥有某个类名的元素

有如下 dom 结构,div子元素的类名是会通过js进行动态的增加、移除一个或多个类名demo

1
2
3
4
5
6
7
<div>
  <p></p>
  <span></span>
  <p></p>
  <p></p>
  <span></span>
</div>

要选择第一个demo类名的元素

1
2
3
4
5
6
7
div .demo {
    /* 第一个demo类名的样式 */
}

div .demo ~ .demo {
    /* 其他demo类名的样式 */
}

强大的属性选择器[attributes]

  • [class]

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 拥有类名的样式 */
    [class] {
      color: red;
    }
    :not([class]) {
      color: green;
    }

    <p class="demo">这个p元素的文本是红色的</p>
    <p class="">这个p元素的文本是红色的</p>
    <p>这个p元素的文本是绿色的</p>

  • [class*="demo"]

    1
    2
    3
    4
    5
    6
    /* 拥有类名demo的样式 */
    [class*="demo"] {
      color: red;
    }

    <p class="demo">这个p元素的文本是红色的</p>

  • [class^="demo"]

    1
    2
    3
    4
    5
    6
    /* 类名以demo开头的 */
    [class^="demo"] {
      color: red;
    }

    <p class="demo-example">这个p元素的文本是红色的</p>

  • [class$="demo"]

    1
    2
    3
    4
    5
    6
    /* 类名以demo结尾的 */
    [class$="demo"] {
      color: red;
    }

    <p class="example-demo">这个p元素的文本是红色的</p>

单行、多行文本溢出省略号

  1. 单行文本

    1
    2
    3
    4
    5
    {
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }

  2. 多行文本

    1
    2
    3
    4
    5
    6
    {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }