Question

我喜欢HTML：

<tag1>
 <div class="c"> // need to select that
   <tag1>
    <div class="c"> // do not need that
    </div>
   </tag1>
 </div>
</tag1>

我想选择第一个div中的tag1来应用CSS规则

我试过了tag1:first-of-type c {}，但它没有用。

Answer 1

如果您想在代码中选择两个类，则只需在C前面加.：

tag1:first-of-type .c {
  color: red;
}

<tag1>
 <div class="c">Outer
   <tag1>
    <div class="c">Inner
    </div>
   </tag1>
 </div>
</tag1>

值得注意的是，实际上不可能仅使用上述结构设置外部元素的样式，尽管您可以通过使用更大的 specificity分别设置内部元素来解决这个问题。：

tag1:first-of-type > .c { color: red; } tag1:first-of-type tag1 .c { color: black; }

<tag1> <div class="c">Outer <tag1> <div class="c">Inner </div> </tag1> </div> </tag1>

希望这有帮助！：）

Answer 2

你可能会在CSS中执行此操作 - 如果您无法更改标记，则必须 hack 。

使用tag1 .c:first-of-type
使用tag1选择器和tag1 tag1 .c:first-of-type重置 内部 <property>: initial。

见下面的演示：

＆＃13;
＆＃13;
tag1 .c:first-of-type { color: red; } tag1 tag1 .c:first-of-type { color: initial; }
＆＃13;
<tag1> <div class="c">1 <tag1> <div class="c">2 </div> </tag1> </div> </tag1>
＆＃13;
＆＃13;
＆＃13;

Answer 3

你的html可能会被其他标签包围，例如身体标签。要仅针对外部div，只需更具体。

<body>
<tag1>
 <div class="c"> // need to select that
   <tag1>
    <div class="c"> // do not need that
    </div>
   </tag1>
 </div>
</tag1>
</body>

CSS

body > tag1 > div.c { }

Answer 4

这非常简单。你只需要两个规则。

第一条规则将选择您需要的内容：

aside > .c {
color: rgb(255, 0, 0);
font-weight: bold;
}

第二个规则将设置正常样式，同时取消选择适合模式aside > .c但任何比第一个aside深的嵌套的元素：

.c, aside aside > .c {
color: rgb(0, 0, 0);
font-weight: normal;
}

工作示例：

aside {
display: inline-block;
width: 50%;
height: 25%;
padding: 12px;
border: 2px solid rgb(0, 0, 0);
}

aside > .c {
color: rgb(255, 0, 0);
font-weight: bold;
}

.c, aside aside > .c {
color: rgb(0, 0, 0);
font-weight: normal;
}

<aside>
<div class="c"> // need to select this

<aside>
<div class="c"> // do not need that </div>
</aside>

</div>
</aside>

div的CSS选择器首先包含类型元素

4 个答案: