我怎样才能在div中添加不同类型的链接？

Question

我在div内有多个div，其中.grid类。在那些div内，每个都有一个链接。我使用选择器.grid div a设置了这些链接的样式。之后，我在每个div中添加了另一个链接，并为其指定了一个类.name，并使用.grid div .name选择了该链接。问题是这些带有类名的新链接会受到级联的影响。为什么会这样？ .grid div .name选择器更具体吗？ 这是我的CSS 这是为了将div变成可点击的链接

.grid div a
{
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
text-decoration: none;
z-index: 1;
}
This is the style for the other links
.grid div.name
{
position: absolute;
height: 20px;
width: 120px;
font-family: lato;
color:  #424242;
}

Answer 1

  

这是其他链接的样式

     

.grid div.name

不，不是！

这将是：

.grid div a.name

或

.grid div .name

.grid div a.name {
  background: pink;
}

<div class="grid">
  <div>
    <a href="#1">First Link</a>
    <a href="#2" class="name">Name Link</a>
  </div>
</div>

您当前的选择器选择具有名称类的div，因为元素类型和类之间没有“space”。

Answer 2

你期待它反过来工作。这两个链接都是由.grid div a的CSS选择的。

如果您希望样式不影响.grid div a.name选择器，则在第二个定义中更改CSS以将其重新覆盖回您想要的样式。

例如，如果第一个具有font-size：2em，则更改.name定义以将其更改回font-size：1em。

Answer 3

你可以尝试这个第n个孩子的概念：

div a:nth-child(1){color:green;}