Question

我需要在此结构中仅为第一个行类应用样式，是否有任何解决方案：

＆＃13;

.headercontainer .line > *:first-child {
  border: 3px solid yellow;
}

＆＃13;

<div class="headercontainer">
  <div class="header">step1</div>
  <div class="line"></div>
  <div class="header">step2</div>
  <div class="line"></div>
</div>

＆＃13;

我在这里错过的任何事情，请建议。

Answer 1

不是真的。但是，您可以使用一个小技巧作为解决方法：为所有这些元素设置边框，然后将边框重置为第一个之后的所有div的默认值。

.headercontainer .line {
  border: 3px solid yellow;
}

.headercontainer .line ~ .line {
  border: none;
}

<div class="headercontainer">
  <div class="header">step1</div>
  <div class="line"></div>

  <div class="header">step2</div>
  <div class="line"></div>
</div>

希望这有帮助！

另一方面，.line元素的目的是什么？如果他们唯一的目的是作为一条线，那么答案就是：不要。扔掉它们并在第一个.header上放置一个底部边框。这样可以简化HTML和CSS。

.headercontainer .header:first-child {
  border-bottom: 6px solid yellow;
}

<div class="headercontainer">
  <div class="header">step1</div>

  <div class="header">step2</div>
</div>

Answer 2

Css没有first-of-class选择器来选择给定DOM元素的第一个类。在你的情况下，班级订单将保持不变。然后你可以申请

.headercontainer .header:first-child + .line {
   color:red;
}

.headercontainer .header:first-child + .line {
   color: red;
}

/* or:
.headercontainer .header:first-of-type + .line {
   color: red;
}
*/

<div class="headercontainer">
  <div class="header">step1</div>
  <div class="line">red</div>

  <div class="header">step2</div>
  <div class="line">black</div>
</div>

Answer 3

没有。但是，如果您不为'line'元素使用不同的HTML元素。你可以使用:first-of-type

.headercontainer p:first-of-type { 
       border:	3px solid yellow;
    }

 <div class="headercontainer">
        <div class="header">step1</div>
        <p class="line">here</p>
        <div class="header">step2</div>
        <p class="line">there</p>
    </div>

<强> Demo

first-of-type拥有良好的浏览器支持。不幸的是，CSS没有提供:first-of-class选择器。

Answer 4

另一种方法是使用order 属性，它使用 Flexbox / Grid ：< / p>

＆＃13;

.headercontainer {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
}

.headercontainer .line:first-child {
  border: 3px solid yellow;
}

/* or:
.headercontainer .line:first-of-type {
  border: 3px solid yellow;
}
*/

.order {
  order: -1; /* puts the flex-item back to its desired position or above other siblings, because the default value of the "order" property is "0" */
}

＆＃13;

<div class="headercontainer">
  <div class="line">border</div> <!-- needs to be positioned above other siblings in the DOM -->
  <div class="header order">step1</div>
  <div class="header">step2</div>
  <div class="line">no border</div>
</div>

＆＃13;

Answer 5

其他答案已经具体说明了如何编写您要求的选择器，但这并不是最佳实践。

为了使CSS和HTML更易于维护，并且CSS Selector Engine的工作更轻松，最好不要为要素化的元素添加新类。

这样可以更轻松地修改CSS，并使HTML更加明显。

是否有任何css选择器用于以下方案

5 个答案: