首先，孩子是不是在我的代碼

工作，我不知道爲什麼我的a:first-child不工作。這裏是我的html：首先，孩子是不是在我的代碼

<!DOCTYPE html> 
<link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet'> 
<title>Mira's place</title> 
<header> 
    <a href="index.html">Mira's place</a><br> 
    <h2>&#8220;<span id="quote">If nothing, then this.</span>&#8221;</h2> 
     <ul> 
      <li><a href="#">Home</a> 
      <li><a href="#">Games</a> 
      <li><a href="#">Pixel Art</a> 
      <li><a href="#">Contact</a> 
     </ul> 
</header> 
<section> 
    <h2>This is test H2</h2> 
    <p>This is lorem ipsum shitsum, blah <a href="#">Test</a> blah baldflksafdjsl adslkf ajfdlks ajfldsa jflksda lfhsdalf jdsalfh sdlfdshfdsk fjsdl ajfl 
</section> 
<footer> 
    <p>(C) MiraCZ 2013 - You can copy anything here! 
</footer>

，這是我的CSS

html { 
    background-color: #002240; 
    font-family: "Geo", sans-serif; 
    margin: 0; 
} 
header { 
    background-color: #001629; 
    margin: 0 -10px 0 -10px; 
} 
a:first-child { 
    color: #FF628C; 
    font-size: 36px; 
} 
header h2 { 
    color: #80FFBB; 
} 
li { 
    display: inline-block; 
    font-size: 18px; 
} 
p { 
    color: white; 
}

我只是想有第一a是36px大小。任何人都可以幫助它爲什麼會影響其他a？這裏是我的jsfiddle http://jsfiddle.net/dsT4Z/

這是我看到的。我添加紅色箭頭以顯示其a的I不想是大小等

enter image description here

來源

2013-04-13 Kyrbi

看起來像你對我只是想第一<a>它直接嵌套於有針對性的<header>。更改a:first-child規則如下：

/* only target an <a> element which is the first immediate child of a <header> element */ 
header > a:first-child { 
    /* ... */ 
}

這樣只有<header>的第一個直接子應該不會受到影響。 http://jsfiddle.net/dsT4Z/1/

來源

2013-04-13 17:58:36

所有的導航<a>標籤是都含有<li>標籤的第一個孩子，和因此符合規則。

文本區域中的一個是包含<p>的第一個（元素）子項，因此與規則匹配。

這將是更容易使用的ID或類名，你真的想影響的元素。

來源

2013-04-13 17:57:02

-1

我想你應該考慮使用:nth-of-type()選擇器。這似乎更適合這個應用程序。

first-child只會選擇無論第一個孩子是。使用nth-of-type，您可以保證選擇頭元素的第一個立即錨點子元素。

header > a:nth-of-type(1) { 
color: #FF628C; 
font-size: 36px; 
}

jsFiddle。
Documentation。

來源

2013-04-13 18:22:05 henryaaron

是什麼讓你的工作是不是'第n-的-type'但孩子選擇'>'。見http://jsfiddle.net/fSV4Z/1/ –

@RichardJPLeGuen我知道 – henryaaron

首先，孩子是不是在我的代碼

回答

相關問題