Question

对于非常通用的帖子标题感到抱歉。但我在此之后是这样的：

<div id="my-div">
   <span>
      <a href="#">link 1</a>
      <a href="#">link 2</a>
   </span>
   <a href="#">link 3</a>
</div>

如何在CSS中选择“link 3”？没有编辑那个Html 就是。这是提供的html，我需要选择链接3而不选择链接1和2.

有什么想法吗？

Answer 1

您发布的字面意思是＆＃34;查找a内的任何div#my-div并且是其父母的直接子女。＆＃34;

使用

div#my-div > a

使用>将说明更改为：＆＃34;查找a＆＃34;的直接后代的任何div#my-div这就是你想要的。

Answer 2

使用以下CSS选择器：

div>a

或

#my-div>a

这将选择任何作为div的直接后代的a，或选择ID为“my-div”的元素（以您最合适的为准）。

E.g。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div>a 
        {
            color:Red;
        }

        #my-div>a 
        {
            color:Blue;
        }
    </style>
</head>
<body>
    <div id="my-div">
   <span>
      <a href="#">link 1</a>
      <a href="#">link 2</a>
   </span>
   <a href="#">link 3 (this will be blue as per CSS)</a>
</div>
</body>
</html>

Answer 3

试试这个

#my-div > a {
    color:red
}

<强> DEMO

此符号目标元素是父元素的直接子元素。

查看更多信息 here

Answer 4

#my-div>a{
  background: red;
}

Answer 5

#my-div span + a {
    font-size: 12px;
    line-height: 18px;
}

在这种特定情况下，我建议使用相邻的选择器。使用直接子选择器“＆gt;”也有效，但你创造了潜在的陷阱，如果在它之后直接添加另一个链接（即链接＃4），该链接也将继承这些样式。相邻选择器确保即使稍后添加了更多元素，也只选择链接＃3。

Answer 6

使用CSS中的Adjacent兄弟选择器非常容易。

在您的情况下，您可以使用

选择链接3

#my-div + a + a {
/* your CSS Rule */
}

可以从w3c adjacent-selectors

获取更多信息

在CSS中选择特定元素

6 个答案: