CSS高級選擇器是CSS中非常重要的一部分。使用高級選擇器,你可以選取 HTML 文檔中的特定元素,使其顯示出特定的風格和效果。在本文中,我們將討論CSS中常見的高級選擇器。
1. 后代選擇器(Descendant Selector):
.parent p { color: red; }
此選擇器可以選取父元素中的后代元素。例如,在上面的例子中,所有在類名為“parent”的元素中的 p 元素都將變成紅色。
2. 子元素選擇器(Child Selector):
.parent >p { color: red; }
此選擇器可以選取父元素直接包含的子元素。例如,在上面的例子中,只有在類名為“parent”的元素的子級 p 元素將變成紅色。
3. 相鄰兄弟選擇器(Adjacent Sibling Selector):
h2 + p { color: red; }
此選擇器可以選取緊接在另一個元素后面的元素。例如,上面的例子中,只有 h2 元素后緊接著的 p 元素將變成紅色。
4. 通用兄弟選擇器(General Sibling Selector):
h2 ~ p { color: red; }
此選擇器可以選取相鄰的所有兄弟元素。例如,在上面的例子中,所有 h2 后面的 p 元素都將變成紅色。
5. 屬性選擇器(Attribute Selector):
input[type="text"] { border: 1px solid red; }
屬性選擇器可以選取具有特定屬性或屬性值的元素。例如,在上面的例子中,只有包含 type 屬性且其值為 "text" 的 input 元素將被選中,并且將其邊框變為紅色。
以上就是CSS高級選擇器的一些常見用法。希望通過這篇文章,你能更加熟練地使用CSS選擇器,為你的網頁設計帶來更多可能性。
下一篇css魔幻