css - 合并两个相邻 sibling 的CSS

Question

有没有办法合并两个相邻 sibling 的CSS？我有一些由一些 wordpress 主题生成的代码，我想在其中使用 css 进行修改。

对于下面的代码，当类“myclass”也被赋予类名“john”时，我想隐藏 p“hide-me”

想要这样的东西:(.first-sibling .myclass.john) ~ (.second-sibling .hide-me) {display:none;}

<div class="parent">
  <div class="first-sibling">
    <p class="myclass john">Paragrah to determine the hiding of hide-me</p>    
  </div>

 <div class="second-sibling">
   <p class="hide-me">Hide this if myclass has a class named "john" </p>  
 </div>

谢谢

Answer 1

要使用当前的 HTML 实现您的要求，您需要使用 Javascript。您的另一个选择是，如果您可以将 class john 应用于 parrent，那么您可以拥有这样的 CSS，它会起作用:

.first-sibling.john + .second-sibling{
  display: none;
}

这是一个 JS fiddle https://jsfiddle.net/exk0ex8c/1/

您还可以进一步操作 HTML，使两个 p 元素位于同一个 div 下，然后进一步使用 CSS 选择器来完成此操作。您可以在此处查看所有 CSS 选择器的列表:http://www.w3schools.com/cssref/css_selectors.asp