「#someid ul li.someclass a」和「#someid ul li .someclass a」之間的區別？ （注意空白）

Question

我沒有太多的CSS經驗，但是最近我發現在類選擇器之前有一個空格和沒有空格之間是有區別的。到目前爲止，我只知道它們被解釋爲兩種不同的東西...... CSS中的某些人可以向我解釋具體的區別是什麼？這是否也適用於ID選擇器？

謝謝。感謝你的回答。

Answer 1

#someid ul li.someclass a裝置

錨是所有具有類someclass和本身的
無序列表是與ID someid的
元件後代的後代
列表項後代。

#someid ul li .someclass a意味着

錨點是
有類someclass任何元素後裔和本身的是那些子孫的
無序列表後裔
列表項的後代
ID爲someid的元素。

所以，下面的標記的<a>元素相匹配的第一條規則，而不是由第二：

<div id="someid"> 
    <ul> 
     <li class="someclass"> 
      <a href="foo.html" /> 
     </li> 
    </ul> 
</div> 

並在下面標記的<a>元素由第二條規則匹配，但不是第一：

<div id="someid"> 
    <ul> 
     <li> 
      <span class="someclass"> 
       <a href="foo.html" /> 
      </span> 
     </li> 
    </ul> 
</div> 

Answer 2

兩個例子：

#someid ul li.someclass a將達到錨標記在這個例子中

<div id="someid"> 
    <ul> 
    <li class="someclass"> 
     <a href="http://www.example.com">link</a> 
    </li> 
    </ul> 
</div> 

#someid ul li .someclass a將達到錨標記在這個例子中

<div id="someid"> 
    <ul> 
    <li> 
     <div class="someclass"> 
     <a href="http://www.example.com">link</a> 
     </div> 
    </li> 
    </ul> 
</div> 

還要注意的是，這將打擊他們兩個：

<div id="someid"> 
    <ul> 
    <li class="someclass"> 
     <div class="someclass"> 
     <a href="http://www.example.com">link</a> 
     </div> 
    </li> 
    </ul> 
</div>