偽元素是CSS的一種重要概念,它允許我們在選中的元素之前或之后插入一些偽元素來修改選中元素的樣式。CSS中的偽元素由雙冒號或單冒號加上偽元素的名字組成,例如“::before”和“::after”。
p::before { content: "前置內容"; color: red; } p::after { content: "后置內容"; color: blue; }
上面的代碼演示了如何使用“::before”和“::after”偽元素在段落p元素前后插入一些內容。我們可以通過設置“content”屬性來定義偽元素插入顯示的文本或其他內容。除此之外,我們還可以使用偽元素修改元素的樣式,例如改變偽元素的顏色、字體大小、位置和透明度等。
值得注意的是,偽元素并不會在文檔中添加額外的元素,它只是作為已有元素的擴展來使用。
除了“::before”和“::after”,CSS還提供了許多其他有用的偽元素,例如“::selection”用于定義文本選中時的樣式,“::first-letter”用于在段落首字母添加樣式,“::nth-child()”用于選中特定序號的子元素等等。
p::selection { background-color: yellow; color: red; } p::first-letter { font-size: 24px; color: green; } p:nth-child(odd) { background-color: lightblue; }
上述代碼利用不同的CSS偽元素,改變了段落的選中樣式、首字母樣式、奇數子元素的背景色等,靈活運用偽元素可以大大提升我們的CSS效果和編寫效率。