小编VXp*_*VXp的帖子

.mydiv {
  display: table;
  table-layout: fixed;
  width: auto;
  max-width: 448px;
  height: 56px;
}

.mydiv span {
  display: table-cell;
  vertical-align: middle; 
  overflow: hidden;
}

<div class="mydiv">
  <span></span>
</div>

function toggleClass() {
  var box = document.getElementById('box');
  box.className = box.className.match(/active/) ? '' : 'active';
}

#box {
  width:200px;
  height:200px;
  background-color:#999;
  opacity:0;
  transform:translate(0,30px);
  transition:background-color 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}
#box.active {
  opacity:1;
  transform:translate(0,0);
}
img {
  width:100%;
  display:block;
  filter: grayscale(100%) brightness(120%);
  mix-blend-mode:multiply;
}
#box:hover {
  background-color:red;
}

<button type="button" onClick="toggleClass()">Toggle Image</button>
<div id="box" class="">
  <img src="https://i.stack.imgur.com/GwYD1.jpg" alt="">
</div>

.parent {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  box-sizing: border-box;
  background-color: orange;
}

.left-line {
  width: 10px;
  height: 100%;
  background-color: red;
}

.content {
  flex: 1;
  padding: 0 0 0 14px;
  letter-spacing: 1px;
  line-height: 18px;
}

<div class="parent">
  <div class="left-line">s</div>
  <div class="content">
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text of the printing...</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>

.dots-cont {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.dot {
  width: 12px;
  height: 12px;
  background: #22303e;
  display: inline-block;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
  margin: 0px 2.5px;
  position: relative;
}

.dots-cont:hover > .dot {
  position: relative;
  bottom: 0px;
  animation: jump 1s infinite;
}

.dots-cont .dot-1{
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.dots-cont .dot-2{
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.dots-cont .dot-3{
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

@keyframes jump {
0%   {bottom: 0px;}
20%  {bottom: 5px;}
40%  {bottom: 0px;}
} …

.outer {
  overflow-x: scroll;
  width: 100%;
}

.inner {
  width: 25%;
  float: left;
}

<div class="outer">
  <h1>Header Title</h1>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
  <div class="inner">
  </div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: 1;
}

<div class="wrapper">
  <div class="cent">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: …

p {background:green}

#test p:not([class]) {
  background: red;
  color: #fff;
}

<div id="test">
  <p>This should be red</p>
  <p class="abc">This should be green</p>
  <p class="newname">This should be green</p>
  <p class="">This should be red</p>
  <p class="anothername">This should be green</p>
  <p>This should be red</p>
  <p class="">This should be red</p>
</div>

p {
  display: inline-block;
  width: 30%;
}

p:nth-child(2n+0) {
  background: red;
}

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>