CSS選取器深入探討（細節東西）

細節決定成敗，越是注重細節方面的東西，那麼你完成的作品就越完美。

1、父子選取器(看作組合比較好理解)

• 父子選取器可以有多級（但是在實際開發中最後不好超過三層)

　　如：html中檔案片段：

<!--父子選取器-->
<span id="id1">這是一個<span>非常<a href="#">匯總的世界</a>重要</span>的新聞</span>

css檔案：

#id1 span{
color:red;
font-style:italic;
}

#id1 span a:hover{
color:green;
font-size:16px;
text-decoration:none;
}

• 父子選取器有嚴格的層級關係。
• 父子選取器不局限於什麼類型選取器

比如這樣寫：#id span a 和.s1 #di span 和 div #id .s2 都是可以的。

2、一個元素可以同時有id選取器和類別選取器

如：

<span class="style1" id="id_news1">新聞一</span>

.style1{
font-size:20px;
background-color:pink;
color:black;
}

/*給新聞一指定id*/

#id_news1{
font-style:italic;
color:red;
}

3、一個元素最多有一個id選取器，但是可以有多個類別選取器 

   因為id是唯一性的，所以不能出現多個id。

程式碼片段：

     <span class="style1 news3">新聞三</span>

.style1{
font-size:20px;
background-color:pink; /*衝突*/
color:black;
}

/*新聞三指定一個類別選取器*/

.news3{
text-decoration:underline;
font-style:italic;
color:yellow;
background-color:silver;   /*衝突以.new3為準*/
}

注意：但2個類別選取器發生衝突的時候，則以寫在css檔案中的後面的那個選取器為準！

 

4、我們可以把某個css檔案中的選取器公用部分，可以獨立寫一份

      如css有 .a，.b， .c 3個類別選取器，但是他們有公用的height，float，margin屬性，我們就可以這樣寫：

.a , .b, .c{  /*(注意：一定要加以逗號區分開來，少了逗號就沒有效果了)*/

height: 196px;float:left;margin: 5px 0 0 6px;} 注意這些細節方面，我相信在後面的DIV+CSS內容更容易理解與掌握。