1. 首頁
  2. 問答
  3. 識別CSS中用於樣式和定位的html元素

識別CSS中用於樣式和定位的html元素

2012-03-20 55 views
1

我知道我們可以使用「Class」，「Id」等屬性來識別元素，從而爲CSS，文本框，文本區域，按鈕等提供樣式和定位。識別CSS中用於樣式和定位的html元素

我的問題是： 我們如何決定何時使用特定的屬性？ 使用一個優於其他（類vs Id與其他）有什麼優勢？ 爲什麼我們有多種識別元素的方法？爲什麼不用一種標準的方法來識別，比如說「Id」？

在此先感謝，當我們需要的不僅僅是一類更具體的選擇

來源

2012-03-20 user793468

回答

1

由於只有一個元素可以有給定的ID，所以無法在任何地方使用ID，所以如果要將相同的樣式應用於五個不同的元素，必須制定五條不同的規則，這是毫無意義的。

通常最好使用基線定義來表示特定元素類型的出現方式一般爲（鏈接，列表，表格等）。然後，如果您想讓這些元素具有不同樣式的特定位置，請將類應用於元素以標識該位置（例如，「導航欄」），並使用自定義樣式來修改該區域內元素的行爲：

li {/* How you generally want list items to appear */} 
.navigation-bar li {/* How you want list items to appear in the nav bar */}

由於這樣的樣式「層疊」，第二規則集將覆蓋由第一組，因爲第二個選擇是更具體的性能特性。

只要爲什麼有多種方式可以選擇一個元素，這是因爲它們幾乎都在某個點或另一個有用。 CSS有助於降低維護成本，因爲您不必在一堆不同的地方重複相同的樣式信息。它只能做到這一點，如果你能想出一個規則，可以在各種不同的情況下匹配你想要的元素。

來源

2012-03-20 22:01:48 StriplingWarrior

1

爲什麼我們需要各種選擇器（而不僅僅是一個，使用如你所建議的ID）的原因是它們在不同的場景中很有用。

  1. 元素選擇器（input，div，span）。當我們想要爲某種類型的所有元素應用某種樣式時，這種方式非常有用，獨立於其類或id。

  2. Id-selector。當您想將樣式應用於單個特定元素時非常有用。

  3. 類選擇器。當您想將樣式應用於多個元素時非常有用，不管它們是什麼類型的元素（div，span，input）。通過類，還可以通過向同一元素添加幾個類來組合各種類的樣式。

如果您只使用ID選擇器，那麼您將違反DRY，因爲您將不得不重複大量的CSS。假設您有五個輸入元素，所有元素都應該具有相同的樣式。然後，您就必須明確地寫在ID選擇器的每一個元素：

#input1, #input2, #input3 
{ 
/* Some styling */ 
}

如果您以後需要添加其他輸入，你將不得不修改你的CSS，併爲輸入添加一個新的選擇，使樣式也適用於該元素。在這種情況下，它會更好，要麼使用可應用於所有輸入一個類。或者使用元素選擇，只是施用定型於所有輸入。就像它的護照號碼元素的ID的

/* Either of these would probably be more suitable */ 
.inputs { 
    /* Use a class to style the inputs */ 
} 
input { 
    /* Apply styling to all elements of type input */ 
}

來源

2012-03-20 22:03:29

1

的想法 - 這是唯一的一個元素，可以用來僅適用造型吧。

  • 每個元素只能有一個ID（如<div id="id"></div>）
  • 每個頁面只能有一個元素與ID

認爲像其國籍元素的類 - 它可能與共享很多其他元素。因此它不是唯一的。

  • 您可以在多個元素上使用相同的類。 （例如<div class="class"></div> <div class="class"></div>）
  • 可以在同一元件上使用多個類。 （例如<div class="classone classtwo"></div>）

在做大型項目，你可能要一個標準內容的包裝，裏面是每次不同的東西。在這種情況下，包裝會被「類」和它裏面的東西通過「ID」來識別。

當應用CSS的多個實例，優先順序如下：

  • 元素 - >施加的通用CSS，例如用於所有「的div」
  • 類 - >施加的通用CSS，至該類
  • 標識的所有元素 - >應用特定的CSS，一個元素
  • 聯樣式 - >應用特定的CSS，使用style =「」標籤元素的標籤內

來源

2012-03-20 22:04:36 jacktheripper

相關問題

 相關問題