CSS選擇。 類型的選擇

，每一個你想設置一個特定的顏色。 怎麼辦呢？ 標準的CSS選擇器是不適合的標籤，他們指出對所有塊中的參數一次。 解決方法很簡單。 分配類成員。 例如，第一個接收到的div類='紅'，第二-類='藍色'，第三-類=“綠色”。 現在，他們可以使用CSS表格中選擇。

語法如下：表示一個點（“。”），其次是寫類的名稱。 要管理第一單元，使用.red建設。 二- 。藍色等。

重要！ 建議使用類屬性的有意義的值。 它被認為是不好的形式使用音譯（例如，krasiviy-BLOK）或字母/數字的隨機組合（ojfh834871）。 在這段代碼中，你一定會感到困惑，更不用說將面臨那些後你誰將會參與該項目的困難。 最好的選擇-使用任何方法，如BEM。

優點-較高的靈活性。

缺點 - 所述多個元件可以是一個相同的類，這意味著它們將被同時編輯。 這個問題可以用預處理器的方法以及繼承解決。 一定要得到你的手少，青菜或其他一些預處理程序，它們大大簡化了工作。

ID選擇

關於這個版本的意見編碼器和程序員都含糊不清。 CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. 一些 CSS 教程 不建議使用ID， 因為不準確的應用程序，他們可能會導致繼承問題。 然而，許多專家都在積極整個佈局安排他們。 你決定。 # »), затем имя блока. 的語法如下：井號（“＃”）， 則該塊的名稱。 #red. 例如，#red。

отличается от класса по нескольким параметрам. ID 是在幾個方面的不同類。 ID. 首先，網頁不能由兩個相同的 ID。 他們被分配一個唯一的名稱。 其次，這樣的選擇具有更高的優先級。 red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. 這意味著，如果你指定一個單位類 紅色 和 CSS 表指定了 紅色 的背景色， 然後分配給它相同的 id藍色 並指定顏色藍色，單位會變成藍色。

優點-可以控制特定元素，忽略風格的標籤和類。

ID и class. 缺點-容易迷失在大量的 ID 和 階級 。

重要！ ID вам, в общем-то, не нужны. 如果您正在使用BEM方法（或其類似物），ID 給你，一般情況下是不需要的。 該技術包括使用佈局獨特的類，更方便。

通用選擇

{}. 語法：小星星號（“*”）和大括號，即{*} ...

用於指定某些屬性一旦頁面中的所有元素。 當這可能是有用的？ box-sizing: border-box. 例如，如果你想設置的頁面屬性 框中上漿：邊界框。 div *{}. 不僅可以用來管理文檔的所有組成部分，而且要控制在規定塊的所有兒童，例如，DIV * {}。

優點-你可以同時控制大量的項目。

缺點-沒有足夠的靈活選擇。 此外，使用這種選擇的，在某些情況下，減慢頁面的工作。

按屬性

使其能夠具有特定屬性的控制元素。 例如，你有許多輸入標籤具有不同的屬性類型。 其中之一-文本，第二個-密碼，第三個-數字。 當然，你可以設置每個類或ID，但它並不總是很方便。 屬性的CSS選擇器，可以用最大精度某些標記指定值。 例如，像這樣：

輸入[類型='文本'] {}

這個選擇器將選擇與輸入的文字類型的所有屬性。

該工具是相當靈活，可以與任何標記，其中可能有屬性的使用。 但是，這還不是全部！ CSS規範與更方便的控制元素的能力！

試想一下，你的頁面有輸入與屬性佔位符=“輸入名稱”，並輸入佔位符=“輸入密碼”。 它們還可以使用選擇器選擇！ 要做到這一點，使用以下結構：

輸入[佔位符=“輸入名稱”] {}或輸入[佔位符=“輸入的口令”]

也許有屬性更靈活的工作。 比方說，你有許多具有相似屬性的標題（例如，“凱斯賓”和“里海”）標籤。 若要選擇，請根據以下選擇：

[標題* =“卡斯皮斯克”]

CSS會選擇所有的稱號，其中有“里海”，即E.和“里海”和“里海”符號的項目。

您也可以選擇開始具有一定的人物屬性標籤：

[標題^ =“字符，你想”] {}

或終止它們：

[標題$ =“右字符”] {}。

優勢-最大的靈活性。 您可以選擇任何現有的頁面元素沒有與類搞亂。

缺點-相對很少使用，只有在特定的情況下。 許多網頁設計師喜歡的方法，因為該點類是很容易，安排眾多的 方括號 和標誌“平等”。 此外，這些選擇不會在Internet Explorer版本7和下面的工作。 然而，誰是現在需要老的Internet Explorer？

偽類選擇

表示偽狀態元素。 例如，：懸停-將鼠標懸停發生了什麼頁面的部分，：參觀-在訪問過的鏈接。 它還包括諸如：第一，兒童和：最後一個孩子。

此類型的選擇在現代的佈局正在積極使用，因為多虧了它，你可以做一個網頁“活”不使用JavaScript。 例如，要確保當你將鼠標懸停在按鈕與類的BTN它的顏色變化。 要做到這一點，我們使用的結構如下：

.btn：懸停{

背景色：紅色;

}

美容可以在按鈕，則轉換屬性的基本屬性來指定，例如，0.5秒-在這種情況下，按鈕將不會立即臉紅，和半秒內。

美德-被廣泛用於網頁“復興”。 易於使用。

缺點 - 他們不是。 這是一個非常方便的工具。 然而，沒有經驗的網頁設計師可以迷失在大量的偽類的。 問題是解決了學習和實踐。

偽選擇

“偽” -這些是不是在HTML頁面的部分，但他們仍然可以進行管理。 你不明白嗎？ 它比它看起來要容易得多。 例如，你想在字符串中的第一個字母大紅色，讓其他小和黑色文本。 當然，可以得出結論：在某一類的跨度那封信，但它的長和無聊。 這是很容易選擇整個段落，並使用偽::第一個字母。 它給人的機會控制的第一個字母的外觀。

有相當多的偽元素。 列出他們在一篇文章中是不可能成功的。 你可以找到你喜歡的搜索引擎的相關信息。

優勢-提供靈活的定制頁面的外觀。

缺點 - 新他們經常被混淆。 只有在某些瀏覽器這類工作的許多選擇。

總結

選擇-文檔流控制的有力工具。 多虧了他，你可以選擇頁面的每一個部件（甚至還有一些只是部分）。 一定要了解所有可用的選項，甚至把它們寫下來。 如果你創建一個具有現代設計複雜的頁面和大量互動元素的這一點尤為重要。