將元素放入css類的區別是什麼？

Question

我可以讓CSS工作，但有些事情我不是很瞭解。

任何資源非常清楚地解釋之間的差異：

p .example 
p.example 
.example p 
.example.p 

和：

p h1 .example 
p h1 .example 
.example p h1 
.example.p h1 

或者：

p, h1 .example 
p, h1 .example 
.example p, h1 
.example.p, h1 

ECT ....

我可以當我從前看到變化週日，但我不明白我在做什麼！

Answer 1

p。實施例

<p>Lorem<span class="example">ipsum</span></p> 

p.example

<p class="example">Lorem ipsum</p> 

。實施例p

<div class="example"><p>Lorem ipsum</p></div> 

.example.p

<div class="example p">Lorem ipsum</div> 

和：

p H1。實施例 - >非標準HTML

<h1 class="example">Title Here</h1><p class="example"></p> 

p H1。實施例 - >非標準HTML

<p class="example"></p><h1 class="example"></h1> 

。實施例p H1 - >非標HTML

<div class="example"><p>Lorem Ipsum</p><h1>Title Here</h1></div> 

.example.p H1

<div class="example p"><h1>Title Here</h1></div> 

或者：

P，H1。實例

<p>Lorem Ipsum</p><h1 class="example"></h1> 

P，H1。實例 - >重複 。實例P，H1

<div class="example"><p>Lorem ipsum</p></div><h1>Title Here</h1> 

.example.p，H1

<div class="example p">some text here</div><h1>Title Here</h1> 

Answer 2

在講解語法

空白指定的子節點深任何級別

p .example =服用p標籤作爲父母選擇一個元素是誰的類是example它可以在任何水平存在根據本父元素

p.example =選擇一個元素，它是一個p標記，並且具有一個類example

.example p =正與example類作爲父元素選擇一個元件，它是p標籤，其可以在任何水平存在這個父元素之下

.example.p =選擇包含兩個example和p作爲類元素（注意，即使p被認爲是一類，因爲它是與操作者.使用）

---

p h1 .example從=開始標籤導航到h1標籤深的任何級別，並選擇與example類元件，其可以存在內部h1標籤深任何水平

p h1.example =從p標籤開始選擇一個h1標籤，其具有類example它可以存在於深的任何級別此p標籤

.example p h1 =從一個元件與example類開始，並在這個元素中導航到p標籤（任何水平深），並且這p標記下選擇所有h1標籤（任何電平深）

.example.p h1 =從與兩個類example和p一個元件該元件

---

下就選擇所有h1標籤（任何級深），指定多個扇區。

例如：如果我想使所有的p標籤，div標籤，span標記爲紅色背景，然後我可以在一個CSS選擇器中選擇所有的人，並給出具體的規則了，就象下面

p, div, span{ 
background-color: red; 
} 

p, h1 .example =請選擇p標籤，並選擇一個example類別的元素，它包裝在h1的任何級別下。

現在我相信你會明白其餘3個語法p, h1 .example，.example p, h1，.example.p, h1

Answer 3

p .example - >這意味着你靶向命名爲「榜樣」一個段落（P）標籤內的表演課。

p.example - >產生與上述相同的結果。

.example p - >這意味着您要在名爲「example」的類內部執行段落（p）標記。

.example.p - >這意味着你正瞄準名爲「example」的類內的「p」類。

p h1 .example - >在「p」標籤內的「h1」標籤內的目標「示例」類。

p h1 .example - >產生與上述相同的結果。

.example p h1 - >目標「h1」標籤位於「示例」類中的「p」標籤內。

.example.p h1 - >在「示例」類中的「p」類中標記「h1」標籤。

p, h1 .example - >這裏，「h1」標籤內的類「example」與「p」標籤具有相同的屬性。

p, h1 .example - >產生與上述相同的結果。

.example p, h1 - >這裏，「example」標籤中的標籤「p」與「h1」標籤具有相同的屬性。

.example.p, h1 - >這裏，「example」標籤中的類「p」與「h1」標籤具有相同的屬性。

Answer 4

僅供參考術語，您所指的是選擇器。

我會解釋每一個：

p .example 

選擇與example類p元素的所有後代。

p.example 

選擇所有p元素與example類。

.example p 

選擇帶有example類元素的所有p後代。

.example.p 

選擇與類example和類p所有元素。

p h1 .example 

選擇與example類p內h1的所有後代。

p, h1 .example 

選擇所有p元件和與example類的h1的所有後代。

.example p h1 

選擇從一個p元件從與example類元素下降下降所有h1元素。

.example.p h1 

選擇所有h1元件能與類example和類p元素的後代。

.example p, h1 

選擇所有p元素與example類元素的後代和所有h1元素。

.example.p, h1 

選擇既類example和類p和所有h1元素的所有元素。

---

如何閱讀CSS

CSS是有時很難解釋。我發現最簡單的方法是反向閱讀。

在第一個例子：

p .example 

開始在最右邊的項目.example。這意味着只會選擇類別爲example的元素。因爲在此之前有一個p（在兩者之間有一個空格）可以將選區「縮小」爲只有後代的p元素。

在第二個例子：

p.example 

同樣，最右邊的項是.example。這意味着只會選擇類別爲example的元素。由於在此之前有一個p（這次沒有空間），所以將選擇「縮小」到只有該類別的p元素。

下面是一個示例HTML代碼段藉助於該示例選擇哪一個元素的描述：

<p class="example">This element will be selected by the second example</p> 
<p> <!-- this p element will not be selected by either example --> 
    <span class="example">This element will be selected by the first example</span> 
</p> 

逗號

選擇器可以是逗號分隔的。看看下面的例子：

p, h1 { 
    color: red; 
} 

這將選擇所有p代碼和所有h1標籤和顏色他們的紅色。