第n个子级高级逻辑选择

Question

我提前道歉，我在这件事上没有取得很好的进展，所以我没有 Fiddle 或 Codepen。

我确实希望实现以下布局（如下）。

我唯一的问题是如何选择一行中的两个元素，然后选择一行中的另外两个元素，以便我可以相应地设置它们的样式。请记住，第一个孩子需要单独选择。

最后一张图片只是以水平顺序显示它们，以便更容易理解我希望实现的目标:)

最后一点是，如果您想知道的话，我将使用 Packery 来实现自鸣得意的配合

谢谢！

Answer 1

根据 MDN 文档：

:nth-child(an+b)

CSS 伪类匹配文档树中在其之前具有

an+b-1

同级元素（对于给定的

n

正值或零值）并且具有父元素的元素。更简单地说，选择器匹配多个子元素，这些子元素在一系列子元素中的数字位置与模式

an+b

匹配。

因此，要匹配蓝色方块（每个四联体的第一个和第四个），您可以使用以下命令：

:nth-child(4n+1), :nth-child(4n)

对于橙色矩形（每个四联体的第二个和第三个）：

:nth-child(4n+2), :nth-child(4n+3) { ... }

还要确保在

:nth-child

之前添加选择器以使其更加具体。例如，使用

div:nth-child(...)

（参见下面的示例）或类/ID 选择器以获得最准确的结果。

---

工作示例：

div {
  width: 100px;
  display: inline-block;
  margin: 10px;
  vertical-align: top;
}
div:nth-child(4n+1), div:nth-child(4n) {
  height: 150px;
  background-color: blue;
}
div:nth-child(4n+2), div:nth-child(4n+3) {
  height: 100px;
  background-color: orange;
}

<span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</span>

---

另请参阅 W3Schools.com 和 CSSTricks 了解更多信息。

Answer 2

我知道的唯一方法是使用两次同一个类来“欺骗”CSS：

div:nth-child(4n){background-color:red;}
div:nth-child(4n+1){background-color:red;}

JSF 在这里

希望这有帮助:)

Answer 3

为了用 CSS 做高级事情，我使用了 Javascript 的力量！

您可以使用 %（模）、比较、循环和布尔逻辑 (&& | | ) 等高级数学来定位精确的 DOM 元素。

CSS 有一个名为 :is(.class) 的伪选择器。它实际上意味着 “也是”或“包含” 该类，因为您可以添加许多类，它只关心 .class 是否存在于元素上。

    <div class="one" >...
    <div class="one two three" >...

     CSS:

     div.one{ ... }
     div.one.two{ ... }

     /* Here is the nice selector: */
     div.one:is(.three){ /* .three properties */}

不要在其中使用引号作为jquery或queryselector，记住它是CSS，请参阅示例：

  .something:is(.myclass){ /* <-- without quotes */
     color:....
     background:...
  }

在 javascript 中，使用 DOM 编程、在父子节点上循环等来添加

css 类 来“标记”所需的元素。

魔法就会出现！

 var i=0, currentClass='', elem, begin=27, end=50;
 
 elem = document.querySelector('div#parent_of_targets');

 for( a of elem.childNodes ){

   if( ( i >= begin && i < end ) ||
        i >= 200 + begin && i < 200 + end ) ){

      // Check to add a new class:
      currentClass = a.getAttribute('class');

      if( !currentClass.match(/\.amark/) ){
         // With space ---v because is adding.
         currentClass += " amark"; // no period here!!
       } else {
         // It has no CSS class:
         currentClass = 'amark';
       }
       a.setAttribute('class', currentClass);
    }
   i++;
 }

// 在 CSS 中：

    div.item :is(.amark){
       color: white;
       background: #f00;            
    }