Question

我有一个html页面，其div看起来像这样：

<div class="get-this"> blah blah </div>

我在div上有一个前伪元素，我试图只将CSS样式应用于不适用于伪元素的div。

.get-this:not(::before) {
  padding-top:2px;
}

该样式适用于整个div。是否可以将样式仅限制为div而不是伪元素？

Answer 1

这是对级联的直接使用。

CSS级联旨在使您能够将常规样式应用于更常规的选择器，并将样式覆盖到更具体的选择器。

因此：

.get-this {
  padding-top:2px;
}

.get-this::before {
  padding-top:0;
}

工作示例：

.paragraph-one {
color: red;
}

.paragraph-two {
color: blue;
}

.paragraph-one::before {
content: 'Paragraph One: ';
}

.paragraph-two::before {
content: 'Paragraph Two: ';
color: green;
}

<p class="paragraph-one">This is paragraph one. It is red.</p>
<p class="paragraph-two">This is paragraph two. It is blue.</p>
<p>The <code>::before</code> pseudo-element preceding Paragraph Two <em>isn't the same color</em> as the rest of Paragraph Two, because, further down the cascade, an overriding style has been declared for the more specific <code>.paragraph-two::before</code> selector.</p>

Answer 2

如果您已经将所有div元素应用于css之前或之后，则需要您输入内容：“”;为了显示应用于DOM的样式：之前或DOM：之后

这意味着如果您将内容设置为none，则不会显示该内容。覆盖你的div风格，你可以简单地做

JSONObject cards = resultObject.getJSONObject("added_cards");
tConventional.setText(cards.getString("event"));

但我会避免在属性之前或之后应用于应用程序的所有div元素。 div元素经常在很多情况下使用，因此你会遇到你现在面对每个div元素的问题。这意味着写css来覆盖css。在大多数情况下，这不是一个好习惯。

此外，如果您的DOM元素之前，在其位置之后与父DOM相关，那么，如果您的DOM的填充，边距，定位，大小更改将影响该DOM之前或之后

如何仅将CSS样式应用于div而不是之前的伪元素

2 个答案: