Question

我正在为一个网站制作一个主题，但我遇到了一个问题。我不能改变他们的HTML或使用javascript，只能使用CSS。

这就是网站的HTML：

<div class="container">
  <div style="margin:a ridiculously massive number">
    <p id="title"> Title of page </p>
    <p> Words that cannot be read because of the ridiculous margin </p>
  </div>
  <div id="otherContent"> There a lot of divs without ridiculous margin all with different ids </div>
</div>

我希望在不影响其他divs边距的情况下删除这种可笑的边距。这可能吗？

Answer 1

是的，您可以定位div first-child .container，而不会影响其他div。

.container div:first-child{
   //code
}

EXAMPLE 1

示例1特别针对您发布的示例，其中您要定位的div是其父级的第一个子级。另请注意，如果margin像您的示例一样内联，您将不得不像!important一样覆盖它：

.container div:first-child{
   margin: 0 !important;
}

或

如果其他人具有相似的类
，您也可以使用:not选择器
.container div:not(.classname) { //code }

EXAMPLE 2

示例2的要点是，如果您的div不是第一个孩子而且唯一没有class的话（您可能不会有多个div相同的类名，除了一个，但它是可能的）。在您的示例中，您还可以使用:not()定位ID为#otherContent的其他div，如下所示：

.container div:not(#otherContent) { //code }

或

如果其他选项不适用，您可以使用的最后一个选项是nth-of-type()，以明确指定您要生效的选项：

.container div:nth-of-type(2) { //code }

EXAMPLE 3

Answer 2

在这种情况下，您必须使用带有first-child关键字的!important选择器，因为这是使规则比style="margin"规则更具体的唯一方法：

.container > div:first-child {
    margin: 0 !important;
}

Answer 3

如果所有其他div都有IF，您可以使用以下内容：

div>div:not([id]) {
    margin: 0 !important;
}

是否有可能在CSS中选择一个没有ID或类的元素？

3 个答案: