css中選擇器之前的文本是什麼意思？

Question

對於初學者css問題的道歉，但它很難找到答案。 我正在尋找html和css的duckett書籍，它有一些選擇器語法讓我感到困惑。

table.one{}  
input#web{} 

我認爲.x表示x是一類選擇，同樣是#x表明x是id選擇，但爲什麼筆者選擇這些之前把文本？據我所知，他沒有給出解釋。

Answer 1

table.one匹配具有類的所有table元件。

input#web匹配input元素，其ID爲web。

這種選擇器被稱爲「類型選擇器」。你可以閱讀這些資源：

• CSS2.1 spec
• Selectors Level 3
• Selectors Level 4
• MDN article

Answer 2

1. table.one{} '[元素類型] [css類名] {}
2. input#web{} '[元素類型]＃[id屬性] {}

當指定一個元素類型這意味着該定義僅適用於該元素類型。

table.myCss{}爲元素，當class='myCss'然後應用css。不要將此CSS應用於<span class='myCss'>或任何其他元素類型。

這是一個鏈接到CSS3的官方規格頁面。 http://www.w3.org/TR/css3-selectors/

Answer 3

在它們各自的類/ ID之前使用table和input引用標記中元素的類型。例如：

table.one { 
    .. 
} 

參考與類 「一」（在代碼：<table class="one">）的表。這樣，如果作者具有另一個具有類「one」的元素（例如：<div class="one">），則div不受table.one規則的影響。除了選擇用於input#web

同樣的想法，朝着input標籤的目標與「網絡」的ID（<input id="web">）

從W3一些額外的閱讀可能有一定的幫助（這是自CSS2，但要點仍然存在）：http://www.w3.org/TR/CSS2/selector.html

DEMO：http://jsfiddle.net/uWkYL/

Answer 4

讓我把它分解：

table.one手段，尋找與標籤名字table，這也有類one
input#web同樣的意思是：尋找與名稱input和web

在某些情況下，ID的元素，這些選擇可能沒有必要，尤其是在ID的，因爲他們應該是獨一無二的，而不是可以適用的課程。但是，元素名稱與類的用法可以幫助您使不同的元素看起來不同於其他元素，例如，如果要將文本和div對齊，則可能只想爲兩者使用一個類，但因爲<div>元素是塊級別，默認情況下它們不能像文本一樣居中。

div.center { 
    margin-left: auto; 
    margin-right: auto; 
} 
p.center { 
    text-align: center; 
} 

Answer 5

<input class="x" ... > 
<div class="x" ... ></div> 

所以現在我們有：

.x {} // To select both 

input.x {} // To select just the input with class "x" 

div.x {} // To select just the div with class "x" 

這可以用來只是使它更加清晰的風格是什麼元素。或限制受影響的元素。

同樣，我們可以使用元素ID做到這一點。

<input id="a" ... > 
<div id="b" ... ></div> 

因此，我們可以寫簡單#a。或者我們可以寫input#a。目前這些都是等效的。

對於div，我們可以有#b或div#b。