css解釋爲選擇適用元素

Question

有人可以請解釋選擇器是什麼意思？ 據我瞭解有#myId - 是控制id = myId的css。 .myClass是用於類myClass的控件的Css。 有人可以請解釋其他組合？

div.img a:hover img 
    { 
    border:1px solid #0000ff; 
    } 
div.desc 
    { 
    text-align:center; 
    font-weight:normal; 
    width:120px; 
    margin:2px; 
    } 

Answer 1

id（＃）在文檔中只能存在一次。在CSS和JavaScript中識別元素也是非常有用的（你是否需要它）。'

類（。）可以根據需要經常使用。

例如：你只有一個標題：<div id="header">Header</div>，但幾篇文章：<div class="article">...</div>

---

說你有這樣的HTML文檔：

<div id="site"> 
    <h1>Some heading...</h1> 
    <div class="article"> 
     <h1>Title</h1> 
     <p>Some content...</p> 
    </div> 
    <div class="article"> 
     <h1>Title</h1> 
     <p>Some content...</p> 
    </div> 
</div> 

文章的標題應該不會像作爲網站的標題很大，所以我們必須使用更具體的選擇器：.article h1 {...}。這將在類「文章」的元素中設置每個<h1>元素的樣式。

如果我們想要一個更具體的選擇器，我們將使用：div.article h1 {...}。這隻會對<div>框中的每個<h1>元素設置樣式，其文檔類爲

Answer 2

div.img a:hover img

選擇那些內的圖像徘徊鏈接，是內部與img類div元素，讓他們有一個藍色邊框。

div.desc

與類desc選擇div秒。

Answer 3

div.img a:hover img意思是：我找一個img元素這是一個a元素當前正在上空盤旋，這又與類名OG img一個div元素的後代的後代。

div.desc只需選擇任何div的類名稱desc。

Answer 4

看看標準定義，我總覺得這個有用：CSS selectors at W3C。

Answer 5

div.img a:hover img 

這將匹配任何img標籤，其爲a標籤這是目前在一個hover狀態是具有class="img"一個div標籤內內。

div.desc 

這將任何div標籤匹配class="desc"。

當項目像這樣鏈接在一起時，它們之間只有空格，它與特定層次的元素相匹配。例如，在第一個標籤中，不在a標籤中的img標籤將不會匹配。

您還可以使用逗號分隔項目，而不是匹配物品層次結構將分別匹配每個項目。所以像div.img, img這樣的東西將匹配任何div標籤與class="img"，並將匹配任何img標籤。

專門針對:hover屬性，這就是所謂的pseudo-class。它通過查找處於特定狀態（在這種情況下，正在盤旋）的那種類型的項來修改它所附屬的屬性（在本例中爲a）。