E ~ F

匹配前面有个E元素的F元素。(来源: W3C)

HTML:

  1. <div>
  2. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  3. <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit</blockquote>
  4. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  5. <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit</blockquote>
  6. </div>

CSS:

  1. p{font-style:normal}
  2. blockquote{margin:5px;padding:5px;border:1px solid #ccc}
  3. p ~ blockquote{font-style:italic}

输出:

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

sss
Lorem ipsum dolor sit amet, consectetur adipisicing elit

在这个例子中,第二个引用块将会以斜体显示。(第二个blockquote前面有个P元素)