1. //css    .con .loulan1 p span{ display: block; }   
2. //html    <div class="con">   
3.     <div class="loulan">            <p><span>文字</span></p>   
4.     </div>    </div>   

在這里我們對con類里面的loulan類里的p標簽里面的span標簽進行樣式定義。我說出來都嫌累更別說寫起來了，其實你可以把瀏覽器看作一個人，它渲染起來肯定也會浪費性能。

而且css的匹配原理不是從左到右的，而是從右到左的，也就是說我們的這行代碼里面，先查找到頁面里面所有的span元素形成一個集合，再在所有的span元素往上查找，看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢尋找，把父元素不是p元素的刪去，再往上查找看集合里的有p元素又多少它的父元素的類是loulan...瀏覽器說：我好累...

其實呢瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。并且Firefox 稱這種查找方式為 keyselector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最后(最右邊)的規則，上面的 key 就是 span。人家本來是為了能盡快過濾到一些無關樣式規則的，我們這里缺一層套一層，層層不停歇。所以只是想定義一個span的樣式在span上加個類豈不是更好。有人這時要說了，那樣是需要在每個元素上都加上類嗎？那肯定不是必須的，只不過我們要了解瀏覽器是怎么查找匹配的，然后結合現在的結構來做出一個最好的最方便的寫法。