在CSS樣式表中,除了基本的選擇器(如標簽選擇器、類選擇器、ID選擇器),還有許多高級選擇器可以用來選取HTML文檔中不同的元素。其中偽元素和偽類在CSS中的應用越來越廣泛。
/* 以下是CSS偽類的幾個常用選擇器 */ a:hover { text-decoration: underline; /* 鼠標懸浮時給鏈接加下劃線 */ } input:focus { border: 1px solid #0f0; /* 輸入框獲取焦點時加邊框 */ } li:first-child { font-weight: bold; /* 列表的第一個元素加粗 */ } /* 以下是CSS偽元素的幾個常用選擇器 */ p::before { content: "注:"; /* 在段落前面插入注釋 */ font-style: italic; } p::first-letter { font-size: 2em; /* 將段落第一個字母的字號加大 */ } p::selection { background-color: #ff0; /* 鼠標選擇文本時背景色變為黃色 */ }
偽元素的語法為選擇器::偽元素
,而偽類的語法為選擇器:偽類
。其中偽元素的選取范圍是某個元素內部的某一部分(如段落的第一個字母或前面的注釋),而偽類的選取范圍是某個元素的某個狀態(如懸浮、聚焦、第一個位置等)。
偽元素和偽類是CSS語法中非常實用的一種選擇器,可以幫助我們對HTML頁面進行更加精細化的樣式控制。