小编tra*_*ism的帖子

CSS - 无序列表中项目符号之间的垂直线

我如何在无序列表中绘制子弹之间的垂直线,如下所示:

在此输入图像描述

请注意,该行在最后一个列表项目符号处停止.我正在使用list-style:none;和图像作为子弹.HTML看起来像这样:

<ul class="experiences">

  <!-- Experience -->
  <li class="green">
    <div class="where">New York Times</div>
    <h3 class="what green">Senior Online Editor</h3>
    <div class="when">2012 - Present</div>

    <p class="description">Jelly-o pie chocolate cake...</p>
   </li>

   ...
Run Code Online (Sandbox Code Playgroud)

要求的CSS代码:

/* Experiences */
ul.experiences {
    padding-left: 15px;
    margin-top: -1px;
}
ul.experiences li {
    padding-left: 33px;
    margin-bottom: 2.5em;
    list-style: none;
    background: url('../img/misc/list-bullet-darkgray.png') no-repeat;
}
ul.experiences li.green {
    background: url('../img/misc/list-bullet-green.png') no-repeat;
}
ul.experiences li.blue {
    background: url('../img/misc/list-bullet-blue.png') no-repeat;
}
ul.experiences li.pink {
    background: url('../img/misc/list-bullet-pink.png') no-repeat;
}
.where {
    font-size: 1.2857em; …
Run Code Online (Sandbox Code Playgroud)

css list html-lists

20
推荐指数
2
解决办法
2万
查看次数

CSS:将 CSS 样式应用于除 Material Angular 之外的所有内容

如何应用 CSS 样式(justify-content: centerbox-sizing: border-box所有子元素和孙元素,除了 Material 和以 <mat 开头的任何元素?是否有一种简单的方法可以在 CSS/SCSS 中进行文本搜索?

我们将有 500 多个元素,需要有效地应用它。注意到进入 Material 的子元素内部元素,并应用 border-box 或 center 会破坏它的 display 。

我可以申请 mat 关键字搜索吗?有许多 mat div 元素,mat-input, mat-select, mat-tab, etc

尝试应用 css 开始选择器,

https://www.w3schools.com/css/css_attribute_selectors.asp

.container *not(%.mat) {
    box-sizing: border-box
}


<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input><mat-input>
Run Code Online (Sandbox Code Playgroud)

html css sass angular-material angular

4
推荐指数
1
解决办法
291
查看次数

包装div的反增量

我想在有序列表上使用反增量.我希望每个ol人继续前一次计数.

当我在ols 周围没有单独的包装div时,它可以正常工作.请注意,它适用ol于同一个包装div中的第二个,但是对于ol具有单独包装div 的下两个s,它会停止工作:

http://jsfiddle.net/graphic_dev/Lsn49t16/1/

HTML

<div class="wrapper">
    <ol class="split start">
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ol>

    <ol class="split">
      <li>Sit</li>
      <li>Amet</li>
    </ol>
</div>

<div class="wrapper">
    <!-- It stops working here -->
    <ol class="split">
      <li>Consectetur</li>
      <li>Adipiscing </li>
    </ol>

    <ol class="split">
      <li>Elit</li>
      <li>Sed</li>
    </ol>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.start {
    counter-reset: mycounter;
}

.split {
    list-style-type: none;
}

.split li:before {
    counter-increment: mycounter;
    content: counter(mycounter, upper-alpha);
}
Run Code Online (Sandbox Code Playgroud)

如何让它继续计算ol?我需要包装div

html css css-counter

2
推荐指数
1
解决办法
776
查看次数

标签 统计

css ×3

html ×2

angular ×1

angular-material ×1

css-counter ×1

html-lists ×1

list ×1

sass ×1