整段缩进

p {
  margin-left: 100px;
}

避免锚点跳转过远

#target {
   content: "";
   display: block;
   height: 70px;
   margin: -70px 0 0;
}

移动元素位置

#target {
  position: relative;
  left: 30px;
  top: 20px;
}

改变<br>的高度

br {
    display: block;
    content: " ";
    margin-bottom: 15px;
}

:not()选择器：防止选定特定元素

/* every section without class - but won't select Section C */
#not_selector> section:not([class]) {
  color: red;
}

/* selects only Section C */
#not_selector> section[class=""] { 
  font-weight: bold;
}

<div id="not_selector">
  <section>Section A</section>
  <section class="special">Section B</section>
  <section class="">Section C</section>
</div>

Section A

Section B

Section C

在blockquote内插入浮动图片（文字环绕）

img.img_right {
  margin-left: 10px;
  float: right;
}

blockquote {
  display: flow-root
}

<blockquote>
  <img src="/img/cover-bag-end.jpg" style="max-width: 200px;" 
       class="img_right"/>
  <span>
  In a hole in the ground there lived a hobbit. ... 
  and that means comfort
  </span>
</blockquote>

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hold, and that means comfort.

去掉目录的bullets

#TOC li {
    list-style-type: none;
}

自动编号

body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}

h2:before {counter-increment: h2; content: counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}

h2.nocount:before, h3.nocount:before, h4.nocount:before { 
  content: ""; counter-increment: none } 

临近元素选择器 (Adjacent Sibling Combinator)

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element

#example-sibling li.hobbit + li {
    color: blue;
}

<div id="example-sibling">
<ul>
  <li class='hobbit'>Frodo</li>
  <li class='hobbit'>Sam</li>
  <li class='elf'>Legolas</li>
  <li class='dwarf'>Gimli</li>
</ul>
</div>

• Frodo
• Sam
• Legolas
• Gimli

Bootstrap Collapse: 避免收起/展开时跳动

去掉.collapse的上下 padding, 将 padding 转移给子元素。例：

图片悬挂

#scroll-box-exp {
    position: relative;
}

#scroll-box-exp div.figure {
    display: block;
    background: white;
    position: -webkit-sticky;
    position: sticky;
    top: 3.5em;
    padding: 1em 0 .5em 0;
    margin-bottom: .5em;
    z-index: 4;
}

<div id="scroll-box-exp">
  <div class="figure">
    <img src="/img/cover-bag-end.jpg"/>
  </div>
  <p>In a hole in the ground there lived a hobbit...</p>
  <p>It had a perfectly round door like a porthole, ...</p>
</div>

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hold, and that means comfort.

It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with panelled walls, and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats - the hobbit was fond of visitors…

overflow-x, overflow-y

overflow-x, overflow-y 设置成 scroll 时，就算还未 overflow 也会显示 scroll bar; 设置成 auto 可以避免这个问题。

• overflow-x: scroll

  In a hole in the ground there lived a hobbit.

<div style='width: 300px; border: 1px dashed black'>
<p style='overflow-x: scroll; width: 200px; font-size: .9em; background: #ddd'>
  In a hole in the ground there lived a hobbit.
</p>
</div>

• overflow-x: auto

  In a hole in the ground there lived a hobbit.

<div style='width: 300px; border: 1px dashed black'>
<p style='overflow-x: auto; width: 200px; font-size: .9em; background: #ddd'>
  In a hole in the ground there lived a hobbit.
</p>
</div>

box-shadow

box-shadow: h-offset v-offset blur spread color;

Example: https://www.cssmatic.com/box-shadow