Question

我正在尝试将任何父div中的任何.header子div设置为'recipes'作为其类。

我知道我可以得到.category-recipes .header但是他们将会根据用户的位置改变一些父div。例如。 '类别页面上的类别 - 食谱，或单个帖子页面上的“单页食谱”。

这是页面的简化版本

<div class="category-recipes">

  <div class="otherdiv"></div>
  <div class="otherdiv"></div>
  <div class="header"></div>

</div> <!-- end of category -->

我尝试了它并没有用。

div[class*="recipes"] .header{
  margin-bottom: 40px;
}

是否可以使用这种选择器让孩子或父母进入？

Answer 1

这有效：https://jsfiddle.net/09zkqatx/

基本上，我所做的与你描述的方式完全相同。

div div {
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

div[class*="recipes"] .header{
  margin-left: 40px;
}

Answer 2

div[class*="recipes"] div[class*="header"]{
  margin-bottom: 40px;
}

脱离我从https://stackoverflow.com/a/2094554/4871483

得到的东西

你可以使用JavaScript并选择这样的

var parDivs = document.getElementsByClassName("category-recipes");
for(parDiv in parDivs){
    var child = parDiv.children[2];
}

并改变JavaScript的风格

Answer 3

你可以达到你想要的 - 使用单独的公共类来制作＆＃39;食谱＆＃39; 例如，

<div class="category-recipes recipes">
  <div class="otherdiv"></div>
  <div class="otherdiv"></div>
  <div class="header"></div>
</div> <!-- end of category -->

还有您的单页食谱＆＃39;

<div class="single-page-recipes recipes">
  <div class="otherdiv"></div>
  <div class="otherdiv"></div>
  <div class="header"></div>
</div> <!-- end of single page -->

对于上述代码，请使用css -

div.recipes > div.header {
    margin-bottom: 40px;
}

OR ，如果您无法添加公共类，则可以使用小型JS代码段来实现此目标 -

var el = document.getElementsByClassName('header')[0];
// first check if the parent node has class with text recipes
if(el.parentNode.classList.toString().match(/recipes/)) {
    //get the first child with class header and then style it
    el.style.marginBottom = "40px"; 
}

查看JSFiddle - http://jsfiddle.net/xLzagpmv/4/

使用css属性值选择器选择子元素

3 个答案: