在CSS中,大于符號(>)是一個非常有用的選擇器,可以幫助我們選取特定的HTML元素。
例1:選取某個元素的直接子元素 對于以下代碼: <div> <p>這是外層的段落元素</p> <ul> <li>列表項1</li> <li>列表項2</li> </ul> </div> 我們可以使用大于符號選取div下的直接子元素p: div>p { background-color: blue; } 例2:選取某個元素的某個特定子元素 對于以下代碼: <ul> <li> <a href="#">鏈接1</a> <ul> <li>子列表項1</li> <li>子列表項2</li> </ul> </li> <li>列表項2</li> </ul> 我們可以使用大于符號選取li下的直接子元素a: li>a { color: red; } 例3:選取某個元素的某個特定子元素的下一個元素 對于以下代碼: <div> <p>段落1</p> <p>段落2</p> <ul> <li>列表項1</li> <li>列表項2</li> </ul> <p>段落3</p> </div> 我們可以使用大于符號選取ul下的直接下一個元素p: ul>p { font-size: 20px; }
總之,大于符號是一種強大的選擇器,可以幫助我們選取指定的HTML元素,同時也可以提高代碼的易讀性和維護性。
下一篇css中的多選