Question

我有div有两个标签，我想为第一个标签写css。

这是HTML：。

<div id="Text">
    <br />                
    <a href="http://farsnews.com/newstext.php?nn=13920430001427#sthash.BOTOvYwM.dpuf">فارس نیوز</a>
    <a href="http://farsnews.com/newstext.php?nn=13920430001427#sthash.BOTOvYwM.dpuf">فارس نیوز</a>
</div>

这是我的css代码：

#Text a:last-child{
    text-decoration: none;
    color: red; /*rgb(18, 139, 235)*/
}

Answer 1

试试这个

#Text a:first-of-type{
    /* css */
}

这将选择#Text

中的第一个<a>标记

Answer 2

问题是a不是其父项DIV#text中的第一个孩子。 CSS first-child伪类的操作如下：

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

当字面意思准备好时，它只适用于作为其父级中第一个子元素的元素。当你向它添加额外的类选择器时，它没有考虑你（心理上）创建的上下文。

当应用伪类时，浏览器不理解选择器创建的上下文。基本上，它检查元素是否与选择器#text a匹配，然后询问问题，“这是父母中的第一个孩子吗？”。它在不考虑上述选择器的情况下提出这个问题。在你的情况下，答案是否定的，因为在第一个a之前还有另一个元素。那是<br/>（同样适用于last-child）

在您的示例中，元素<br/>实际上是第一个子元素。

所以结论是 -

如果你想为a:first-child提供风格，那么它必须是其父母的第一个孩子，即DIV#text

现在你的第一个孩子 BR 所以请将其删除

OR Else assign

#Text a.q {
  ...
}

或者

#Text a:first-of-type {...}

The :first-of-type selector is supported in all major browsers, except IE8 and earlier.

Answer 3

#Text a.q {
  //css
}

你可以这样做

Answer 4

您可以写如下：

div a.q {
  text-decoration: none;
   color: red; /*rgb(18, 139, 235)*/
}

或

  #Text a.q {
      text-decoration: none;
       color: red; /*rgb(18, 139, 235)*/
    }

Answer 5

试试这个

#Text a:first-child{
    /*your css */
}

得到第一个孩子

5 个答案: