CSS選擇符是用來選擇HTML或XML文檔中的元素的一種語法。在CSS中,選擇符由一個或多個選擇器組成,每個選擇器由一個或多個單獨的選擇器組成。
/* 一個選擇器 */ p { font-size: 1rem; } /* 多個選擇器 */ h1, h2, h3 { color: #333; } /* 選擇器組合 */ .container p { line-height: 1.5; }
選擇器可以根據元素的類型、屬性、內容和位置等特征進行匹配,常用的選擇器有:
/* 類型選擇器 */ h1 { font-size: 2rem; } /* ID選擇器 */ #intro { font-style: italic; } /* 類選擇器 */ .warning { color: red; } /* 屬性選擇器 */ a[href="#"] { text-decoration: none; } /* 子選擇器 */ ul >li { margin-left: 1rem; } /* 相鄰同胞選擇器 */ h1 + p { font-weight: bold; } /* 通用選擇器 */ * { box-sizing: border-box; }
選擇器還可以根據偽類和偽元素進行匹配,一些常用的偽類和偽元素有:
/* :hover偽類 */ a:hover { color: blue; } /* :nth-child偽類 */ li:nth-child(odd) { background-color: #f2f2f2; } /* :before偽元素 */ p::before { content: "Hello "; } /* :after偽元素 */ p::after { content: "World!"; }
選擇器語法的靈活性和強大性可以讓開發者輕松地實現各種樣式效果,使網頁設計更加多樣化和個性化。
上一篇vue怎么引用靜態css
下一篇vue語法和css有關嘛