偽類是CSS中一種非常重要的選擇器,它們允許我們在指定元素在特定狀態(tài)時(shí)應(yīng)用樣式。以下是一些常用的偽類:
/* 鼠標(biāo)懸浮時(shí)應(yīng)用樣式 */ a:hover { color: red; } /* 元素被訪問過時(shí)應(yīng)用樣式 */ a:visited { color: purple; } /* 元素未被選擇時(shí)應(yīng)用樣式 */ input:not(:checked) { opacity: 0.5; } /* 當(dāng)?shù)谝粋€(gè)子元素選中時(shí)應(yīng)用樣式 */ ul li:first-child { font-weight: bold; }
需要注意的是,大多數(shù)偽類只能針對某些特定的元素使用,如:hover只能應(yīng)用于可交互元素(如鏈接或按鈕),而:first-child只能應(yīng)用于父元素下的第一個(gè)子元素。
另外,CSS3還增加了一些更高級的偽類,如:nth-child(n)和:nth-of-type(n),它們可以根據(jù)選擇器的位置類型來匹配元素。多個(gè)偽類可以同時(shí)應(yīng)用于一個(gè)元素,如下面的例子:
/* 先選中第一個(gè)子元素,再應(yīng)用:hover樣式 */ ul li:first-child:hover { background-color: yellow; }
總的來說,偽類是非常實(shí)用的CSS選擇器,可以幫助我們實(shí)現(xiàn)更加靈活、動(dòng)態(tài)的頁面效果。
上一篇css代碼生成器6