CSS 伪元素 - 仅针对当前元素，而不是后代答案

【问题标题】：CSS pseudo element - target only current element, not descendantCSS 伪元素 - 仅针对当前元素，而不是后代
【发布时间】：2021-03-03 11:35:07
【问题描述】：

如何定位当前元素的伪元素而不是子元素的伪元素？

html结构：

<label
   <input/>
</label>

css 代码：

.main-0-6-18 >input::before {
    /* the pseudo on children */

    display: block;
    height: 100%;
    width: 100%;
    content: "";
    /* blah-blah */
}

.main-0-6-18::before {
    /* the pseudo on parent */

    /* affects on children too */

    content: " ";
    display: inline;
    width: 0;
    overflow: hidden;
    visibility: hidden;
}

我尝试使用.main-0-6-18>::before，但它不起作用。

【问题讨论】：

不要在两者上使用相同的类
哦，是的，我忘了删除关于儿童的课程。谢谢
您可能会发现浏览器在输入元素之前没有“允许”伪元素。
我在输入元素上设置了外观：无，因此它的行为类似于常规 div/span。

标签： css selector pseudo-element

【解决方案1】：

正如the documentation 所说：

在 CSS 中，::before 创建一个伪元素，它是所选元素的第一个子元素。

在您的情况下，您使用的是同一个类，因此它针对该类的所有元素。

父伪元素不会影响子伪元素

.parent::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid black;
}
.child::before {
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  background-color: red;
}

<div class="parent">
  <div class="child"></div>
</div>

【讨论】：