3

很抱歉，非常通用的帖子标题。但我在这里追求的是：

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

如何在 CSS 中选择“链接 3”？根本没有编辑那个 Html 。这是呈现的 html，我需要选择链接 3，而不选择链接 1 和 2。

有任何想法吗？

4

6 回答 6

6

你发布的字面意思是“找到任何在他们父母a内部div#my-div并且是他们父母的直接孩子的人。”

采用

div#my-div > a

使用将>描述更改为：“找到任何你想要a的”的直接后代。div#my-div

于 2013-02-26T09:44:30.820 回答
3

使用以下 CSS 选择器：

div>a

或者

#my-div>a

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

例如

<!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>
于 2013-02-26T09:42:09.560 回答
3

试试这个

#my-div > a {
    color:red
}

演示

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

在此处查看更多信息

于 2013-02-26T09:42:50.063 回答
1 
#my-div>a{
  background: red;
}
于 2013-02-26T09:40:55.087 回答
0 
#my-div span + a {
    font-size: 12px;
    line-height: 18px;
}

在这种特定情况下，我建议使用相邻选择器。使用直接子选择器“>”也可以，但是您会产生潜在的陷阱，即如果在其后直接添加另一个链接（即链接#4），则该链接也将继承这些样式。相邻选择器确保仅选择链接 #3，即使稍后添加更多元素也是如此。

于 2013-02-26T10:05:55.780 回答
0

在 CSS 中使用相邻兄弟选择器非常容易。

在您的情况下，您可以使用选择链接 3，

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

可以从 w3c相邻选择器获得更多信息

于 2013-02-26T10:10:15.860 回答