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 であり、リンク 1 と 2 を選択せず​​にリンク 3 を選択する必要があります。

何か案は？

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

これaにより、div の直接の子孫、または 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
}

デモ

この Symbol ターゲット要素は、親要素の直接の子です。

詳細はこちら

于 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 に答える