在CSS3中,新的標簽被加入到了樣式規范中,這些標簽的作用是為了使我們能夠更加輕松地控制頁面的樣式。下面我們來看一些常用的新標簽:
::selection { /* 選中文本時的樣式 */ } ::-moz-selection { /* 移動瀏覽器選中文本的樣式 */ } :target { /* 操作錨點鏈接時的樣式 */ } :root { /* 文檔根元素 */ } :nth-child(n) { /* 選擇第n個子元素 */ } :nth-of-type(n) { /* 選擇第n個類型的子元素 */ } :lang(language) { /* 選擇使用指定語言的元素 */ } :last-child { /* 選擇最后一個子元素 */ } :first-of-type { /* 選擇第一個類型的子元素 */ } :focus { /* 獲得焦點的元素 */ } :empty { /* 選擇內容為空的元素 */ } :checked { /* 選擇被選中的復選框或單選按鈕 */ } :disabled { /* 選擇被禁用的表單元素 */ } :enabled { /* 選擇可用的表單元素 */ }
這些標簽的用法和普通的CSS選擇器一樣,只需要在選擇器前加上對應的偽類即可。例如:
/* 當選中文本時設置背景色和文字顏色 */ ::selection { background-color: #ffa50a; color: #fff; } /* 選擇第二個列表項并將其背景色設為藍色 */ li:nth-of-type(2) { background-color: blue; }
使用這些新標簽,我們可以更加靈活地控制頁面的外觀和交互效果,讓網站更加美觀和易于操作。
上一篇bmob json推送
下一篇css3字間隔