當前位置：首頁 > news >正文

可以賺錢做任務的網站怎么投放廣告是最有效的

news 2025/7/7 21:08:25

可以賺錢做任務的網站,怎么投放廣告是最有效的,深圳市企業(yè)網站建設企業(yè),政府網站做減法公務員考題CSS3 新特性專欄持續(xù)更新中在前面我們已經學習了元素選擇器、id 選擇器和類選擇器，我們可以通過標簽名、id 名、類名給指定元素設置樣式。現(xiàn)在我們繼續(xù)選擇器之旅，學習 CSS3 中新增的三類選擇器，分別是： ? 屬性選擇器 ? 子…

CSS3 新特性

專欄持續(xù)更新中

在前面我們已經學習了元素選擇器、id 選擇器和類選擇器，我們可以通過標簽名、id 名、類名給指定元素設置樣式。
現(xiàn)在我們繼續(xù)選擇器之旅，學習 CSS3 中新增的三類選擇器，分別是：
? 屬性選擇器
? 子元素偽類選擇器
? UI 偽類選擇器

新增屬性選擇器

屬性選擇器就是通過正則的方式去匹配指定屬性的元素，為其設置樣式。
在 CSS3 中新增了三種屬性選擇器，如下所示：

選擇器	描述
E[attr^=“xx”]	選擇元素 E，其中 E 元素的 attr 屬性是以 xx 開頭的任何字符。
E[attr$=“xx”]	選擇元素 E，其中 E 元素的 attr 屬性是以 xx 結尾的任何字符。
E[attr*=“xx”]	選擇元素 E，其中 E 元素的 attr 屬性是包含 xx 的任何字符。

新建一個 index.html 文件，在其中寫入以下內容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>a[href^="#"] {color: rgb(179, 255, 0);}a[href$="org"] {color: rgb(195, 0, 255);}a[href*="un"] {background-color: rgb(0, 255, 149);color: white;}</style></head><body><ul><li><a href="#">本地鏈接</a></li><li><a href="https://www.baidu.com">百度</a></li><li><a href="https://developer.mozilla.org">MDN</a></li><li><a href="https://unsplash.com">Unsplash</a></li></ul></body>
</html>

在這里插入圖片描述

? 在上面代碼中，我們使用 a[href^=“#”] 去匹配 a 標簽中 href 屬性值以 # 開頭的元素。
? 使用 a[href$=“org”] 去匹配 a 標簽中 href 屬性值以 org 結尾的元素。
? 使用 a[href*=“un”] 去匹配 a 標簽中 href 屬性值包含 un 的元素。

子元素偽類選擇器

子元素偽類選擇器就是選擇某元素的子元素的一種選擇器。
在 CSS3 中，有以下幾種子元素偽類選擇器：

選擇器	描述
E:first-child	選擇元素 E 的第一個子元素。
E:last-child	選擇元素 E 的最后一個子元素。
E:nth-child(n)	選擇元素 E 的第 n 個子元素，n 有三種取值，數字、odd 和 even。注意第一個子元素的下標是 1。
E:only-child	選擇元素 E 下唯一的子元素。
E:first-of-type	選擇父元素下第一個 E 類型的子元素。
E:last-of-type	選擇父元素下最后一個 E 類型的子元素。
E:nth-of-type(n)	選擇父元素下第 n 個 E 類型的子元素，n 有三種取值，數字、odd 和 even。
E:only-of-type	選擇父元素唯一的 E 類型的子元素。
E:nth-last-child(n)	選擇所有 E 元素倒數的第 n 個子元素。
E:nth-last-of-type(n)	選擇所有 E 元素倒數的第 n 個為 E 的子元素。

新建一個 index1.html 文件，在其中寫入以下內容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 100px;height: 100px;margin-top: 10px;background-color: rgb(0, 255, 242);}div:nth-child(2) {background-color: rgb(0, 255, 128);}div:nth-of-type(4) {background-color: rgb(111, 0, 255);}</style></head><body><div></div><div></div><div></div><div></div></body>
</html>

在這里插入圖片描述

? 在代碼中，我們使用 div:nth-child(2) 給 div 的第 2 個子元素添加綠色背景顏色。
? 使用 div:nth-of-type(4) 給父元素下第 4 個 div 子元素添加紫色背景顏色。

UI 偽類選擇器

UI 偽類選擇器是通過元素的狀態(tài)來選擇的一種選擇器。
在 CSS3 中有以下幾種 UI 偽類選擇器。

選擇器	描述
:focus	給獲取焦點的元素設置樣式。
::selection	給頁面中被選中的文本內容設置樣式。
:checked	給被選中的單選框或者復選框設置樣式。
:enabled	給可用的表單設置樣式。
:disabled	給不可用的表單設置樣式。
:read-only	給只讀表單設置樣式。
:read-write	給可讀寫的表單元素設置樣式。
:valid	驗證有效。
:invalid	驗證無效。